Wierd Transparent Black Overlay React native Navigation

Question

I have this weird issue where there is a Transparent Black Overlay on top spanning the full width and height of the screen, but once you scroll it goes away. I tried with and without the React Navigation and it seems to only appear when using it?

Update:( I found this div causing the overlay... but it it nowhere in my code?) Any Clue how to remove it?

Example of the overlay below

and the code? Am I missing something?

Answer 1

I found the answer on GitHub... and it seems to work

    import React from 'react';
import { NavigationContainer, DefaultTheme } from '@react-navigation/native';

const MainNavigator = () => {
  const MyTheme = {
    ...DefaultTheme,
    colors: {
      ...DefaultTheme.colors,
      background: '#FFF',
    },
  };

  return (
    <NavigationContainer theme={MyTheme}>
      ...
    </NavigationContainer>
  );
};

export default MainNavigator;