React Native Emptying Props - react-native

Question

I have a screen that includes Signin and Signup buttons. When a user taps the SigninButton, I send him to login screen. In the login screen, there are two text inputs which receive email and password from user. If it is successful, user sent to main screen. If not, I throw an error text. But if user go back from navigation bar and come back to the login screen, email input and error message is still showing there. I am using redux, I can not empty the props that hold email and error text. I tried componentWillUnmount, componentWillMount etc. but still can't find the right place to empty these props. This is the code in my login screen;
class LoginScreen extends Component {
componentWillReceiveProps(nextProps) {
this.onAuthComplete(nextProps);
}
onAuthComplete(props) {
if (props.user) {
this.props.navigation.navigate('main');
}
}
render() {
return(
<View style={styles.container}>
<SigninForm />
</View>
);
}
}
const styles = StyleSheet.create({
........
}
});
const mapStateToProps = ({ auth }) => {
const { user, email, error } = auth;
return { user, email, error };
}
export default connect(mapStateToProps, { emailChanged, loginUser })(LoginScreen);
and also this is the code in the reducer;
import ......
const INITIAL_STATE = {
email: '',
password: '',
user: null,
error: '',
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case EMAIL_CHANGED:
return {...state, email: action.payload };
case PASSWORD_CHANGED:
return {...state, password: action.payload };
case LOGIN_USER:
return {...state, error: ''};
case LOGIN_USER_SUCCESS:
return {...state, ...INITIAL_STATE, user: action.payload};
case LOGIN_USER_FAIL:
return {...state, error: 'Authentication Failed', password: ''};
default:
return state;
}
};
And here is the SigninForm code;
import React, { Component } from 'react';
import { View, Dimensions, Text } from 'react-native';
import { connect } from 'react-redux';
import { FormInput, FormLabel } from 'react-native-elements';
import { AuthButton } from './';
import { emailChanged, passwordChanged, loginUser } from '../actions';
const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
class SigninForm extends Component {
onEmailChange(text) {
this.props.emailChanged(text);
}
onPasswordChange(text) {
this.props.passwordChanged(text);
}
onButtonPress() {
const { email, password } = this.props;
this.props.loginUser({ email, password });
}
render() {
return(
<View style={styles.viewStyle}>
<FormLabel labelStyle={styles.labelStyle}>Email</FormLabel>
<FormInput
placeholder='Enter your email'
keyboardType="email-address"
containerStyle={styles.containerStyle}
inputStyle={styles.inputStyle}
onChangeText={this.onEmailChange.bind(this)}
value={this.props.email}
/>
<FormLabel labelStyle={styles.labelStyle}>Password</FormLabel>
<FormInput
placeholder='Enter a password'
secureTextEntry={true}
containerStyle={styles.containerStyle}
inputStyle={styles.inputStyle}
onChangeText={this.onPasswordChange.bind(this)}
value={this.props.password}
/>
<Text style={styles.errorTextStyle}>
{this.props.error}
</Text>
<AuthButton
title='Sign In'
backgroundColor='#eb4454'
onPress={this.onButtonPress.bind(this)}
/>
</View>
);
}
}
const styles = {
viewStyle: {
top: SCREEN_HEIGHT * -0.15
},
containerStyle: {
marginBottom: 10,
width: SCREEN_WIDTH * 0.80,
borderBottomColor: '#3c143c'
},
labelStyle: {
color: '#3c143c',
fontFamily: 'System',
fontSize: 20
},
inputStyle: {
color: '#3c143c',
fontFamily: 'System',
fontSize: 20
},
errorTextStyle: {
fontSize: 20,
alignSelf: 'center',
color: 'red'
}
}
const mapStateToProps = ({ auth }) => {
const { email, password, error } = auth;
return { email, password, error };
}
export default connect(mapStateToProps, { emailChanged, passwordChanged, loginUser })(SigninForm);

Answer 1

