react-native style opacity for parent and child

user_5950431 0
Viewed 122178

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

react-native
8 Answers
user_14458640

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

user_80929000

You need to use needsOffscreenAlphaCompositing like this-

<View needsOffscreenAlphaCompositing>
...
<View/>
user_77289830

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>
user_31516750

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

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

  1. 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%"

 }
user_139039420
Related