Adding border only to the one side of the <Text/> component in React Native (iOS) Adding border only to the one side of the <Text/> component in React Native (iOS) ios ios

Adding border only to the one side of the <Text/> component in React Native (iOS)


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


We can now use :

const styles = StyleSheet.create({    textZone: {                borderTopRightRadius: 10,        borderTopLeftRadius: 10,        borderBottomRightRadius: 10,        borderBottomLeftRadius: 10    },})