Making Sign in form in react native - react-native

Question

I am trying to create a sign in form using custom text field. Inside a custom form and use that form details to validate user in login page.
Custom text field
export default class UserInput extends Component {
render() {
return (
<View style={styles.inputWrapper}>
<Image source={this.props.source} style={styles.inlineImg} />
<TextInput
style={styles.input}
placeholder={this.props.placeholder}
secureTextEntry={this.props.secureTextEntry}
/>
</View>
);
}
}
using custom text field to create a form.
export default class Form extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: ""
};
}
render() {
const { onChange, ...rest } = this.props;
return (
<KeyboardAvoidingView behavior="padding" style={styles.container}>
<UserInput
source={usernameImg}
placeholder="Username"
/>
<UserInput
source={passwordImg}
secureTextEntry={this.state.showPass}
placeholder="Password"
/>
</KeyboardAvoidingView>
);
}
}
using form and other components in the sign in screen.
class SignInScreen extends Component {
constructor(props) {
super(props);
this.state = {
email: "",
password: "",
isLoading: false
};
}
signIn = async () => {
console.log("signIn");
firebase
.auth()
.signInWithEmailAndPassword("entered email", "entered password")
.then(
() => {
console.log("then");
this.moveTohome();
},
error => {
console.log(error, "eroor in login");
}
);
console.log("App");
};
moveTohome = async () => {
console.log("move to home");
await AsyncStorage.setItem("userToken", this.state.email);
this.props.navigation.navigate("App");
};
render() {
const changeWidth = this.buttonAnimated.interpolate({
inputRange: [0, 1],
outputRange: [myWidth * 0.9, myHeight * 0.08]
});
return (
// <DismissKeyboard>
<Wallpaper>
<Form />
<SignupSection navigation={this.props.navigation} />
<ButtonSubmit
onPress={() => {
this.signIn();
}}
/>
</Wallpaper>
// </DismissKeyboard>
);
}
}
I want to access the email and password entered in the sign in screen.
I Did not wanted to use any custom forms available. I dont know the redux to maintain state also. So what would be the simple way I can do? in the app.
I searched a lot but nothing is working for me.

Answer 1

If you want to access the email/password in some other screen then you can send them in a param object in your react navigation method.
this.props.navigation.navigate("App",{
email:this.state.email,password:this.state.password
});
But this would only be sent to App route in this case and if you want to access at other page then you need to pass them again.
Another way will be to hook up your app with Redux as it works so good when combined with React for state management.