react native form Email and Password validation in react functional component

Asked By: Anonymous

I have created a simple form. I need to know how to validate email and password with minimum of 8 characters. many tutorials are designed for the class components. But I couldn’t able to handle them with the functional components. please help me

const SigninPage = ({navigation}) => {
      const [email, setEmail] = useState('');
      const [password, setPassword] = useState('');
      const {colors} = useTheme();
    

return(
 <View style={styles.inputView}>
          <TextInput
            style={styles.TextInput}
            placeholder="E-mail"
            placeholderTextColor="white"
            onChangeText={(email) => setEmail(email)}
          />
        </View>

        <View style={styles.inputView}>
          <TextInput
            style={styles.TextInput}
            placeholder="Password"
            placeholderTextColor="white"
            secureTextEntry={true}
            onChangeText={(password) => setPassword(password)}
          />
        </View>

        <TouchableOpacity
          onPress={() => signIn() }>
          <LinearGradient colors={['#730018', '#00085b']} style={styles.signIn}>
            <Text style={styles.textSign}>SIGN IN</Text>
          </LinearGradient>
        </TouchableOpacity>
        <Text>Fogot Your Password?</Text>
      </Animatable.View>
    </View>
)

}

Solution

Answered By: Anonymous

You are almost done dear!

See, I have slightly modified your code.

const SigninPage = ({ navigation }) => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
const { colors } = useTheme();

const signIn = () => {                          // <= Added this function
    const strongRegex = new RegExp("^[a-zA-Z0-9_.+-][email protected][a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$");

    if (!strongRegex.test(email)) {
        showMessage(MESSAGE.email)
        return false;
    } else if (password.length < 8) {
        showMessage(MESSAGE.password);
        return false;
    }
}

return (
    <View>                                      
        <Animatable.View >
            <View style={styles.inputView}>
                <TextInput
                    style={styles.TextInput}
                    placeholder="E-mail"
                    placeholderTextColor="white"
                    onChangeText={(email) => setEmail(email)}
                />
            </View>
            <View style={styles.inputView}>
                <TextInput
                    style={styles.TextInput}
                    placeholder="Password"
                    placeholderTextColor="white"
                    secureTextEntry={true}
                    onChangeText={(password) => setPassword(password)}
                />
            </View>

            <TouchableOpacity
                onPress={() => signIn()}>
                <LinearGradient colors={['#730018', '#00085b']} style={styles.signIn}>
                    <Text style={styles.textSign}>SIGN IN</Text>
                </LinearGradient>
            </TouchableOpacity>
            <Text>Fogot Your Password?</Text>
        </Animatable.View >
    </View>
)

}

I hope you need the same thing.

techinplanet staff

techinplanet staff


Windows 10 Kaufen Windows 10 Pro Office 2019 Kaufen Office 365 Lizenz Windows 10 Home Lizenz Office 2019 Home Business Kaufen windows office 365 satın al follower kaufen instagram follower kaufen porno