Underline placeholder in React Native - ios

Question

How can I underline placeholder in iOS in React Native? I can underline whole TextInput (not placeholder) by:
borderBottomWidth: 1,
borderBottomColor: '#B8B8B8',
I would like to underline only placeholder of TextInput, not TextInput

Answer 1

I have a little workaround for you. As soon as you start typing, the underline gets removed.
Demo
Explanation
I applied the borderBottomWidth and borderBottomColor to the parent view, because you probably don't want to use multiline. If you want to use a mulitine TextInput you could apply those styles directly to the Textinput, as mentioned in the docs.
Note that some props are only available with multiline={true/false}.
Additionally, border styles that apply to only one side of the element
(e.g., borderBottomColor, borderLeftWidth, etc.) will not be applied
if multiline=false. To achieve the same effect, you can wrap your
TextInput in a View
As soon as the user has typed (the text length is greater than 0) something, this.setState({ active: true }) gets fired. After that the conditional rendering takes place here:
borderBottomColor: this.state.active === false ? 'red' : 'transparent' // hide color, when text is present
width: this.state.active === false ? scaledWidth : 100 // increase width to 100. Value is just a placeholder, use whatever you like
Complete Code
// helper function to scale font size and placeholder width.
scale = (fontSize) => {
const screenWidth = Dimensions.get('window').width;
const ratio = fontSize / 375; // get ratio based on your standard scale, here: width of iphone 7
const newSize = Math.round(ratio * screenWidth);
return newSize;
}
render() {
// you probably have to play around with those standard values
const scaledFontSize = this.scale(22);
const scaledWidth = this.scale(25);
return (
<View style={{ marginTop: 50, flex: 1, alignItems: 'flex-end' }}>
<View style={{ borderBottomWidth: 2, borderBottomColor: this.state.active === false ? 'red' : 'transparent', width: this.state.active === false ? scaledWidth : 100 }}>
<TextInput
style={{ height: 30, textAlign: 'right', fontSize: scaledFontSize }}
onChangeText={(text) => text.length > 0 ? this.setState({ active: true }) : this.setState({ active: false })}
placeholder={'10'}
//multiline
/>
</View>
</View>
)
}