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

ScreenShot of android

回答1:

change your to this in your loginForm

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

回答2:

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

回答3:

TextInput has by default a border at the bottom of its view. This border has its padding set by the background image provided by the system, and it cannot be changed. Solutions to avoid this is to either not set height explicitly, case in which the system will take care of displaying the border in the correct position, or to not display the border by setting underlineColorAndroid to transparent.

underlineColorAndroid="transparent" and padding:0

来源：https://stackoverflow.com/questions/48638667/underlinecolorandroid-not-working-in-android

标签

android

react-native

textinput