refactor: don't use deprecated APIs from react-native-safe-area-context

BREAKING CHANGE: We now require newer versions of safe area context library.
react-navigation · Nov 13, 2020 · ddf27bf · ddf27bf
1 parent a97a43a
commit ddf27bf
Show file tree

Hide file tree

Showing 9 changed files with 71 additions and 84 deletions.
diff --git a/packages/bottom-tabs/package.json b/packages/bottom-tabs/package.json
@@ -37,8 +37,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "color": "^3.1.3",
-    "react-native-iphone-x-helper": "^1.3.0"
+    "color": "^3.1.3"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.16.2",

diff --git a/packages/bottom-tabs/src/views/BottomTabBar.tsx b/packages/bottom-tabs/src/views/BottomTabBar.tsx
@@ -17,7 +17,7 @@ import {
   useTheme,
   useLinkBuilder,
 } from '@react-navigation/native';
-import { useSafeArea, EdgeInsets } from 'react-native-safe-area-context';
+import { useSafeAreaInsets, EdgeInsets } from 'react-native-safe-area-context';
 
 import BottomTabItem from './BottomTabItem';
 import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
@@ -232,7 +232,7 @@ export default function BottomTabBar({
 
   const { routes } = state;
 
-  const defaultInsets = useSafeArea();
+  const defaultInsets = useSafeAreaInsets();
 
   const insets = {
     top: safeAreaInsets?.top ?? defaultInsets.top,

diff --git a/packages/bottom-tabs/src/views/BottomTabView.tsx b/packages/bottom-tabs/src/views/BottomTabView.tsx
@@ -14,10 +14,9 @@ import {
   useTheme,
 } from '@react-navigation/native';
 import { ScreenContainer } from 'react-native-screens';
+import { initialWindowMetrics } from 'react-native-safe-area-context';
 
-import SafeAreaProviderCompat, {
-  initialSafeAreaInsets,
-} from './SafeAreaProviderCompat';
+import SafeAreaProviderCompat from './SafeAreaProviderCompat';
 import ResourceSavingScene from './ResourceSavingScene';
 import BottomTabBar, { getTabBarHeight } from './BottomTabBar';
 import BottomTabBarHeightCallbackContext from '../utils/BottomTabBarHeightCallbackContext';
@@ -88,7 +87,12 @@ export default class BottomTabView extends React.Component<Props, State> {
       state,
       dimensions,
       layout: { width: dimensions.width, height: 0 },
-      insets: initialSafeAreaInsets,
+      insets: initialWindowMetrics?.insets ?? {
+        top: 0,
+        left: 0,
+        right: 0,
+        bottom: 0,
+      },
       adaptive: tabBarOptions?.adaptive,
       labelPosition: tabBarOptions?.labelPosition,
       tabStyle: tabBarOptions?.tabStyle,

diff --git a/packages/bottom-tabs/src/views/SafeAreaProviderCompat.tsx b/packages/bottom-tabs/src/views/SafeAreaProviderCompat.tsx
@@ -1,35 +1,29 @@
 import * as React from 'react';
+import { Platform } from 'react-native';
 import {
   SafeAreaProvider,
-  SafeAreaConsumer,
-  initialWindowSafeAreaInsets,
+  SafeAreaInsetsContext,
+  initialWindowMetrics,
 } from 'react-native-safe-area-context';
-import {
-  getStatusBarHeight,
-  getBottomSpace,
-} from 'react-native-iphone-x-helper';
-
-// The provider component for safe area initializes asynchornously
-// Until the insets are available, there'll be blank screen
-// To avoid the blank screen, we specify some initial values
-export const initialSafeAreaInsets = {
-  // Approximate values which are good enough for most cases
-  top: getStatusBarHeight(true),
-  bottom: getBottomSpace(),
-  right: 0,
-  left: 0,
-  // If we are on a newer version of the library, we can get the correct window insets
-  // The component might not be filling the window, but this is good enough for most cases
-  ...initialWindowSafeAreaInsets,
-};
 
 type Props = {
   children: React.ReactNode;
 };
 
+// To support SSR on web, we need to have empty insets for initial values
+// Otherwise there can be mismatch between SSR and client output
+// We also need to specify empty values to support tests environments
+const initialMetrics =
+  Platform.OS === 'web' || initialWindowMetrics == null
+    ? {
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      }
+    : initialWindowMetrics;
+
 export default function SafeAreaProviderCompat({ children }: Props) {
   return (
-    <SafeAreaConsumer>
+    <SafeAreaInsetsContext.Consumer>
       {(insets) => {
         if (insets) {
           // If we already have insets, don't wrap the stack in another safe area provider
@@ -39,11 +33,11 @@ export default function SafeAreaProviderCompat({ children }: Props) {
         }
 
         return (
-          <SafeAreaProvider initialSafeAreaInsets={initialSafeAreaInsets}>
+          <SafeAreaProvider initialMetrics={initialMetrics}>
             {children}
           </SafeAreaProvider>
         );
       }}
-    </SafeAreaConsumer>
+    </SafeAreaInsetsContext.Consumer>
   );
 }
diff --git a/packages/drawer/package.json b/packages/drawer/package.json
@@ -42,8 +42,7 @@
     "clean": "del lib"
   },
   "dependencies": {
-    "color": "^3.1.3",
-    "react-native-iphone-x-helper": "^1.3.0"
+    "color": "^3.1.3"
   },
   "devDependencies": {
     "@react-native-community/bob": "^0.16.2",

diff --git a/packages/drawer/src/views/DrawerContentScrollView.tsx b/packages/drawer/src/views/DrawerContentScrollView.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { ScrollView, StyleSheet, ScrollViewProps } from 'react-native';
-import { useSafeArea } from 'react-native-safe-area-context';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import DrawerPositionContext from '../utils/DrawerPositionContext';
 
 type Props = ScrollViewProps & {
@@ -14,7 +14,7 @@ export default function DrawerContentScrollView({
   ...rest
 }: Props) {
   const drawerPosition = React.useContext(DrawerPositionContext);
-  const insets = useSafeArea();
+  const insets = useSafeAreaInsets();
 
   return (
     <ScrollView

diff --git a/packages/drawer/src/views/SafeAreaProviderCompat.tsx b/packages/drawer/src/views/SafeAreaProviderCompat.tsx
@@ -1,35 +1,29 @@
 import * as React from 'react';
+import { Platform } from 'react-native';
 import {
   SafeAreaProvider,
-  SafeAreaConsumer,
-  initialWindowSafeAreaInsets,
+  SafeAreaInsetsContext,
+  initialWindowMetrics,
 } from 'react-native-safe-area-context';
-import {
-  getStatusBarHeight,
-  getBottomSpace,
-} from 'react-native-iphone-x-helper';
-
-// The provider component for safe area initializes asynchornously
-// Until the insets are available, there'll be blank screen
-// To avoid the blank screen, we specify some initial values
-const initialSafeAreaInsets = {
-  // Approximate values which are good enough for most cases
-  top: getStatusBarHeight(true),
-  bottom: getBottomSpace(),
-  right: 0,
-  left: 0,
-  // If we are on a newer version of the library, we can get the correct window insets
-  // The component might not be filling the window, but this is good enough for most cases
-  ...initialWindowSafeAreaInsets,
-};
 
 type Props = {
   children: React.ReactNode;
 };
 
+// To support SSR on web, we need to have empty insets for initial values
+// Otherwise there can be mismatch between SSR and client output
+// We also need to specify empty values to support tests environments
+const initialMetrics =
+  Platform.OS === 'web' || initialWindowMetrics == null
+    ? {
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      }
+    : initialWindowMetrics;
+
 export default function SafeAreaProviderCompat({ children }: Props) {
   return (
-    <SafeAreaConsumer>
+    <SafeAreaInsetsContext.Consumer>
       {(insets) => {
         if (insets) {
           // If we already have insets, don't wrap the stack in another safe area provider
@@ -39,11 +33,11 @@ export default function SafeAreaProviderCompat({ children }: Props) {
         }
 
         return (
-          <SafeAreaProvider initialSafeAreaInsets={initialSafeAreaInsets}>
+          <SafeAreaProvider initialMetrics={initialMetrics}>
             {children}
           </SafeAreaProvider>
         );
       }}
-    </SafeAreaConsumer>
+    </SafeAreaInsetsContext.Consumer>
   );
 }
diff --git a/packages/stack/src/views/SafeAreaProviderCompat.tsx b/packages/stack/src/views/SafeAreaProviderCompat.tsx
@@ -1,35 +1,29 @@
 import * as React from 'react';
+import { Platform } from 'react-native';
 import {
   SafeAreaProvider,
-  SafeAreaConsumer,
-  initialWindowSafeAreaInsets,
+  SafeAreaInsetsContext,
+  initialWindowMetrics,
 } from 'react-native-safe-area-context';
-import {
-  getStatusBarHeight,
-  getBottomSpace,
-} from 'react-native-iphone-x-helper';
-
-// The provider component for safe area initializes asynchornously
-// Until the insets are available, there'll be blank screen
-// To avoid the blank screen, we specify some initial values
-const initialSafeAreaInsets = {
-  // Approximate values which are good enough for most cases
-  top: getStatusBarHeight(true),
-  bottom: getBottomSpace(),
-  right: 0,
-  left: 0,
-  // If we are on a newer version of the library, we can get the correct window insets
-  // The component might not be filling the window, but this is good enough for most cases
-  ...initialWindowSafeAreaInsets,
-};
 
 type Props = {
   children: React.ReactNode;
 };
 
+// To support SSR on web, we need to have empty insets for initial values
+// Otherwise there can be mismatch between SSR and client output
+// We also need to specify empty values to support tests environments
+const initialMetrics =
+  Platform.OS === 'web' || initialWindowMetrics == null
+    ? {
+        frame: { x: 0, y: 0, width: 0, height: 0 },
+        insets: { top: 0, left: 0, right: 0, bottom: 0 },
+      }
+    : initialWindowMetrics;
+
 export default function SafeAreaProviderCompat({ children }: Props) {
   return (
-    <SafeAreaConsumer>
+    <SafeAreaInsetsContext.Consumer>
       {(insets) => {
         if (insets) {
           // If we already have insets, don't wrap the stack in another safe area provider
@@ -39,11 +33,11 @@ export default function SafeAreaProviderCompat({ children }: Props) {
         }
 
         return (
-          <SafeAreaProvider initialSafeAreaInsets={initialSafeAreaInsets}>
+          <SafeAreaProvider initialMetrics={initialMetrics}>
             {children}
           </SafeAreaProvider>
         );
       }}
-    </SafeAreaConsumer>
+    </SafeAreaInsetsContext.Consumer>
   );
 }
diff --git a/packages/stack/src/views/Stack/StackView.tsx b/packages/stack/src/views/Stack/StackView.tsx
@@ -1,6 +1,9 @@
 import * as React from 'react';
 import { View, Platform, StyleSheet } from 'react-native';
-import { SafeAreaConsumer, EdgeInsets } from 'react-native-safe-area-context';
+import {
+  SafeAreaInsetsContext,
+  EdgeInsets,
+} from 'react-native-safe-area-context';
 import {
   NavigationHelpersContext,
   StackActions,
@@ -453,7 +456,7 @@ export default class StackView extends React.Component<Props, State> {
       <NavigationHelpersContext.Provider value={navigation}>
         <GestureHandlerWrapper style={styles.container}>
           <SafeAreaProviderCompat>
-            <SafeAreaConsumer>
+            <SafeAreaInsetsContext.Consumer>
               {(insets) => (
                 <KeyboardManager enabled={keyboardHandlingEnabled !== false}>
                   {(props) => (
@@ -488,7 +491,7 @@ export default class StackView extends React.Component<Props, State> {
                   )}
                 </KeyboardManager>
               )}
-            </SafeAreaConsumer>
+            </SafeAreaInsetsContext.Consumer>
           </SafeAreaProviderCompat>
         </GestureHandlerWrapper>
       </NavigationHelpersContext.Provider>