34

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.

  1. We can try wrapping <View/> to the <Text/> and apply borderBottomWidth style to the <View/>. (borderBottomWidth works fine with <View/>)
  2. Adding such <View/> just below to the <Text/> component which can look like a line.
Nirav Dangi
  • 3,607
  • 4
  • 49
  • 60

3 Answers3

52

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,
    }
});
Chaim Paneth
  • 1,249
  • 1
  • 11
  • 10
15

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-/

Dave Sibiski
  • 1,710
  • 1
  • 15
  • 17
-2

We can now use :

const styles = StyleSheet.create({
    textZone: {        
        borderTopRightRadius: 10,
        borderTopLeftRadius: 10,
        borderBottomRightRadius: 10,
        borderBottomLeftRadius: 10
    },
})
Clément Raclet
  • 1