Create Splash

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'
              }
            }
          ]

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

example/ios/VisionCameraExample/Info.plist

@@ -51,6 +51,10 @@
 		<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

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

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

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<CameraPermissionStatus>("not-determined");
+  const [
+    microphonePermissionStatus,
+    setMicrophonePermissionStatus,
+  ] = useState<CameraPermissionStatus>("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 (
+    <View style={styles.container}>
+      <Text>Camera Permission: {cameraPermissionStatus}</Text>
+      <Text>Microphone Permission: {microphonePermissionStatus}</Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'white',
+  },
+  box: {
+    width: 60,
+    height: 60,
+    marginVertical: 20,
+  },
+});