React-native: SafeAreaView with transparent background color not work

[seomaz]

When a set a backgroundcolor with transparent, not working

<SafeAreaView style={{flex: 1, backgroundColor: 'rgb(0, 0, 0)'}}>
  <View style={{flex: 1}}>
    <Text>Hello World!</Text>
  </View>
</SafeAreaView>

[react-native-bot]

Thanks for submitting your issue. Can you take another look at your description and make sure the issue template has been filled in its entirety?

👉 Click here if you want to take another look at the Bug Report issue template.

[cabelitos]

Not sure what you meant, but rgb(0,0,0) is black and not transparent.

[seomaz]

@cabelitos sorry with this: rgba(0,0,0,0). my app.js code:

<Fragment> <SafeAreaView style={styles.safeArea}/> <SafeAreaView style={{ flex: 1, backgroundColor: 'rgba(0,0,0,0)',}}> <View style={styles.container}> {Platform.OS === 'ios' && <StatusBar barStyle="light-content" />} <AppNavigator /> <OfflineNotice/> <Ultimahora navigation={this.props.navigation}/> </View> </SafeAreaView> </Fragment>

the result:

look at the bottom the white bar, i need this transparent.

[cabelitos]

@seomaz you have a safeareaview inside another safeareaview probably you're setting the bg color to black only in one, which might be the problem. I'm not sure why you need 2 safeareaviews, but it sounds unneeded to me. I tried to set the safeareaview bg color and it worked like a charm. Maybe if you could create a snack what clearly show the problem, it will be much easier to know what's happening and identify the problem.

https://snack.expo.io/@cabelitos/safe-area-view (safe-area-view with a bg color)

[seomaz]

i have 2 safeareaview, because i use 2 colors, top in blue and bottom in transparent, if i change the second safeareaview to a solid color works, but if i put the rgba(0,0,0,0) (transparent) dont work.

[gguidotti]

I'm having the same issue. I tried both 'rgba(0, 0, 0, 0)' and 'transparent' but none of them is working.

[donni106]

same for me. not being able to set the bottom part of the SafeAreaView to transparent.

[Brouilles]

Same here.

[kgirma]

No answer I guess. 😄

[kot-ezhva]

Any solutions?

[hramos]

Please make sure to fill in the issue template if you decide to file a new issue.

[VirtualDOMinic]

One thing to try is to give the SafeAreaView that you want to be transparent a position: "absolute", too, so that it doesn't push down the child/other SafeAreaView

[NioxyBrown]

Just in case for those who are still looking for it.
I solved it by setting the property flex of the SafeAreaView component to 0.
For me it did the work :)