From 1d51b2115bf5f271479a84d2d71931eb4a2cc199 Mon Sep 17 00:00:00 2001 From: Marc Rousavy Date: Fri, 19 Feb 2021 18:12:07 +0100 Subject: [PATCH] Create Splash --- example/index.tsx | 11 ++-- example/ios/Podfile.lock | 6 +++ example/ios/VisionCameraExample/Info.plist | 4 ++ example/package-lock.json | 50 ++++++++++++++++++ example/package.json | 1 + example/src/Splash.tsx | 60 ++++++++++++++++++++++ 6 files changed, 129 insertions(+), 3 deletions(-) create mode 100644 example/src/Splash.tsx diff --git a/example/index.tsx b/example/index.tsx index 96ac6e2..fd8e4f4 100644 --- a/example/index.tsx +++ b/example/index.tsx @@ -1,9 +1,14 @@ +import 'react-native-gesture-handler'; import { Navigation } from "react-native-navigation"; +import { gestureHandlerRootHOC } from 'react-native-gesture-handler'; import App from './src/App'; import Settings from './src/Settings'; +import Splash from './src/Splash'; -Navigation.registerComponent('Home', () => App); -Navigation.registerComponent('Settings', () => Settings); + +Navigation.registerComponent('Splash', () => gestureHandlerRootHOC(Splash), () => Splash); +Navigation.registerComponent('Home', () => gestureHandlerRootHOC(App), () => App); +Navigation.registerComponent('Settings', () => gestureHandlerRootHOC(Settings), () => Settings); Navigation.events().registerAppLaunchedListener(() => { Navigation.setRoot({ @@ -12,7 +17,7 @@ Navigation.events().registerAppLaunchedListener(() => { children: [ { component: { - name: 'Home' + name: 'Splash' } } ] diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index 1bd671e..913a59e 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -305,6 +305,8 @@ PODS: - React-Core - React-RCTImage - React-RCTText + - RNGestureHandler (1.10.1): + - React-Core - RNReanimated (2.0.0-rc.3): - DoubleConversion - FBLazyVector @@ -387,6 +389,7 @@ DEPENDENCIES: - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) - ReactNativeNavigation (from `../node_modules/react-native-navigation`) + - RNGestureHandler (from `../node_modules/react-native-gesture-handler`) - RNReanimated (from `../node_modules/react-native-reanimated`) - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) @@ -460,6 +463,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon" ReactNativeNavigation: :path: "../node_modules/react-native-navigation" + RNGestureHandler: + :path: "../node_modules/react-native-gesture-handler" RNReanimated: :path: "../node_modules/react-native-reanimated" Yoga: @@ -504,6 +509,7 @@ SPEC CHECKSUMS: React-RCTVibration: ae4f914cfe8de7d4de95ae1ea6cc8f6315d73d9d ReactCommon: 73d79c7039f473b76db6ff7c6b159c478acbbb3b ReactNativeNavigation: fa1eed29e815dfca6a1cb325776ef97658c54ce3 + RNGestureHandler: 5e58135436aacc1c5d29b75547d3d2b9430d052c RNReanimated: ca4f28c765329144d68bdad126bf6b0b1afc7a5a Yoga: 4bd86afe9883422a7c4028c00e34790f560923d6 YogaKit: f782866e155069a2cca2517aafea43200b01fd5a diff --git a/example/ios/VisionCameraExample/Info.plist b/example/ios/VisionCameraExample/Info.plist index 2ebd831..31a06bd 100644 --- a/example/ios/VisionCameraExample/Info.plist +++ b/example/ios/VisionCameraExample/Info.plist @@ -51,6 +51,10 @@ 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 cbfc4c1..9177341 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -712,6 +712,14 @@ "minimist": "^1.2.0" } }, + "@egjs/hammerjs": { + "version": "2.0.17", + "resolved": "https://registry.npmjs.org/@egjs/hammerjs/-/hammerjs-2.0.17.tgz", + "integrity": "sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==", + "requires": { + "@types/hammerjs": "^2.0.36" + } + }, "@hapi/address": { "version": "2.1.4", "resolved": "https://registry.npmjs.org/@hapi/address/-/address-2.1.4.tgz", @@ -1210,6 +1218,11 @@ "resolved": "https://registry.npmjs.org/@react-native-community/cli-types/-/cli-types-4.10.1.tgz", "integrity": "sha512-ael2f1onoPF3vF7YqHGWy7NnafzGu+yp88BbFbP0ydoCP2xGSUzmZVw0zakPTC040Id+JQ9WeFczujMkDy6jYQ==" }, + "@types/hammerjs": { + "version": "2.0.38", + "resolved": "https://registry.npmjs.org/@types/hammerjs/-/hammerjs-2.0.38.tgz", + "integrity": "sha512-wuwDzWW1JWh3BZoRftBlKcctjNzR75QFY4/b4zAz7sH1EesA8HBJzke+bF5dxCATNdHHs3X1P5UWanbbUT6chw==" + }, "@types/istanbul-lib-coverage": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/@types/istanbul-lib-coverage/-/istanbul-lib-coverage-2.0.3.tgz", @@ -4585,6 +4598,43 @@ } } }, + "react-native-gesture-handler": { + "version": "1.10.1", + "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-1.10.1.tgz", + "integrity": "sha512-sDo6T0m+izIDczsIzE63nAqEG3BE/OwkCJoU4/qjdo7ryem7D0Rj/Y+SlAZP2lVAhllo65LDRYqd6SBe4y19Mg==", + "requires": { + "@egjs/hammerjs": "^2.0.17", + "@types/hammerjs": "^2.0.38", + "fbjs": "^3.0.0", + "hoist-non-react-statics": "^3.3.0", + "invariant": "^2.2.4", + "prop-types": "^15.7.2" + }, + "dependencies": { + "fbjs": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-3.0.0.tgz", + "integrity": "sha512-dJd4PiDOFuhe7vk4F80Mba83Vr2QuK86FoxtgPmzBqEJahncp+13YCmfoa53KHCo6OnlXLG7eeMWPfB5CrpVKg==", + "requires": { + "cross-fetch": "^3.0.4", + "fbjs-css-vars": "^1.0.0", + "loose-envify": "^1.0.0", + "object-assign": "^4.1.0", + "promise": "^7.1.1", + "setimmediate": "^1.0.5", + "ua-parser-js": "^0.7.18" + } + }, + "promise": { + "version": "7.3.1", + "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz", + "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==", + "requires": { + "asap": "~2.0.3" + } + } + } + }, "react-native-navigation": { "version": "7.10.0", "resolved": "https://registry.npmjs.org/react-native-navigation/-/react-native-navigation-7.10.0.tgz", diff --git a/example/package.json b/example/package.json index 9be138b..b0f360f 100644 --- a/example/package.json +++ b/example/package.json @@ -11,6 +11,7 @@ "dependencies": { "react": "16.13.1", "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" }, diff --git a/example/src/Splash.tsx b/example/src/Splash.tsx new file mode 100644 index 0000000..04380cb --- /dev/null +++ b/example/src/Splash.tsx @@ -0,0 +1,60 @@ +import React, { useEffect, useState } from 'react'; + +import { StyleSheet, View, Text } from 'react-native'; +import { Camera, CameraPermissionStatus } from 'react-native-vision-camera'; + +export default function Splash() { + const [ + cameraPermissionStatus, + setCameraPermissionStatus, + ] = useState("not-determined"); + const [ + microphonePermissionStatus, + setMicrophonePermissionStatus, + ] = useState("not-determined"); + + useEffect(() => { + const checkPermissions = async () => { + console.log(`Checking Permission status...`); + let [cameraPermission, microphonePermission] = await Promise.all([ + Camera.getCameraPermissionStatus(), + Camera.getMicrophonePermissionStatus(), + ]); + console.log( + `Check: CameraPermission: ${cameraPermission} | MicrophonePermission: ${microphonePermission}` + ); + if (cameraPermission !== "authorized") + cameraPermission = await Camera.requestCameraPermission(); + if (microphonePermission !== "authorized") + microphonePermission = await Camera.requestMicrophonePermission(); + console.log( + `Request: CameraPermission: ${cameraPermission} | MicrophonePermission: ${microphonePermission}` + ); + setCameraPermissionStatus(cameraPermission); + setMicrophonePermissionStatus(microphonePermission); + }; + + checkPermissions(); + }, []); + + return ( + + Camera Permission: {cameraPermissionStatus} + Microphone Permission: {microphonePermissionStatus} + + ); +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + alignItems: 'center', + justifyContent: 'center', + backgroundColor: 'white', + }, + box: { + width: 60, + height: 60, + marginVertical: 20, + }, +});