Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.
like image 535
Nirav Dangi Avatar asked Apr 06 '16 07:04

Nirav Dangi


People also ask

How do I add a border to the React component?

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!

How do I add a border to the bottom in React Native?

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 .


2 Answers

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,     } }); 
like image 149
Chaim Paneth Avatar answered Oct 07 '22 13:10

Chaim Paneth


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

like image 31
Dave Sibiski Avatar answered Oct 07 '22 11:10

Dave Sibiski