fix: workaround SafereaProvider causing jumping

see #174

packages/bottom-tabs/src/views/BottomTabView.tsx

@@ -11,8 +11,8 @@ import { Route, CommonActions } from '@react-navigation/core';
 import { TabNavigationState } from '@react-navigation/routers';
 // eslint-disable-next-line import/no-unresolved
 import { ScreenContainer } from 'react-native-screens';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
 
+import SafeAreaProviderCompat from './SafeAreaProviderCompat';
 import ResourceSavingScene from './ResourceSavingScene';
 import BottomTabBar from './BottomTabBar';
 import {
@@ -210,7 +210,7 @@ export default class BottomTabView extends React.Component<Props, State> {
     const { loaded } = this.state;
 
     return (
-      <SafeAreaProvider>
+      <SafeAreaProviderCompat>
         <View style={styles.container}>
           <ScreenContainer style={styles.pages}>
             {routes.map((route, index) => {
@@ -246,7 +246,7 @@ export default class BottomTabView extends React.Component<Props, State> {
           </ScreenContainer>
           {this.renderTabBar()}
         </View>
-      </SafeAreaProvider>
+      </SafeAreaProviderCompat>
     );
   }
 }

packages/bottom-tabs/src/views/SafeAreaProviderCompat.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import {
+  SafeAreaProvider,
+  SafeAreaConsumer,
+} from 'react-native-safe-area-context';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function SafeAreaProviderCompat({ children }: Props) {
+  return (
+    <SafeAreaConsumer>
+      {insets => {
+        if (insets) {
+          // If we already have insets, don't wrap the stack in another safe area provider
+          // This avoids an issue with updates at the cost of potentially incorrect values
+          // https://github.com/react-navigation/navigation-ex/issues/174
+          return children;
+        }
+
+        return <SafeAreaProvider>{children}</SafeAreaProvider>;
+      }}
+    </SafeAreaConsumer>
+  );
+}

packages/drawer/src/views/DrawerView.tsx

@@ -6,7 +6,6 @@ import {
   Platform,
   ScaledSize,
 } from 'react-native';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
 // eslint-disable-next-line import/no-unresolved
 import { ScreenContainer } from 'react-native-screens';
 import { PanGestureHandler } from 'react-native-gesture-handler';
@@ -16,6 +15,7 @@ import {
 } from '@react-navigation/routers';
 
 import DrawerGestureContext from '../utils/DrawerGestureContext';
+import SafeAreaProviderCompat from './SafeAreaProviderCompat';
 import ResourceSavingScene from './ResourceSavingScene';
 import DrawerContent from './DrawerContent';
 import Drawer from './Drawer';
@@ -213,7 +213,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
     const { gestureEnabled } = descriptors[activeKey].options;
 
     return (
-      <SafeAreaProvider>
+      <SafeAreaProviderCompat>
         <DrawerGestureContext.Provider value={this.drawerGestureRef}>
           <Drawer
             open={state.isDrawerOpen}
@@ -235,7 +235,7 @@ export default class DrawerView extends React.PureComponent<Props, State> {
             renderSceneContent={this.renderContent}
           />
         </DrawerGestureContext.Provider>
-      </SafeAreaProvider>
+      </SafeAreaProviderCompat>
     );
   }
 }

packages/drawer/src/views/SafeAreaProviderCompat.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import {
+  SafeAreaProvider,
+  SafeAreaConsumer,
+} from 'react-native-safe-area-context';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function SafeAreaProviderCompat({ children }: Props) {
+  return (
+    <SafeAreaConsumer>
+      {insets => {
+        if (insets) {
+          // If we already have insets, don't wrap the stack in another safe area provider
+          // This avoids an issue with updates at the cost of potentially incorrect values
+          // https://github.com/react-navigation/navigation-ex/issues/174
+          return children;
+        }
+
+        return <SafeAreaProvider>{children}</SafeAreaProvider>;
+      }}
+    </SafeAreaConsumer>
+  );
+}

packages/stack/src/views/SafeAreaProviderCompat.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react';
+import {
+  SafeAreaProvider,
+  SafeAreaConsumer,
+} from 'react-native-safe-area-context';
+
+type Props = {
+  children: React.ReactNode;
+};
+
+export default function SafeAreaProviderCompat({ children }: Props) {
+  return (
+    <SafeAreaConsumer>
+      {insets => {
+        if (insets) {
+          // If we already have insets, don't wrap the stack in another safe area provider
+          // This avoids an issue with updates at the cost of potentially incorrect values
+          // https://github.com/react-navigation/navigation-ex/issues/174
+          return children;
+        }
+
+        return <SafeAreaProvider>{children}</SafeAreaProvider>;
+      }}
+    </SafeAreaConsumer>
+  );
+}

packages/stack/src/views/Stack/StackView.tsx

@@ -1,10 +1,6 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
-import {
-  SafeAreaProvider,
-  SafeAreaConsumer,
-  EdgeInsets,
-} from 'react-native-safe-area-context';
+import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';
 import { Route } from '@react-navigation/core';
 import { StackActions, StackNavigationState } from '@react-navigation/routers';
 
@@ -12,6 +8,7 @@ import Stack from './Stack';
 import HeaderContainer, {
   Props as HeaderContainerProps,
 } from '../Header/HeaderContainer';
+import SafeAreaProviderCompat from '../SafeAreaProviderCompat';
 import {
   StackNavigationHelpers,
   StackNavigationConfig,
@@ -328,7 +325,7 @@ class StackView extends React.Component<Props, State> {
       mode !== 'modal' && Platform.OS === 'ios' ? 'float' : 'screen';
 
     return (
-      <SafeAreaProvider>
+      <SafeAreaProviderCompat>
         <SafeAreaConsumer>
           {insets => (
             <Stack
@@ -355,7 +352,7 @@ class StackView extends React.Component<Props, State> {
             />
           )}
         </SafeAreaConsumer>
-      </SafeAreaProvider>
+      </SafeAreaProviderCompat>
     );
   }
 }