CODEWITHSUNDEEP
react-nativereact-native-ios
sai
sai

Reputation: 119

how to remove underline in react native material text field

I'm using react native text field component how can i remove bottom underline in textfield

this is my code i followed this link: https://github.com/n4kz/react-native-material-textfield

constructor(props) {
    super(props);
    this.state = {
        userName:'',
        password:''
    }
}

componentWillMount() {

}

componentDidMount(){

}

render() {
    //let { userName } = this.state;
    let { password } = this.state;

    return (

        <View style={{flex:1,justifyContent:'center'}}>

        <View style={{flex:0.2,justifyContent:'center',flexDirection:'row'}}>
        <View style={{flex:12}}></View>
        <View style={{flex:76,borderWidth:1,borderColor:'black',borderRadius:5,marginBottom:13.7}}>
            <TextField style={{ color: 'black',borderColor:'transparent'}}
                label='Phone number'
                textColor={'black'}
                value={this.state.userName}
                labelHeight={40}
                labelPadding={8}
                padding={10}
                Bottom padding= {10}
                Top padding={4}
                //width={50}
                //borderColor={'black'}
                //  textFocusColor={'orange'}
                //underlineColorAndroid='transparent'
                 baseColor={"black"}
                labelHeight={32}
                blurOnSubmit={true}
                //characterRestriction={10}
                onChangeText={(data) => this.setState({ userName: data })}
            />
        </View>
    )
}

Upvotes: 1

Views: 3284

Answers (5)

Sajmal
Sajmal

Reputation: 1

underlineColor="transparent"

Upvotes: 0

farhan meo
farhan meo

Reputation: 47

Try this: lineWidth={0} if you want to hide the default underline and if you want to hide the line after which appears after click try this: activeLineWidth={0}.

Upvotes: 1

Kaushik
Kaushik

Reputation: 1

Fine, after using this library I end up with this solution:

You can use one of the props of react-native-material-textfield activeLineWidth with 0 as an argument.

Upvotes: 0

Wanda Ichsanul Isra
Wanda Ichsanul Isra

Reputation: 2282

Other TextInput properties will also work

Ref: https://github.com/n4kz/react-native-material-textfield

React native material text field component (<TextField />) can also use all of the properties from text input component (<TextInput />). So, you can remove the underline border using underlineColorAndroid props. Set this prop to be transparent.

<TextField underlineColorAndroid="transparent" />

Upvotes: 4

soutot
soutot

Reputation: 3671

You can try underlineColorAndroid='rgba(0,0,0,0)'

Hope it helps

Upvotes: 4

Related Questions