I did it in componentWillMount method. I called an action to trigger a reducer to update states of the relevant props. Here is code snippet in my component;
import React, { Component } from 'react';
import { View, Dimensions, Text } from 'react-native';
import { connect } from 'react-redux';
import { FormInput, FormLabel } from 'react-native-elements';
import { AuthButton } from './';
import { emailChanged, passwordChanged, loginUser, emptyInput } from '../actions';
const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;
class SigninForm extends Component {
componentWillMount() {
//used for empty email and error text when user go back and forth
const { email, error } = this.props;
this.props.emptyInput(email, error);
}
onEmailChange(text) {
this.props.emailChanged(text);
}
onPasswordChange(text) {
this.props.passwordChanged(text);
}
onButtonPress() {
const { email, password } = this.props;
this.props.loginUser({ email, password });
}
render() {
console.log("render ediyorum");
return(
<View style={styles.viewStyle}>
<FormLabel labelStyle={styles.labelStyle}>Email</FormLabel>
<FormInput
placeholder='Enter your email'
keyboardType="email-address"
containerStyle={styles.containerStyle}
inputStyle={styles.inputStyle}
onChangeText={this.onEmailChange.bind(this)}
value={this.props.email}
/>
<FormLabel labelStyle={styles.labelStyle}>Password</FormLabel>
<FormInput
placeholder='Enter a password'
secureTextEntry={true}
containerStyle={styles.containerStyle}
inputStyle={styles.inputStyle}
onChangeText={this.onPasswordChange.bind(this)}
value={this.props.password}
/>
<Text style={styles.errorTextStyle}>
{this.props.error}
</Text>
<AuthButton
title='Sign In'
backgroundColor='#eb4454'
onPress={this.onButtonPress.bind(this)}
/>
</View>
);
}
}
const styles = {
viewStyle: {
top: SCREEN_HEIGHT * -0.15
},
containerStyle: {
marginBottom: 10,
width: SCREEN_WIDTH * 0.80,
borderBottomColor: '#3c143c'
},
labelStyle: {
color: '#3c143c',
fontFamily: 'System',
fontSize: 20
},
inputStyle: {
color: '#3c143c',
fontFamily: 'System',
fontSize: 20
},
errorTextStyle: {
fontSize: 20,
alignSelf: 'center',
color: 'red'
}
}
const mapStateToProps = ({ auth }) => {
const { email, password, error } = auth;
return { email, password, error };
}
export default connect(mapStateToProps, { emailChanged, passwordChanged, loginUser, emptyInput })(SigninForm);
This is emptyInput action creator code;
export const emptyInput = (email, error) => {
return(dispatch) => {
dispatch({ type: EMPTY_INPUT });
}
};
And finally the reducer code doing the real job;
import {
EMAIL_CHANGED,
PASSWORD_CHANGED,
CREATE_USER,
CREATE_USER_SUCCESS,
CREATE_USER_FAIL,
LOGIN_USER,
LOGIN_USER_FAIL,
LOGIN_USER_SUCCESS,
EMPTY_INPUT
} from '../actions/types';
const INITIAL_STATE = {
email: '',
password: '',
user: null,
error: '',
};
export default (state = INITIAL_STATE, action) => {
switch (action.type) {
case EMAIL_CHANGED:
return {...state, email: action.payload };
case PASSWORD_CHANGED:
return {...state, password: action.payload };
case CREATE_USER:
return {...state, error: '' };
case CREATE_USER_SUCCESS:
return {...state, ...INITIAL_STATE, user: action.payload};
case CREATE_USER_FAIL:
return {...state, error: 'Authentication Failed!', password: ''};
case LOGIN_USER:
return {...state, error: ''};
case LOGIN_USER_SUCCESS:
return {...state, ...INITIAL_STATE, user: action.payload};
case LOGIN_USER_FAIL:
return {...state, error: 'Authentication Failed', password: ''};
case EMPTY_INPUT:
return {...state, ...INITIAL_STATE};
default:
return state;
}
};