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. 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,
}
});