SafeAreaView does not take the whole screen after placing on the background

Question

I am using RN 0.59. Every time I placed the app on the background then reopen it immediately, the SafeAreaView does not take the whole screen.

But, if I placed the app on the background and reopen it after a while (for about 3 seconds) it is working fine.

Here's my snippet on SafeAreaView

...
const SafeAreaViewUI = ({children}) => {
  return (
      <SafeAreaView style={styles.container}>
        <View style={styles.content}>
          { children }
        </View>
      </SafeAreaView>
  );
};

...
export default SafeAreaViewUI;

for my styling

container: {
    flex: 1,
    backgroundColor: Platform.OS === 'android' ? blurple : null,
    paddingTop: Platform.OS === 'android' ? StatusBar.currentHeight : 0,
  },
  content: {
    flexGrow: 1,
    color: text,
    backgroundColor: white,
  }

Any insight for this one?

Answer 1

This worked on my end.

const SafeAreaViewUI = ({children}) => {
  const [ height, setHeight ] = useState(0)
  return (
      <SafeAreaView 
        onLayout={() => {
          if (Platform.OS === 'android') {
            setHeight(StatusBar.currentHeight || 0);
          }
        }}
        style={[styles.container, { paddingTop: height }]}>
        <View style={styles.content}>
          { children }
        </View>
      </SafeAreaView>
  );

If there's other possible answer. Kindly post it here. Thanks!