Explicitly recommend not using the SafeAreaView component

satya164 · satya164 · commit 5644527a3789 · 2023-01-02T08:07:09.000+01:00
diff --git a/static/examples/6.x/safe-area-example.js b/static/examples/6.x/safe-area-example.js
@@ -1,18 +1,31 @@
 import * as React from 'react';
-import { Text } from 'react-native';
+import { View, Text } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 function Demo() {
+  const insets = useSafeAreaInsets();
+
   return (
-    <SafeAreaView
-      style={{ flex: 1, justifyContent: 'space-between', alignItems: 'center' }}
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingTop: insets.top,
+        paddingBottom: insets.bottom,
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
     >
       <Text>This is top text.</Text>
       <Text>This is bottom text.</Text>
-    </SafeAreaView>
+    </View>
   );
 }
 
diff --git a/static/examples/6.x/status-bar-focus-effect.js b/static/examples/6.x/status-bar-focus-effect.js
@@ -1,5 +1,6 @@
 import * as React from 'react';
 import {
+  View,
   Text,
   StatusBar,
   Button,
@@ -9,8 +10,10 @@ import {
 } from 'react-native';
 import { NavigationContainer, useIsFocused } from '@react-navigation/native';
 import { createDrawerNavigator } from '@react-navigation/drawer';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import SafeAreaView from 'react-native-safe-area-view';
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 function FocusAwareStatusBar(props) {
   const isFocused = useIsFocused();
@@ -19,26 +22,52 @@ function FocusAwareStatusBar(props) {
 }
 
 function Screen1({ navigation }) {
+  const insets = useSafeAreaInsets();
+
   return (
-    <SafeAreaView style={[styles.container, { backgroundColor: '#6a51ae' }]}>
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: '#6a51ae',
+          paddingTop: insets.top,
+          paddingBottom: insets.bottom,
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        },
+      ]}
+    >
       <FocusAwareStatusBar barStyle="light-content" backgroundColor="#6a51ae" />
       <Text style={{ color: '#fff' }}>Light Screen</Text>
       <Button
         title="Toggle Drawer"
         onPress={() => navigation.toggleDrawer()}
         color="#fff"
       />
-    </SafeAreaView>
+    </View>
   );
 }
 
 function Screen2({ navigation }) {
+  const insets = useSafeAreaInsets();
+
   return (
-    <SafeAreaView style={[styles.container, { backgroundColor: '#ecf0f1' }]}>
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: '#ecf0f1',
+          paddingTop: insets.top,
+          paddingBottom: insets.bottom,
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        },
+      ]}
+    >
       <FocusAwareStatusBar barStyle="dark-content" backgroundColor="#ecf0f1" />
       <Text>Dark Screen</Text>
       <Button title="Toggle Drawer" onPress={() => navigation.toggleDrawer()} />
-    </SafeAreaView>
+    </View>
   );
 }
 
diff --git a/static/examples/6.x/status-bar.js b/static/examples/6.x/status-bar.js
@@ -1,33 +1,61 @@
 import * as React from 'react';
-import { Text, StatusBar, Button, StyleSheet } from 'react-native';
+import { View, Text, StatusBar, Button, StyleSheet } from 'react-native';
 import { NavigationContainer } from '@react-navigation/native';
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
-import { SafeAreaProvider } from 'react-native-safe-area-context';
-import SafeAreaView from 'react-native-safe-area-view';
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 function Screen1({ navigation }) {
+  const insets = useSafeAreaInsets();
+
   return (
-    <SafeAreaView style={[styles.container, { backgroundColor: '#6a51ae' }]}>
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: '#6a51ae',
+          paddingTop: insets.top,
+          paddingBottom: insets.bottom,
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        },
+      ]}
+    >
       <StatusBar barStyle="light-content" backgroundColor="#6a51ae" />
       <Text style={{ color: '#fff' }}>Light Screen</Text>
       <Button
         title="Next screen"
         onPress={() => navigation.navigate('Screen2')}
       />
-    </SafeAreaView>
+    </View>
   );
 }
 
 function Screen2({ navigation }) {
+  const insets = useSafeAreaInsets();
+
   return (
-    <SafeAreaView style={[styles.container, { backgroundColor: '#ecf0f1' }]}>
+    <View
+      style={[
+        styles.container,
+        {
+          backgroundColor: '#ecf0f1',
+          paddingTop: insets.top,
+          paddingBottom: insets.bottom,
+          paddingLeft: insets.left,
+          paddingRight: insets.right,
+        },
+      ]}
+    >
       <StatusBar barStyle="dark-content" backgroundColor="#ecf0f1" />
       <Text>Dark Screen</Text>
       <Button
         title="Next screen"
         onPress={() => navigation.navigate('Screen1')}
       />
-    </SafeAreaView>
+    </View>
   );
 }
 
diff --git a/versioned_docs/version-6.x/handling-safe-area.md b/versioned_docs/version-6.x/handling-safe-area.md
@@ -15,13 +15,15 @@ The area not overlapped by such items is referred to as "safe area".
 
 We try to apply proper insets on the UI elements of the navigators to avoid being overlapped by such items. The goal is to (a) maximize usage of the screen (b) without hiding content or making it difficult to interact with by having it obscured by a physical display cutout or some operating system UI.
 
-While React Navigation handles safe areas for the built-in UI elements by default, your own content also needs to handle it to ensure that content isn't hidden by these items.
+While React Navigation handles safe areas for the built-in UI elements by default, your own content may also need to handle it to ensure that content isn't hidden by these items.
 
 It's tempting to solve (a) by wrapping your entire app in a container with padding that ensures all content will not be occluded. But in doing so, we waste a bunch of space on the screen, as pictured in the image on the left below. What we ideally want is the image pictured on the right.
 
 ![Notch on the iPhone X](/assets/iphoneX/00-intro.png)
 
