CODEWITHSUNDEEP
iosreact-native
Darshan
Darshan

Reputation: 2379

React native adding border to the one side of the view

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.

Upvotes: 18

Views: 44549

Answers (2)

Patrick R
Patrick R

Reputation: 6857

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>

Upvotes: 37

Sagar Chauhan
Sagar Chauhan

Reputation: 5823

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.

Upvotes: 1

Related Questions