CODEWITHSUNDEEP
react-nativeborderopacity
NSR
NSR

Reputation: 343

Border opacity - React Native

I applied a border to a 'View' and I want to know how can I change the opacity of the border.

<View style={styles.mainContainer}> </View>

mainContainer: {
 borderWidth: 2,
 borderColor: '#ddd',
 ....
 opacity: 2,
 ....
}

It is not working when I applied the style as above.

Upvotes: 10

Views: 21929

Answers (3)

G.L
G.L

Reputation: 101

Alternatively, we can also use #33DDDDDD. Adding 33 before the 6-character hex color indicates opacity of 20% (0.2). Kindly note that if it's mobile, it should be pre added while web is post (https://www.w3.org/TR/css-color-4/#hex-notation).

Kudos to this: https://gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

To avoid any underlying conflicts though, use the accepted answer <the rgb() one>. Cheers!

Upvotes: 1

Gaurav Roy
Gaurav Roy

Reputation: 12215

Do try using borderColor: 'rgba(158, 150, 150, .5)' where the last parameter defines opacity and it ranges from 0 to 1

Upvotes: 29

Vikas chhabra
Vikas chhabra

Reputation: 325

You cannot change the border opacity in Android in react native elevation property is used. But in ios you can use

IOS ONLY

=> shadowColor

=> shadowOffset

=> shadowOpacity

=> shadowRadius

properties to change the shadow opacity.

for further documentation you can check https://facebook.github.io/react-native/docs/0.6/view-style-props

Upvotes: 2

Related Questions