React navigation: глобальное применение SafeAreaView с помощью Redux

Я пытаюсь применить SafeAreaView к своему приложению глобально, чтобы не вставлять его в каждое представление отдельно, но когда я это делаю, тень появляется вверху и внизу представлений, и я понял, что это произошло потому, что я применил SafeAreaView из мой index.js, но когда я делаю это непосредственно в каждом представлении, он работает, как ожидалось, знаете ли вы, почему или я что-то делаю не так?

С SafeAreaView в index.js

const styles = StyleSheet.create({
  safeArea: {
    flex: 1,
    backgroundColor: 'white',
    shadowColor: 'transparent',
  },
});

const AppContainer = () => (
  <Provider store = {store}>
    <SafeAreaView style = {styles.safeArea}>
      <StatusBar backgroundColor = "#EEEEEE" barStyle = "dark-content" />
      <AppWithNavigationState />
    </SafeAreaView>
  </Provider>
);

С SafeAreaView в конкретном представлении

Я пытаюсь удалить эту тень, но это невозможно.