I am facing something weird issue with React-Native's <Text/>
component in iOS.
I wanted to apply borderBottomWidth
style into <Text/>
component but it did NOT work. However, the borderWidth
option worked.
Worked <Text style={{borderWidth:1}}> React Native </Text>
NOT Worked <Text style={{borderBottomWidth:1}}> React Native </Text>
Is there any way to only apply bottom level border into the <Text/>
component?
Thank you!
Note:
I am aware of following mentioned approaches in order to achieve this but in my case, I required to apply the style only to the <Text/>
component.
<View/>
to the <Text/>
and apply borderBottomWidth
style to the <View/>
. (borderBottomWidth
works fine with <View/>
)<View/>
just below to the <Text/>
component which can look like a line. Use the border css property to set the border style of an element in React, e.g. <div style={{border: '1px solid rgba(0,255,0,0.3)'}}> . If you only need to style a specific border, use the corresponding property, e.g. borderBottom . Copied!
To add border bottom in React Native, we can add border bottom on the View . to set borderBottom to '1px solid blue' on the View .
Even though borderBottom doesn't work on the Text component, it did work for me on the TextInput component, just set editable to false and set the value to your desired text as so...
<TextInput style={styles.textInput} editable={false} value={'My Text'}/> const styles = StyleSheet.create({ textInput: { borderBottomColor: 'black', borderBottomWidth: 1, } });
This isn't currently possible. See the following RN issue: https://github.com/facebook/react-native/issues/29 and this ticket on Product Pains: https://productpains.com/post/react-native/add-borderwidth-left-right-top-bottom-to-textinput-/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With