railbird/react-native-vision-camera
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add cool splashscreen

Browse Source
This commit is contained in:
Marc Rousavy 2021-02-19 19:51:59 +01:00
parent 674d9ccb8b
commit 0f50b51a1b
9 changed files with 104 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
example/index.tsx
View File

@ -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.setRoot({
root: {
stack: {
children: [
{
component: {
name: 'Splash'
}
}
]
}
}
Navigation.events().registerAppLaunchedListener(async () => {
const [cameraPermission, microphonePermission] = await Promise.all([
Camera.getCameraPermissionStatus(),
Camera.getMicrophonePermissionStatus(),
]);
let rootName = "Splash";
if (cameraPermission === "authorized" && microphonePermission === "authorized") {
rootName = "Home";
}
Navigation.setRoot({
root: {
stack: {
children: [
{
component: {
name: rootName
}
}
]
}
}
});
});

4
example/ios/VisionCameraExample/Images.xcassets/Contents.json
View File

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

23
example/ios/VisionCameraExample/Images.xcassets/shutter.imageset/Contents.json vendored Normal file
View File

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

BIN
example/ios/VisionCameraExample/Images.xcassets/shutter.imageset/IMG_7966-1.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
example/ios/VisionCameraExample/Images.xcassets/shutter.imageset/IMG_7966-2.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

BIN
example/ios/VisionCameraExample/Images.xcassets/shutter.imageset/IMG_7966.jpg vendored Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.2 KiB

51
example/ios/VisionCameraExample/LaunchScreen.storyboard
View File

@ -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">
<rect key="frame" x="0.0" y="647" width="375" height="0.0"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<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="react-native-vision-camera-example" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="GJd-Yh-RWb">
<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>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="shutter" translatesAutoresizingMaskIntoConstraints="NO" id="1ec-Ah-Cuv">
<rect key="frame" x="148.5" y="574" width="78" height="78"/>
<constraints>
<constraint firstAttribute="width" constant="78" id="IpA-9U-XI8"/>
<constraint firstAttribute="height" constant="78" id="vyL-X3-jiF"/>
</constraints>
</imageView>
</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>

1
example/src/App.tsx
View File

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

56
example/src/views/CaptureButton.tsx
View File

@ -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 &&
takePhotoOptions.flash === "off"
IS_ANDROID &&
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, {
mass: 0.5,
scale: withSpring(isPressingButton.value ? 1 : 0, {
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, {
duration: 100,
easing: Easing.linear,
}),
transform: [
{
scale: withSpring(
enabled ? (isPressingButton.value ? 1 : 0.9) : 0.6,
{
stiffness: 500,
damping: 300,
}
),
},
],
}),
() => {
return ({
opacity: withTiming(enabled ? 1 : 0.3, {
duration: 100,
easing: Easing.linear,
}),
transform: [
{
scale: withSpring(
enabled
? isPressingButton.value
? 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,
borderColor: "rgba(225, 48, 108, 0.7)",
backgroundColor: "#e34077",
},
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",
},
});