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

[danginirav]

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!

(I have added same question in StackOverflow)

---

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.

[dsibiski]

This isn't currently possible. See the following RN issue: #29 and this ticket on Product Pains: https://productpains.com/post/react-native/add-borderwidth-left-right-top-bottom-to-textinput-/

[dsibiski]

@facebook-github-bot answered

[facebook-github-bot]

Closing this issue as @dsibiski says the question asked has been answered. Please help us by asking questions on StackOverflow. StackOverflow is amazing for Q&A: it has a reputation system, voting, the ability to mark a question as answered. Because of the reputation system it is likely the community will see and answer your question there. This also helps us use the GitHub bug tracker for bugs only.

[hellsingblack]

@facebook-github-bot answered