Add cool splashscreen

example/index.tsx

@@ -5,11 +5,19 @@ import { App } from './src/App';
 import { Settings } from './src/Settings';
 import { Splash } from './src/Splash';
 import { Media } from './src/Media';
+import { Camera } from 'react-native-vision-camera';
 
 Navigation.setDefaultOptions({
   topBar: {
     visible: false,
   },
+  window: {
+    backgroundColor: 'black',
+  },
+  layout: {
+    backgroundColor: 'black',
+    componentBackgroundColor: 'black'
+  },
 });
 
 Navigation.registerComponent('Splash', () => gestureHandlerRootHOC(Splash), () => Splash);
@@ -17,18 +25,27 @@ Navigation.registerComponent('Home', () => gestureHandlerRootHOC(App), () => App
 Navigation.registerComponent('Media', () => gestureHandlerRootHOC(Media), () => Media);
 Navigation.registerComponent('Settings', () => gestureHandlerRootHOC(Settings), () => Settings);
 
-Navigation.events().registerAppLaunchedListener(() => {
+Navigation.events().registerAppLaunchedListener(async () => {
-   Navigation.setRoot({
+  const [cameraPermission, microphonePermission] = await Promise.all([
-     root: {
+    Camera.getCameraPermissionStatus(),
-       stack: {
+    Camera.getMicrophonePermissionStatus(),
-         children: [
+  ]);
-           {
+  let rootName = "Splash";
-             component: {
+  if (cameraPermission === "authorized" && microphonePermission === "authorized") {
-               name: 'Splash'
+    rootName = "Home";
-             }
+  }
-           }
+
-         ]
+  Navigation.setRoot({
-       }
+    root: {
-     }
+      stack: {
+        children: [
+          {
+            component: {
+              name: rootName
+            }
+          }
+        ]
+      }
+    }
   });
 });

example/ios/VisionCameraExample/Images.xcassets/Contents.json

@@ -1,6 +1,6 @@
 {
   "info" : {
-    "version" : 1,
+    "author" : "xcode",
-    "author" : "xcode"
+    "version" : 1
   }
 }

example/ios/VisionCameraExample/Images.xcassets/shutter.imageset/Contents.json

@@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "IMG_7966.jpg",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "IMG_7966-1.jpg",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "IMG_7966-2.jpg",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}

example/ios/VisionCameraExample/LaunchScreen.storyboard

@@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
     <device id="retina4_7" orientation="portrait" appearance="light"/>
     <dependencies>
         <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
         <capability name="Safe area layout guides" minToolsVersion="9.0"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
@@ -16,43 +16,28 @@
                         <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                         <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                         <subviews>
-                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="obG-Y5-kRd">
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="shutter" translatesAutoresizingMaskIntoConstraints="NO" id="1ec-Ah-Cuv">
-                                <rect key="frame" x="0.0" y="647" width="375" height="0.0"/>
+                                <rect key="frame" x="148.5" y="574" width="78" height="78"/>
-                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
+                                <constraints>
-                                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                                    <constraint firstAttribute="width" constant="78" id="IpA-9U-XI8"/>
-                                <nil key="highlightedColor"/>
+                                    <constraint firstAttribute="height" constant="78" id="vyL-X3-jiF"/>
-                            </label>
+                                </constraints>
-                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="react-native-vision-camera-example" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="GJd-Yh-RWb">
+                            </imageView>
-                                <rect key="frame" x="0.0" y="202" width="375" height="43"/>
-                                <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
-                                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                <nil key="highlightedColor"/>
-                            </label>
-                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Powered by React Native" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="MN2-I3-ftu">
-                                <rect key="frame" x="0.0" y="626" width="375" height="21"/>
-                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
-                                <nil key="highlightedColor"/>
-                            </label>
                         </subviews>
-                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                        <constraints>
-                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="obG-Y5-kRd" secondAttribute="centerX" id="5cz-MP-9tL"/>
-                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="bottom" secondItem="MN2-I3-ftu" secondAttribute="bottom" constant="20" id="OZV-Vh-mqD"/>
-                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="GJd-Yh-RWb" secondAttribute="centerX" id="Q3B-4B-g5h"/>
-                            <constraint firstItem="obG-Y5-kRd" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" symbolic="YES" id="SfN-ll-jLj"/>
-                            <constraint firstAttribute="bottom" secondItem="obG-Y5-kRd" secondAttribute="bottom" constant="20" id="Y44-ml-fuU"/>
-                            <constraint firstItem="MN2-I3-ftu" firstAttribute="centerX" secondItem="Bcu-3y-fUS" secondAttribute="centerX" id="akx-eg-2ui"/>
-                            <constraint firstItem="MN2-I3-ftu" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" id="i1E-0Y-4RG"/>
-                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="bottom" multiplier="1/3" constant="1" id="moa-c2-u7t"/>
-                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" symbolic="YES" id="x7j-FC-K8j"/>
-                        </constraints>
                         <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
+                        <color key="backgroundColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                        <constraints>
+                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="bottom" secondItem="1ec-Ah-Cuv" secondAttribute="bottom" constant="15" id="4jH-AB-6EI"/>
+                            <constraint firstItem="1ec-Ah-Cuv" firstAttribute="centerX" secondItem="Bcu-3y-fUS" secondAttribute="centerX" id="qMB-15-ipd"/>
+                        </constraints>
                     </view>
                 </viewController>
                 <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
             </objects>
-            <point key="canvasLocation" x="52.173913043478265" y="375"/>
+            <point key="canvasLocation" x="52" y="374.66266866566718"/>
         </scene>
     </scenes>
+    <resources>
+        <image name="shutter" width="60" height="60"/>
+    </resources>
 </document>

example/src/App.tsx

@@ -282,7 +282,6 @@ export const App: NavigationFunctionComponent = ({ componentId }) => {
         style={styles.captureButton}
         camera={camera}
         onMediaCaptured={onMediaCaptured}
-        maximumVideoDuration={15}
         cameraZoom={zoom}
         flash={supportsFlash ? flash : "off"}
         enabled={isCameraInitialized && isActive}

example/src/views/CaptureButton.tsx

@@ -24,9 +24,10 @@ import { CAPTURE_BUTTON_SIZE, SCREEN_HEIGHT, SCREEN_WIDTH, USE_SNAPSHOT_ON_ANDRO
 const PAN_GESTURE_HANDLER_FAIL_X = [-SCREEN_WIDTH, SCREEN_WIDTH];
 const PAN_GESTURE_HANDLER_ACTIVE_Y = [-2, 2];
 
-const IS_ANDROID = Platform.OS === "android"
+const IS_ANDROID = Platform.OS === "android";
 
 const START_RECORDING_DELAY = 200;
+const BORDER_WIDTH = CAPTURE_BUTTON_SIZE * 0.1;
 
 interface Props extends ViewProps {
   camera: React.RefObject<Camera>;
@@ -79,8 +80,8 @@ const _CaptureButton: React.FC<Props> = ({
       // capture rate at the cost of greatly reduced quality.
       const photoMethod =
         USE_SNAPSHOT_ON_ANDROID &&
-        IS_ANDROID &&
+          IS_ANDROID &&
-        takePhotoOptions.flash === "off"
+          takePhotoOptions.flash === "off"
           ? "snapshot"
           : "photo";
       console.log(`Taking ${photoMethod}...`);
@@ -251,8 +252,8 @@ const _CaptureButton: React.FC<Props> = ({
     () => ({
       transform: [
         {
-          scale: withSpring(isPressingButton.value ? 1.1 : 1, {
+          scale: withSpring(isPressingButton.value ? 1 : 0, {
-            mass: 0.5,
+            mass: 1,
             damping: 35,
             stiffness: 300,
           }),
@@ -262,23 +263,29 @@ const _CaptureButton: React.FC<Props> = ({
     [isPressingButton]
   );
   const buttonStyle = useAnimatedStyle(
-    () => ({
+    () => {
-      opacity: withTiming(enabled ? 1 : 0.3, {
+      return ({
-        duration: 100,
+        opacity: withTiming(enabled ? 1 : 0.3, {
-        easing: Easing.linear,
+          duration: 100,
-      }),
+          easing: Easing.linear,
-      transform: [
+        }),
-        {
+        transform: [
-          scale: withSpring(
+          {
-            enabled ? (isPressingButton.value ? 1 : 0.9) : 0.6,
+            scale: withSpring(
-            {
+              enabled
-              stiffness: 500,
+                ? isPressingButton.value
-              damping: 300,
+                  ? 1
-            }
+                  : 0.9
-          ),
+                : 0.6,
-        },
+              {
-      ],
+                stiffness: 500,
-    }),
+                damping: 300,
+              }
+            ),
+          },
+        ],
+      })
+    },
     [enabled, isPressingButton]
   );
 
@@ -319,14 +326,13 @@ const styles = StyleSheet.create({
     width: CAPTURE_BUTTON_SIZE,
     height: CAPTURE_BUTTON_SIZE,
     borderRadius: CAPTURE_BUTTON_SIZE / 2,
-    borderWidth: 3,
+    backgroundColor: "#e34077",
-    borderColor: "rgba(225, 48, 108, 0.7)",
   },
   button: {
     width: CAPTURE_BUTTON_SIZE,
     height: CAPTURE_BUTTON_SIZE,
     borderRadius: CAPTURE_BUTTON_SIZE / 2,
-    borderWidth: CAPTURE_BUTTON_SIZE * 0.1,
+    borderWidth: BORDER_WIDTH,
     borderColor: "white",
   },
 });