react native - how i navigate to listdata after done submit

Question

like my tittle i trying to make the app navigate to the listdata i just make after the app done submit. can anyone help me do that ? please help i'm newbie in react native. many appreciate from me thank you guys

Btw my code is kinda weird any recommend for me to boost it up? for better performance and easier to understand?

Here my code below:

import React, { Component } from 'react';
import {
  Text,
  Alert,
  TouchableOpacity,
  Button,
  TextInput,
  View,
  StyleSheet,
} from 'react-native';
import { hScale, vScale, fScale } from "react-native-scales";
import styles from '../one/Styles';
const listData = [
  {
    tenhs: "nguyen quang ha",
    lop: "12b",
    gioitinh: "nam"
  },
  {
    tenhs: "nguyen hoag sn",
    lop: "11b",
    gioitinh: "nam"
  },
  
]

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      input: {
        username: null,
        email: null,
        password: null,
        confirm_password: null,
      },
      errors: {
        username: null,
        email: null,
        password: null,
        confirm_password: null,
      },
    };
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  handleSubmit = (event) => {
    //event.preventDefault();

    if (this.validate()) {
      alert('ok');
      console.log(this.state);

       this.setState((prevState) => {
              let input = Object.assign({}, prevState.input);
              input.username = null;
              input.password = null;
              input.email = null;
              input.confirm_password = null;
              return { input };
       });
         this.setState((prevState) => {
              let errors = Object.assign({}, prevState.errors);
              errors.username = null;
              errors.password = null;
              errors.email = null;
              errors.confirm_password = null;
              return { errors };
       });

       Alert.alert('?? ??ng Ky',
       'Xin H?y ??ng Nh?p',
       [
         {
           text: 'OK', 
           onPress: () => console.log('OK Pressed'),
         },
       ],
       { cancelable: false });
    }
  }

  validate = () => {
    let input = this.state.input;
    let errors = {};
    let isValid = true;

    var errTemp = this.state.errors;
    errTemp.username = !input.username ? "Xin Nh?p Tên Ng??i Dùng." : null;
    this.setState({ errors: errTemp });

    // if (!input.username) {
    //   isValid = false;
    //   var errTemp = this.state.errors;
    //   errTemp.username = "Xin Nh?p Tên Ng??i Dùng.";
    //   this.setState({errors : errTemp})
    //   // this.setState((prevState) => {
    //   //   let errors = Object.assign({}, prevState.errors);
    //   //   errors.username = 'Xin Nh?p Tên Ng??i Dùng.';
    //   //   return { errors };
    //   // });
    // }
    
    // else{

    //   var errTemp = this.state.errors;
    //   errTemp.username = null;
    //   this.setState({errors : errTemp})
    // }

    // if (!input.email) {
    //   isValid = false;
    //   this.setState((prevState) => {
    //     let errors = Object.assign({}, prevState.errors);
    //     errors.email = 'Xin Nh?p ??a Ch? Email';
    //     return { errors };
    //   });
    // }
    var errTemp = this.state.errors;
    errTemp.email = !input.email ? "Xin Nh?p ??a Ch? Email." : null;
    this.setState({ errors: errTemp });


    // if (!input.password) {
    //   isValid = false;
    //   this.setState((prevState) => {
    //     let errors = Object.assign({}, prevState.errors);
    //     errors.password = 'Xin Nh?p M?t Kh?u.';
    //     return { errors };
    //   });
    // }
        
    
    // var errTemp = this.state.errors;
    // errTemp.password = !input.password ? "Xin Nh?p M?t Kh?u." : null;
    // this.setState({ errors: errTemp });

    if (!input.confirm_password) {
      isValid = false;
      this.setState((prevState) => {
        let errors = Object.assign({}, prevState.errors);
        errors.password = 'Xin Nh?p L?i M?t Kh?u.';
        return { errors };
      });
    }     

    // var errTemp = this.state.errors;
    // errTemp.confirm_password = !input.password ? "Xin H?y Xác Nh?n L?i M?t Kh?u." : null;
    // this.setState({ errors: errTemp }); 

    if (input.username) {
      const re = /^S*$/;
      if (input.username.length < 6 || !re.test(input.username)) {
        isValid = false;
        this.setState((prevState) => {
          let errors = Object.assign({}, prevState.errors);
          errors.username = 'Xin Nh?p Tên ng??i Dùng Nh? H?n 6 Ky T?.';
          return { errors };
        });
      }
    }

    if (input.email) {
      let pattern = /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/;
      if (!pattern.test(input.email)) {
        isValid = false;
        this.setState((prevState) => {
          let errors = Object.assign({}, prevState.errors);
          errors.email = 'Xin Nh?p ??a Ch? Email Chính Xác.';
          return { errors };
        });
      }
    }

    if (input.password) {
      if (input.password.length < 6) {
        isValid = false;

        this.setState((prevState) => {
          let errors = Object.assign({}, prevState.errors);
          errors.password = 'Xin Nh?p M?t Kh?u Nh?t 6 Ky T?.';
          return { errors };
        });
      }
    }

    if (input.password && input.confirm_password) {
      if (input.password != input.confirm_password) {
        isValid = false;
        this.setState((prevState) => {
          let errors = Object.assign({}, prevState.errors);
          errors.confirm_password = 'M?t Kh?u Kh?ng Trùng Kh?p.';
          return { errors };
        });
      }
    }

    return isValid;
  }

  render() {
    return (
      <View style={{flex:1, justifyContent:'center', alignItems:'center',backgroundColor: '#00ffff',}}>
        <View style={{padding:5}}>
        <TextInput
          value={this.state.input.username}
          onChangeText={(text) => {
            this.setState((prevState) => {
              let input = Object.assign({}, prevState.input);
              input.username = text;
              return { input };
            });
          }}

          placeholder={'Tên ??ng Nh?p'}
          placeholderTextColor={'black'}
          blurOnSubmit={false}
          returnKeyType="next"
          onSubmitEditing={() => {
            this.secondTextInput.focus();
          }}
          id="username"
          name="username"
        />{this.state.errors.username? <Text>{this.state.errors.username}</Text>:null}
        <TextInput
          value={this.state.input.email}

          onChangeText={(text) => {
             this.setState((prevState) => {
              let input = Object.assign({}, prevState.input);
              input.email = text;
              return { input };
            });
          }}
          placeholder={'Email'}
          placeholderTextColor={'black'}
          onSubmitEditing={() => {
            this.thirdTextInput.focus();
          }}
          ref={(input) => {
            this.secondTextInput = input;
          }}
          returnKeyType="next"
          blurOnSubmit={false}
          id="email"
        />{this.state.errors.email? <Text>{this.state.errors.email}</Text>:null}
        <TextInput
          value={this.state.input.password}

          onChangeText={(text) => {
             this.setState((prevState) => {
              let input = Object.assign({}, prevState.input);
              input.password = text;
              return { input };
            });
          }}
          placeholder={'M?t Kh?u'}
          placeholderTextColor={'black'}
          secureTextEntry={true}
          onSubmitEditing={() => {
            this.fourTextInput.focus();
          }}
          ref={(input) => {
            this.thirdTextInput = input;
          }}
          returnKeyType="next"
          blurOnSubmit={false}
          id="password"
        />{this.state.errors.password? <Text>{this.state.errors.password}</Text>:null}
        <TextInput
          value={this.state.input.confirm_password}

          onChangeText={(text) => {
            this.setState((prevState) => {
              let input = Object.assign({}, prevState.input);
              input.confirm_password = text;
              return { input };
            });
          }}
          placeholder={'Xác Nh?n M?t Kh?u'}
          placeholderTextColor={'black'}
          secureTextEntry={true}
          ref={(input) => {
            this.fourTextInput = input;
          }}
          onSubmitEditing={(e)=>{this.handleSubmit(e);}}
          returnKeyType="go"
          id="confirm_password"
        />{this.state.errors.confirm_password? <Text>{this.state.errors.confirm_password}</Text>:null}
        <TouchableOpacity
          onPress={(e)=>{this.handleSubmit(e);}}
          style={{
            borderRadius: vScale(50),
            backgroundColor: '#0260AF',
            marginTop: vScale(50),
            alignItems: 'center',
            justifyContent: 'center',
            marginLeft: vScale(20),
            marginRight: vScale(20),
          }}>
          <Text
            style={{
              marginLeft: vScale(20),
              marginRight: vScale(20),
              height: vScale(46),
              fontSize: 20,
              color: '#000000',
              marginTop: vScale(10),
              fontFamily: 'GoogleSans',
            }}>
            ??ng Ky
          </Text>
        </TouchableOpacity>
        </View>
      </View>
    );
  }
}

question from:https://stackoverflow.com/questions/65838647/how-i-navigate-to-listdata-after-done-submit

Answer 1

Waitting for answers