React native adding border to the one side of the view

Question

I have requirements in my react native project to show border in view so i apply

<view style={{borderwidth=1,bordercolor:’red’}}/>

So it’showing border to full view but my requirements is to show border only top side So how to apply border to specific side of the view with different color.

Answer 1

Please add to your style borderBottomWidth to add a border to the bottom of the view and borderTopWidth to add border top side of the view, see below code snippet:

<View style={{borderColor:'red',borderBottomWidth:1,borderTopWidth:1}}>
            <Text>
                 One Side border 
             </Text>
<View> 

Answer 2

In react native there are view's style property to set individual side width. You can use borderTopWidth for Top Border. borderBottomWidth for bottom border, borderLeftWidth for left border and borderRightWidth for right border. If you use single property borderWidth then it will apply to all four side of view.