react-native style opacity for parent and child - react-native

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

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

Answer 2

React-Native 0.60+
There is a new opacity prop that you can pass in:
<View style={{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 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

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

Answer 5

You need to use needsOffscreenAlphaCompositing like this-
<View needsOffscreenAlphaCompositing>
...
<View/>

Answer 6

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>

Answer 7

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 8

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
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
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%"
}