From e1d041644af94e6afd8fabf61595f2c463de5282 Mon Sep 17 00:00:00 2001 From: Marc Rousavy Date: Fri, 19 Feb 2021 18:24:32 +0100 Subject: [PATCH] Add static safe area insets --- example/index.tsx | 5 +++++ example/ios/Podfile.lock | 6 ++++++ example/ios/VisionCameraExample/Info.plist | 10 ++++------ example/package-lock.json | 5 +++++ example/package.json | 3 ++- example/src/Constants.ts | 10 ++++++++++ example/src/Splash.tsx | 2 ++ example/tsconfig.json | 2 +- 8 files changed, 35 insertions(+), 8 deletions(-) create mode 100644 example/src/Constants.ts diff --git a/example/index.tsx b/example/index.tsx index fd8e4f4..9c1c591 100644 --- a/example/index.tsx +++ b/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); diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index 913a59e..a8b3393 100644 --- a/example/ios/Podfile.lock +++ b/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 diff --git a/example/ios/VisionCameraExample/Info.plist b/example/ios/VisionCameraExample/Info.plist index 31a06bd..dbb4df3 100644 --- a/example/ios/VisionCameraExample/Info.plist +++ b/example/ios/VisionCameraExample/Info.plist @@ -37,8 +37,12 @@ + NSCameraUsageDescription + VisionCamera needs access to your Camera for very obvious reasons. NSLocationWhenInUseUsageDescription + NSMicrophoneUsageDescription + VisionCamera needs access to your Microphone to record videos with audio. UILaunchStoryboardName LaunchScreen UIRequiredDeviceCapabilities @@ -48,13 +52,7 @@ UISupportedInterfaceOrientations UIInterfaceOrientationPortrait - UIInterfaceOrientationLandscapeLeft - UIInterfaceOrientationLandscapeRight - NSMicrophoneUsageDescription - VisionCamera needs access to your Microphone to record videos with audio. - NSCameraUsageDescription - VisionCamera needs access to your Camera for very obvious reasons. UIViewControllerBasedStatusBarAppearance diff --git a/example/package-lock.json b/example/package-lock.json index 649295a..3af6442 100644 --- a/example/package-lock.json +++ b/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", diff --git a/example/package.json b/example/package.json index 1c5166a..e532aec 100644 --- a/example/package.json +++ b/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", diff --git a/example/src/Constants.ts b/example/src/Constants.ts new file mode 100644 index 0000000..639430b --- /dev/null +++ b/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 +} diff --git a/example/src/Splash.tsx b/example/src/Splash.tsx index 76b6826..bbc90b0 100644 --- a/example/src/Splash.tsx +++ b/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, diff --git a/example/tsconfig.json b/example/tsconfig.json index f2a88e9..78916fc 100644 --- a/example/tsconfig.json +++ b/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,