react native form Email and Password validation in react functional component

Question

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>
)

}

Dhruv Patel · Accepted Answer · 2021-05-24 05:35:31Z

3

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_.+-]+@[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.

edited May 24, 2021 at 5:35

answered May 20, 2021 at 4:51

Dhruv Patel

1,5391 gold badge18 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Sanduni Fernando Over a year ago

Thank you Dhruv ! Could you please explain and give how can I include email validator here? Because I coouldn't able to realize that one

Sanduni Fernando Over a year ago

Thank you so much, Dhruv! You made my task easier!

Collectives™ on Stack Overflow

react native form Email and Password validation in react functional component

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related