Border opacity - React Native

Question

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.

Answer 1

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

Answer 2

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