Add static safe area insets

example/index.tsx

@@ -5,6 +5,11 @@ import App from './src/App';
 import Settings from './src/Settings';
 import Splash from './src/Splash';
 
+Navigation.setDefaultOptions({
+  topBar: {
+    visible: false,
+  },
+});
 
 Navigation.registerComponent('Splash', () => gestureHandlerRootHOC(Splash), () => Splash);
 Navigation.registerComponent('Home', () => gestureHandlerRootHOC(App), () => App);

example/ios/Podfile.lock

@@ -336,6 +336,8 @@ PODS:
     - React-RCTVibration
     - ReactCommon/turbomodule/core
     - Yoga
+  - RNStaticSafeAreaInsets (2.1.1):
+    - React
   - Yoga (1.14.0)
   - YogaKit (1.18.1):
     - Yoga (~> 1.14)
@@ -391,6 +393,7 @@ DEPENDENCIES:
   - ReactNativeNavigation (from `../node_modules/react-native-navigation`)
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
+  - RNStaticSafeAreaInsets (from `../node_modules/react-native-static-safe-area-insets`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -467,6 +470,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-gesture-handler"
   RNReanimated:
     :path: "../node_modules/react-native-reanimated"
+  RNStaticSafeAreaInsets:
+    :path: "../node_modules/react-native-static-safe-area-insets"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -511,6 +516,7 @@ SPEC CHECKSUMS:
   ReactNativeNavigation: fa1eed29e815dfca6a1cb325776ef97658c54ce3
   RNGestureHandler: 5e58135436aacc1c5d29b75547d3d2b9430d052c
   RNReanimated: ca4f28c765329144d68bdad126bf6b0b1afc7a5a
+  RNStaticSafeAreaInsets: 6103cf09647fa427186d30f67b0f5163c1ae8252
   Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6
   YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
 

example/ios/VisionCameraExample/Info.plist

@@ -37,8 +37,12 @@
 			</dict>
 		</dict>
 	</dict>
+	<key>NSCameraUsageDescription</key>
+	<string>VisionCamera needs access to your Camera for very obvious reasons.</string>
 	<key>NSLocationWhenInUseUsageDescription</key>
 	<string></string>
+	<key>NSMicrophoneUsageDescription</key>
+	<string>VisionCamera needs access to your Microphone to record videos with audio.</string>
 	<key>UILaunchStoryboardName</key>
 	<string>LaunchScreen</string>
 	<key>UIRequiredDeviceCapabilities</key>
@@ -48,13 +52,7 @@
 	<key>UISupportedInterfaceOrientations</key>
 	<array>
 		<string>UIInterfaceOrientationPortrait</string>
-		<string>UIInterfaceOrientationLandscapeLeft</string>
-		<string>UIInterfaceOrientationLandscapeRight</string>
 	</array>
-	<key>NSMicrophoneUsageDescription</key>
-	<string>VisionCamera needs access to your Microphone to record videos with audio.</string>
-	<key>NSCameraUsageDescription</key>
-	<string>VisionCamera needs access to your Camera for very obvious reasons.</string>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
 </dict>

example/package-lock.json

@@ -6222,6 +6222,11 @@
         }
       }
     },
+    "react-native-static-safe-area-insets": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-native-static-safe-area-insets/-/react-native-static-safe-area-insets-2.1.1.tgz",
+      "integrity": "sha512-NUSRNZp+0IJOuLeoHoU4kw/cY9g7ozUo2ApCbJAiPyYbkbv49S8gdAcZRkeR0nqwzFDA07sCZCbPI03iEV0RTQ=="
+    },
     "react-refresh": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz",

example/package.json

@@ -13,7 +13,8 @@
     "react-native": "0.63.4",
     "react-native-gesture-handler": "^1.10.1",
     "react-native-navigation": "^7.10.0",
-    "react-native-reanimated": "^2.0.0-rc.3"
+    "react-native-reanimated": "^2.0.0-rc.3",
+    "react-native-static-safe-area-insets": "^2.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.10",

example/src/Constants.ts

@@ -0,0 +1,10 @@
+import StaticSafeAreaInsets from "react-native-static-safe-area-insets";
+
+export const CONTENT_SPACING = 15;
+
+export const SAFE_AREA_PADDING = {
+  paddingLeft: StaticSafeAreaInsets.safeAreaInsetsLeft + CONTENT_SPACING,
+  paddingTop: StaticSafeAreaInsets.safeAreaInsetsTop + CONTENT_SPACING,
+  paddingRight: StaticSafeAreaInsets.safeAreaInsetsRight + CONTENT_SPACING,
+  paddingBottom: StaticSafeAreaInsets.safeAreaInsetsBottom + CONTENT_SPACING
+}

example/src/Splash.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 
 import { StyleSheet, View, Text, Image  } from 'react-native';
 import { Camera, CameraPermissionStatus } from 'react-native-vision-camera';
+import { SAFE_AREA_PADDING } from './Constants';
 
 export default function Splash() {
   const [
@@ -64,6 +65,7 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: 'white',
+    ...SAFE_AREA_PADDING
   },
   box: {
     width: 60,

example/tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "react-native-vision-camera": ["./src/index"]
+      "react-native-vision-camera": ["../src/index"]
     },
     "allowJs": false,
     "allowUnreachableCode": false,