Search code examples
androidreact-nativetextinput

underlineColorAndroid not working in android


react-native-cli: 2.0.1
react-native: 0.52.2

In my ios device form looks good but in android device its showing bottom border on TextInput,

 class Input extends Component {

        render(){
            return(
                <View style={styles.container}>
                    <Text style={styles.lableStyle}>{this.props.label}</Text>
                    <TextInput
                         secureTextEntry={this.props.secureTextEntry}
                         placeholder={this.props.placeHolder}
                         autoCorrect={false}
                         value={this.props.value}
                         onChangeText={this.props.onChangeText}
                         underlineColorAndroid={this.props.borderColor} // not working
                         style={styles.textInputStyle} />
                </View>
            );

        }
    }

passing props from LoginForm:

render(){
        return(
            <Card>
                <CardSection>
                    <Input 
                        borderColor="transparent" //props for border
                        label="Email"
                        placeHolder="abc@example.com"
                        onChangeText={this.onEmailChanged.bind(this)}
                        value={this.props.email}
                    />
                </CardSection>

                <CardSection>
                    <Input 
                        borderColor="transparent" // props for border
                        secureTextEntry
                        label="Password"
                        placeHolder="password"
                        onChangeText={this.onPasswordChanged.bind(this)}
                        value={this.props.password}
                    />
                </CardSection>

                {this.errorRender()}

                <CardSection>
                    {this.spinerRender()}
                </CardSection>
            </Card>
        );
    }

ScreenShot of mac

enter image description here

ScreenShot of android

enter image description here


Solution

  • Finally solved it. underlineColorAndroid attribute not work for me. so i add style in android res.

    open this path: android/app/src/main/res/values/styles.xml

    And add this lines in style:

    <item name="colorAccent">#FFFFFF</item>
    <item name="colorControlNormal">#FFFFFF</item>
    

    it will work for android