react-native style opacity for parent and child

小开

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

小开

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

小开

你不能在不影响子对象的情况下改变父对象的不透明度，所以你应该有绝对定位的背景。为了正确定位子节点，您应该添加一个额外的容器。看看这个零食：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

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


}

小开

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>