react-native style opacity for parent and child

Solution 1:

Try changing the opacity using alpha-value of the background color instead. Then it should be possible applying different opacities for children.

For example:

<View style={{backgroundColor: 'rgba(0,0,0,0.5)'}}/>

Solution 2:

React-Native 0.60+

There is a new opacity prop that you can pass in:

<View opacity={0.5} />

React-Native 0.59.x and lower

Like this (with 50% at the end of color hash):

<View style={{backgroundColor: '#FFFFFF50'}} /> 

Or RGBa way:

<View style={{backgroundColor: 'rgba(0,0,0,0.5)'}} />

Solution 3:

In react-native 0.6, you can use the opacity prop on a View. Example:

<View opacity={1.0} />

<View opacity={0.5} />

1.0 = opaque (alpha == 1.0)

0.0 = clear (alpha == 0.0)

See https://facebook.github.io/react-native/docs/0.6/view-style-props#opacity

Snack: https://snack.expo.io/S1KjXqe6N