-While React Native exports a `SafeAreaView` component, it has some inherent issues, i.e. if a screen containing safe area is animating, it causes jumpy behavior. In addition, this component only supports iOS 10+ with no support for older iOS versions or Android. We recommend to use the [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) library to handle safe areas in a more reliable way.
+While React Native exports a `SafeAreaView` component, this component only supports iOS 10+ with no support for older iOS versions or Android. In addition, it also has some issues, i.e. if a screen containing safe area is animating, it causes jumpy behavior. So we recommend to use the `useSafeAreaInsets` hook from the [react-native-safe-area-context](https://github.com/th3rdwave/react-native-safe-area-context) library to handle safe areas in a more reliable way.
+
+> Note: The `react-native-safe-area-context` library also exports a `SafeAreaView` component. While it works on Android, it also has the same issues related to jumpy behavior when animating. So we recommend always using the `useSafeAreaInsets` hook instead and avoid using the `SafeAreaView` component.
 
 The rest of this guide gives more information on how to support safe areas in React Navigation.
 
@@ -58,18 +60,21 @@ const Tab = createBottomTabNavigator();
 export default function App() {
   return (
     <NavigationContainer>
-      <Stack.Navigator initialRouteName="Home" screenOptions={{ headerShown: false }}>
+      <Stack.Navigator
+        initialRouteName="Home"
+        screenOptions={{ headerShown: false }}
+      >
         <Stack.Screen name="Home">
-            {() => (
-              <Tab.Navigator
-                initialRouteName="Analitics"
-                tabBar={() => null}
-                screenOptions={{ headerShown: false }}
-              >
-                <Tab.Screen name="Analitics" component={Demo} />
-                <Tab.Screen name="Profile" component={Demo} />
-              </Tab.Navigator>
-            )}
+          {() => (
+            <Tab.Navigator
+              initialRouteName="Analitics"
+              tabBar={() => null}
+              screenOptions={{ headerShown: false }}
+            >
+              <Tab.Screen name="Analitics" component={Demo} />
+              <Tab.Screen name="Profile" component={Demo} />
+            </Tab.Navigator>
+          )}
         </Stack.Screen>
 
         <Stack.Screen name="Settings" component={Demo} />
@@ -81,21 +86,36 @@ export default function App() {
 
 ![Text hidden by iPhoneX UI elements](/assets/iphoneX/02-iphonex-content-hidden.png)
 
-To fix this issue you can apply safe area insets on your content. This can be achieved easily by using the `SafeAreaView` component from the `react-native-safe-area-context` library:
+To fix this issue you can apply safe area insets on your content. This can be achieved using the `useSafeAreaInsets` hook from the `react-native-safe-area-context` library:
 
 <samp id="safe-area-example" />
 
 ```jsx
-import { SafeAreaProvider, SafeAreaView } from 'react-native-safe-area-context';
+import {
+  SafeAreaProvider,
+  useSafeAreaInsets,
+} from 'react-native-safe-area-context';
 
 function Demo() {
+  const insets = useSafeAreaInsets();
+
   return (
-    <SafeAreaView
-      style={{ flex: 1, justifyContent: 'space-between', alignItems: 'center' }}
+    <View
+      style={{
+        flex: 1,
+        justifyContent: 'space-between',
+        alignItems: 'center',
+
+        // Paddings to handle safe area
+        paddingTop: insets.top,
+        paddingBottom: insets.bottom,
+        paddingLeft: insets.left,
+        paddingRight: insets.right,
+      }}
     >
       <Text>This is top text.</Text>
       <Text>This is bottom text.</Text>
-    </SafeAreaView>
+    </View>
   );
 }
 
@@ -124,19 +144,6 @@ To fix this you can, once again, apply safe area insets to your content. This wi
 
 ![App in landscape mode with text visible](/assets/iphoneX/05-iphonex-landscape-fixed.png)
 
-## Use the `edges` prop to customize the safe area
-
-In some cases you might need more control over which paddings are applied. For example, you can remove bottom padding by passing `edges` prop to `SafeAreaView`.
-
-```jsx
-<SafeAreaView style={styles.container} edges={['top', 'left', 'right']}>
-  <Text style={styles.paragraph}>This is top text.</Text>
-  <Text style={styles.paragraph}>This is bottom text.</Text>
-</SafeAreaView>
-```
-
-`edges` takes an array with the values `top`, `bottom`, `left` and `right` which controls which sides the safe area are applied to.
-
 ## Use the hook for more control
 
 In some cases you might need more control over which paddings are applied. For example, you can only apply the top and the bottom padding by changing the `style` object:
@@ -171,7 +178,6 @@ Similarly, you could apply these paddings in `contentContainerStyle` of `FlatLis
 
 ## Summary
 
-- Use `react-native-safe-area-context` instead of `SafeAreaView` from `react-native`
-- Don't wrap your whole app in `SafeAreaView`, instead wrap content inside your screens
-- Use the `edges` prop to apply safe area to specific sides
-- Use the `useSafeAreaInsets` hook for more control over where the insets are applied
+- Use `useSafeAreaInsets` hook from `react-native-safe-area-context` instead of `SafeAreaView` component
+- Don't wrap your whole app in `SafeAreaView`, instead apply the styles to content inside your screens
+- Apply only specific insets using the `useSafeAreaInsets` hook for more control
diff --git a/versioned_docs/version-6.x/status-bar.md b/versioned_docs/version-6.x/status-bar.md
