styled-components/css-to-react-native

How do I add bottom border?

resting opened this issue · 5 comments

resting commented

Have the following component, but the border bottom doesn't appear

const StyledForgotPasswordText = styled.Text`
  font-size: 14px;
  text-align: right;
  border-bottom-color: black;
  border-bottom-width: 2px;
`;

The generated CSS here looks fine:

{
  "fontSize": 14,
  "textAlign": "right",
  "borderBottomColor": "black",
  "borderBottomWidth": 2
}
jacobp100 commented

You can’t borders on text elements in react native

  • 👍2
resting commented

I'm on react-native 0.62. Looks like it's possible.
Have tried adding the style to the title on the docs
image

  • 👍2
  • 🚀1
jacobp100 commented

The output you pasted looks fine, so we’re doing the right thing in this library

You can try putting that style directly into RN, because I think you can’t put borders on text and that the docs might be wrong

resting commented

You're right. Sorry, the preview was on web.
Just realize my mistake when it shows on Android while testing it.
I suppose best practice now is to just use View instead. Thanks!

  • 😕1
jacobp100 commented

Glad I could help - if only a little! 😄