react-native style opacity for parent and child

Question

react-native : I have one View and the child of View is an Image , I applied opacity: 0.5 for View and opacity: 0.9 for an Image but it doesn\'t apply for Image ,the parent opac

Answer 1

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)'}} />

Answer 2

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)'}}/>

Answer 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

Answer 4

You can't change parent opacity without affecting child, so you should have absolute positioned background. For proper child positioning, you should add an additional container. Check out this snack: snack.expo.io/SkaHLjzr8

...
<View style={styles.container}>
  <View style={styles.card} >
    <View style={styles.background} />
     <View style={styles.imageContainer}>
      <Image style={styles.image} source="..." />
    </View>
  </View>
</View>
...

...
container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  background: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'blue',
    opacity: .5,
    zIndex: 1,
  },
  card: {
    height: 400,
  },
  imageContainer: {
    ...StyleSheet.absoluteFillObject,
    justifyContent: 'center',
    alignItems: 'center',
    zIndex: 2,
    opacity: 0.8,
  },
  image: {
    width: 200,
    height: 200
  }
...

Answer 5

You need to use needsOffscreenAlphaCompositing like this-

<View needsOffscreenAlphaCompositing>
...
<View/>

Answer 6

If you want to display some text with transparent alpha opacity then I have the best way, just try.

TransparentBG:{
    backgroundColor:  '#00000070',
    color:'#FFFFFF'
  }

here, "70" indicates opacity %. -Thanks