Add react-native-safe-area-view example

example/package.json

@@ -16,6 +16,7 @@
     "react-navigation-tabs": "^2.8.13",
     "react-native-gesture-handler": "^1.6.1",
     "react-native-screens": "^2.7.0",
-    "react-native-reanimated": "^1.8.0"
+    "react-native-reanimated": "^1.8.0",
+    "react-native-safe-area-view": "^1.1.1"
   }
 }

example/src/App.tsx

@@ -1,12 +1,13 @@
 import 'react-native-gesture-handler';
 import * as React from 'react';
-import { DevSettings } from 'react-native';
+import { DevSettings, View, Text } from 'react-native';
 import { enableScreens } from 'react-native-screens';
 import AsyncStorage from '@react-native-community/async-storage';
 import ReactNavigation4Example from './ReactNavigation4Example';
 import ReactNavigation5Example from './ReactNavigation5Example';
 import SimpleExample from './SimpleExample';
 import NativeStackExample from './NativeStackExample';
+import ReactNativeSafeAreaView from './ReactNativeSafeAreaView';
 
 enableScreens();
 
@@ -20,7 +21,7 @@ export default function App() {
   React.useEffect(() => {
     async function loadCurrentExample() {
       const example = await AsyncStorage.getItem(STORAGE_KEY);
-      setCurrentExample(example ?? 'simple');
+      setCurrentExample(example ?? null);
     }
     loadCurrentExample();
   }, []);
@@ -47,6 +48,9 @@ export default function App() {
     DevSettings.addMenuItem('Show Native Stack Example', () => {
       setCurrentExample('native-stack');
     });
+    DevSettings.addMenuItem('Show React Native Safe Area View Example', () => {
+      setCurrentExample('react-native-safe-area-view');
+    });
   }, []);
 
   switch (currentExample) {
@@ -58,7 +62,22 @@ export default function App() {
       return <ReactNavigation5Example />;
     case 'native-stack':
       return <NativeStackExample />;
+    case 'react-native-safe-area-view':
+      return <ReactNativeSafeAreaView />;
     default:
-      return null;
+      return (
+        <View
+          style={{
+            flex: 1,
+            alignItems: 'center',
+            justifyContent: 'center',
+            padding: 24,
+          }}
+        >
+          <Text style={{ textAlign: 'center', fontSize: 14 }}>
+            Open the dev menu to choose an example
+          </Text>
+        </View>
+      );
   }
 }

example/src/ReactNativeSafeAreaView.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import { View } from 'react-native';
+import { SafeAreaProvider } from 'react-native-safe-area-context';
+import SafeAreaView from 'react-native-safe-area-view';
+
+export default function ReactNativeSafeAreaView() {
+  return (
+    <SafeAreaProvider>
+      <SafeAreaView style={{ flex: 1, backgroundColor: 'red' }}>
+        <View style={{ flex: 1, backgroundColor: 'blue' }} />
+      </SafeAreaView>
+    </SafeAreaProvider>
+  );
+}

package.json

@@ -76,6 +76,7 @@
     "react-navigation": "^4.3.9",
     "react-navigation-stack": "^2.5.0",
     "react-navigation-tabs": "^2.8.13",
+    "react-native-safe-area-view": "1.1.1",
     "react-native-gesture-handler": "^1.6.1",
     "react-native-screens": "^2.7.0",
     "react-native-reanimated": "^1.8.0",

yarn.lock

@@ -12457,6 +12457,13 @@ react-native-reanimated@^1.8.0:
   dependencies:
     fbjs "^1.0.0"
 
+react-native-safe-area-view@1.1.1:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-1.1.1.tgz#9833e34c384d0513f4831afcd1e54946f13897b2"
+  integrity sha512-bbLCtF+tqECyPWlgkWbIwx4vDPb0GEufx/ZGcSS4UljMcrpwluachDXoW9DBxhbMCc6k1V0ccqHWN7ntbRdERQ==
+  dependencies:
+    hoist-non-react-statics "^2.3.1"
+
 react-native-safe-area-view@^0.14.9:
   version "0.14.9"
   resolved "https://registry.yarnpkg.com/react-native-safe-area-view/-/react-native-safe-area-view-0.14.9.tgz#90ee8383037010d9a5055a97cf97e4c1da1f0c3d"