SafeAreaView can't be transparent

[Flictuum]

Hello,

I began to switch from react-navigation SafeAreaView to your lib, and I'm experiencing a weird behavior. With the older SafeAreaView we could obtain a 'transparent' view to pad the notch but your library seems to force a colored view, even if provide backgroundColor: 'transparent' to the SafeAreaView component, the background is still white. And this view hide the content when we scroll for example.

With the react-navigation SafeAreaView:

With your SafeAreaView component:

I use this implementation

<SafeAreaView
  edges={['top']}
>
  {this.renderBody()}
  {this.renderTabBar()}
</SafeAreaView>

I searched a lot and I didn't found any reason and I'm asking myself if I'm not doing something wrong because any one reported this bug. Could you please help me to use your library for my case ?

I tested it on Iphone X & 12

[clementizard]

Hello!

I found a bypass, since I ran into it too.

In fact you don't need SafeAreaView, you can create an element with the size of the screen with insets and add some padding to reposition the page - with useSafeAreaFrame and useSafeAreaInsets.

By doing so you will need to add some styles to your top and bottom element in the page, matching the top and bottom insets. In this example I don't need to use left and right, but it's the same process with width.

useNotchFix.js

import React from 'react';
import { View } from 'react-native';
import { useSafeAreaFrame, useSafeAreaInsets } from 'react-native-safe-area-context';

export default () => {
  const { height, width } = useSafeAreaFrame();
  const { top, bottom } = useSafeAreaInsets();

  const styles = {
    top: {
      paddingTop: top,
    },
    bottom: {
      marginBottom: bottom,
    },
  };
  return [
    props => {
      return (
        <View {...props} style={{ height, width }}>
          {props.children}
        </View>
      );
    },
    styles,
  ];
};

We give our view the total height and width, and pass along the needed styles to reposition the page.

If anyone find something better please let me know, thanks!

[aleena-adnan1]

here is the answere for this working for me https://stackoverflow.com/a/75246131/11834626

[jacobp100]

It's probably in the native component. If someone wants to look into it, I think you just need self.isOpaque = NO in the init

[antoine-cottineau]

I would be happy to have a go at it but I couldn't reproduce the issue. Does someone have a minimal reproducible example showing the problem?