CODEWITHSUNDEEP
javascriptreact-native
skywalker
skywalker

Reputation: 59

Is there a way in react-native to dynamically change style of a text box using input?

I have a react-native screen that reads in 2 inputs, email address and password and a clickable button. The screen also has 3 rules for password at least 6 characters long and at least one A-Z character and at least one special character.

The email address is validated by a function whether it is valid or not. That works as it is supposed to. So I haven't added that part of code below.

The 3 password rules needs to be red at the beginning and when the user enters more than 6 characters it should make the 6 char rule green and then when at least one caps letter is there, that rule should be green and when special char is there that rule should be green. If they are removed, they should come back to red. The important thing is it shouldn't wait for the button to be pressed to change colors and if the button is pressed too soon it should validate and change colors accordingly.

return(
<View>
<TextField 
   returnKeyType="next" 
   autoCapitalize="none" 
   onChangeText={onChangeEmailText}
   label={'Enter your Email Address'} />
<TextField
   onChangeText={onChangePasswordText}
   returnKeyType="go"
   autoCapitalize="none"
   label={'Enter Password'} />
                    
<Text style={styles.PasswordGuide1}>Your Password must contain 6 chars min:</Text>
<Text style={styles.PasswordGuide2}>Your Password must have one caps letter</Text>
<Text style={styles.PasswordGuide3}>Your Password must have a special char</Text>

<Button onPress="RegisterDone" />
</View>
)

Upvotes: 1

Views: 520

Answers (1)

edison16029
edison16029

Reputation: 346

I would suggest using a state for storing the styles for the password guide text. This automatically causes a re-render which reflects the changes to the style as and when it happens.

Validate the password text inside the onChangePasswordText function

import { useState } from "react";

const YourComponent = () => {

    const [passwordGuide1Style, setPasswordGuide1Style] = useState(styles.PasswordGuide1Green);
    const [passwordGuide2Style, setPasswordGuide2Style] = useState(styles.PasswordGuide2Green);
    const [passwordGuide3Style, setPasswordGuide3Style] = useState(styles.PasswordGuide3Green);
    
    let validatePasswordGuide1 = (password) => {
      return password.length >= 6;
    }
    let onChangePasswordText = (yourPassword) => {
        let passwordGuide1Success = validatePasswordGuide1(yourPassword);
        if(!passwordGuide1Success){ //There are less than 6 characters
            setPasswordGuide1Style(styles.PasswordGuide1Red)
        }
        //Do the same for PasswordGuide 2 and 3
    }
    return(
        <View>
        <TextField 
        returnKeyType="next" 
        autoCapitalize="none" 
        onChangeText={onChangeEmailText}
        label={'Enter your Email Address'} />
        <TextField
        onChangeText={onChangePasswordText}
        returnKeyType="go"
        autoCapitalize="none"
        label={'Enter Password'} />
                            
        <Text style={passwordGuide1Style}>Your Password must contain 6 chars min:</Text>
        <Text style={passwordGuide2Style}>Your Password must have one caps letter</Text>
        <Text style={passwordGuide3Style}>Your Password must have a special char</Text>
    
        <Button onPress="RegisterDone" />
        </View>
    )
}

Upvotes: 1

Related Questions