TextInput underline color for ios in react-native

Question

i am doing mobile applications in react-native for android and ios. In my project i am using TextInput Component(ios). This component appear without underline. How to use TextInput with underline color in ios.

code sample -

<TextInput
 ref={'cardbatch1'}                 
 keyboardType = 'numeric'
 placeholder = 'Batch Number'
 autoCapitalize = 'none'                                                    
/>

Please provide minimal working example. – Ayberk Özgür Jul 13 '17 at 14:32 — Ayberk Özgür, Jul 13 '17 at 14:32

score 28 · Accepted Answer · answered Jul 13 '17 at 11:31

28

You could add borderBottomWidth and borderBottomColor to TextInput or simply draw a view with 1 or 2 px height below TextInput.

answered Jul 13 '17 at 11:31

Irfan Ayaz

797
8
16

Thanks..I will go with borderBottomWidth and borderBottomColor. – Sathish Sundharam Jul 14 '17 at 05:10
This is not working in android. How to make in android – rams Sep 27 '18 at 05:51
On Android use: `underlineColorAndroid="transparent"` – Nay Jan 18 '19 at 22:00

Rezaul Karim · Answer 2 · 2019-04-09T11:21:11.720

Try this in styles.. see the difference in output

const styles = StyleSheet.create({

    inputBox: {
        .....
        borderBottomWidth: 1,
        borderBottomColor: 'gray',
        ....
    }
});

Finally add the style in textInput

<TextInput
 ...             
 keyboardType = 'numeric'
 placeholder = 'Batch Number'
 autoCapitalize = 'none'
 style={styles.inputBox}
.....                                                    
/>

TextInput underline color for ios in react-native

2 Answers2