fix: workaround SafereaProvider causing jumping

Author: satya164

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/stack/issues/283
+          return children;
+        }
+
+        return <SafeAreaProvider>{children}</SafeAreaProvider>;
+      }}
+    </SafeAreaConsumer>
+  );
+}

src/views/Stack/StackView.tsx

@@ -1,14 +1,12 @@
 import * as React from 'react';
 import { Platform } from 'react-native';
-import {
-  SafeAreaProvider,
-  SafeAreaConsumer,
-} from 'react-native-safe-area-context';
+import { SafeAreaConsumer } from 'react-native-safe-area-context';
 import { SceneView, StackActions, NavigationRoute } from 'react-navigation';
 import Stack from './Stack';
 import HeaderContainer, {
   Props as HeaderContainerProps,
 } from '../Header/HeaderContainer';
+import SafeAreaProviderCompat from '../SafeAreaProviderCompat';
 import {
   NavigationStackProp,
   NavigationStackConfig,
@@ -366,7 +364,7 @@ class StackView extends React.Component<Props, State> {
       mode !== 'modal' && Platform.OS === 'ios' ? 'float' : 'screen';
 
     return (
-      <SafeAreaProvider>
+      <SafeAreaProviderCompat>
         <SafeAreaConsumer>
           {insets => (
             <Stack
@@ -392,7 +390,7 @@ class StackView extends React.Component<Props, State> {
             />
           )}
         </SafeAreaConsumer>
-      </SafeAreaProvider>
+      </SafeAreaProviderCompat>
     );
   }
 }