CODEWITHSUNDEEP
javascriptnode.jsreact-native
melek hedhili
melek hedhili

Reputation: 67

Change text color if input text length condition

Hi so i have textinput (for password)

                <TextInput
                  
                    onBlur={() => this.onBlur()}
                    onFocus={() => this.onFocus()}
                    style={{
                        height: normalize(56),
                        width: normalize(327),
                        borderRadius: 30,
                        flexDirection: 'column',
                        backgroundColor: '#FFFFFF',
                        alignItems: 'center',
                        alignSelf: 'center',
                        textAlign: 'center',
                        justifyContent: 'center',
                        //resizeMode: 'contain',
                        marginTop: normalize(58),
                        paddingHorizontal: normalize(20),
                        borderWidth: 1,
                        borderColor: '#D0DBEA',



                    }}
                    value={this.state.password}
                    onChangeText={(text) => { this.setState({ password: text }) }}
                    secureTextEntry={true}
                    placeholder="Password" />

i want to check for example if the length of password > 6 then it should change the color of this text to any color :

                <View style={{ flexDirection: "row", backgroundColor: '#F5F5F8', marginTop: 16, marginLeft: normalize( 20) }}>

                    <Text style={{ color: "#9FA5C0", fontSize: normalize(15), fontFamily: 'arial', fontWeight: 'bold' }}>Password must have 6 characters !</Text>
                </View>

also if the password <6 then then the text should get its original color back

can some one give me a solution ?

Upvotes: 0

Views: 207

Answers (1)

Sivakumar A
Sivakumar A

Reputation: 701

You can try this

<View style={{ 
  flexDirection: "row", 
  backgroundColor: '#F5F5F8', 
  marginTop: 16, 
  marginLeft: normalize( 20) }}>

     <Text style={{ 
             color: this.state.password && this.state.password.length > 6 ? "red" : "#9FA5C0", 
             fontSize: normalize(15), 
             fontFamily: 'arial', 
             fontWeight: 'bold' }}>Password must have 6 characters !</Text>
</View>

Here,

this.state.password && this.state.password.length > 6 ? "Alert color" : "Normal color"

Upvotes: 1

Related Questions