Adding border only to the one side of the component in React Native (iOS)

Question

I am facing something weird issue with React-Native\'s component in iOS.

I wanted to apply borderBottomWidth

Answer 1

<Text style={{
  borderBottomWidth: 1,
  borderBottomColor: 'red',
  borderBottomStyle: 'solid'
}}> 
  React Native 
</Text>

or

borderBottom: '1px solid rgba(219, 219, 219, 1)'

Answer 2

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

Answer 3

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