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
ScreenShot of android
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