react-native style opacity for parent and child

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 opacity is applying for child , the child doesn't take independent opacity

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

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

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

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

You need to use needsOffscreenAlphaCompositing like this-

<View needsOffscreenAlphaCompositing>
...
<View/>

If you want to change the opacity of a view that doesn't recognize the opacity prop (such as a TouchableOpacity), wrap it in a View first and change the opacity prop of that.

<View opacity={0.3}>
<TouchableOpacity>
</TouchableOpacity>
</View>

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
  }
...

HACK FOR BACKGROUNDS OPACITY

Use combination of 2 backgroundColor in order to imitate the opacity

After playing sometimes and be lost on the internet to find a simple solucion, I realized that at the current React-Native Version V 0.64 the opacity for the backgrounds, at least as it is commonly used for Web Dev just is not suited for React-Native.

APP

1. Use ImageBackground Component --> DOCS:

Set you background image on the ImageBackground

    import React from 'react';
    import { ImageBackground, View, Text, StyleSheet, ScrollView} from 'react-native';

    const App = () => {
        
    return (

    <ImageBackground style={ mainStyle.background } source={ { uri: "https://reactjs.org/logo-og.png" } } resizeMode="cover">       
        <ScrollView style={ mainStyle.overlay }> // Here its style will be used as opacity
            <View style={ mainStyle.containerCenter}>
                <View style={ mainStyle.homeTitleWraper}>
                    <Text style={ mainStyle.homeTitle }> Hello WOrld</Text>
                </View>              
            </View>
        </ScrollView>   
    </ImageBackground>
    );};
  export default App;

Style

2. Style, Here the First Child of the Background has to take the whole screen size, with style overlay it will lay down like a thin blanket on top of the Background, imitating the opacity.

    const mainStyle = StyleSheet.create({
    
    background: {
        width: "100%",
        height: "100%", 
    },
   
    overlay: {
        backgroundColor: 'rgba(255, 255, 255, .5)' // HERE USE THE LAST DIGIT AS IF IT WERE OPACITY
   
    },
   
    containerCenter : {
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
        paddingHorizontal: 30,
        marginVertical: 60,
        
    },
   
    homeTitleWraper: {
        paddingHorizontal: 40,
        paddingVertical: 100,  
   
    },
   
    homeTitle: {
        fontSize: 40,
        fontWeight: "900",
        textAlign: "center",
        textTransform: "uppercase",  
        color: "white",
        fontStyle: "italic",
    },
   
    containerSmall: {
        marginVertical: 10,
        width: "100%"
   
    }