'borderBottomStyle : dashed' is not working in the react native. Can anyone suggest better way to do that?

0
votes

BorderBottomStyle is not working in the React native and as well as styled-components. BorderStyle is working fine. But BorderBottomStyle-dashed is not working and getting Component Exception.

<LocationText>BORDERBOTTOMSTYLE</LocationText>


LocationText = styled.Text`
margin-left:2%;
font-family:metropolisRegular;
font-size:20px;
padding-left:2px;
border-bottom-color:rgba(0,0,0,0.3);
border-bottom-width:2px;
border-bottom-style:dashed;
`;

https://i.stack.imgur.com/GzzUU.png

Any Better idea to style only the border Bottom with dashed in React native??

1
react-nativestyled-components

1 Answers

0
votes

In react-native, you can't style many components directly as this is not necessary. Often times the better approach is to put the component inside a container and then style the container.

If you're a beginner, then how you attach the styles to the "View" is something you can google and not important, but this is an example of just showing the one style attached inline.

<View style={{ border-bottom-style: "dashed"}}>
   <LocationText>BORDERBOTTOMSTYLE</LocationText>
</View>