Add static safe area insets

This commit is contained in:
Marc Rousavy 2021-02-19 18:24:32 +01:00
parent 5ba1df8c08
commit e1d041644a
8 changed files with 35 additions and 8 deletions

View File

@ -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);

View File

@ -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

View File

@ -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>

View File

@ -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",

View File

@ -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",

10
example/src/Constants.ts Normal file
View File

@ -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
}

View File

@ -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,

View File

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