Phecda / NGPlay

Go to a project
Toggle navigation Toggle navigation pinning
Phecda
d9f6a568 1 parent 48835ff7

feat: add RNCamera 

add RNCamera module and fix a bug on iOS which lead to crash. See react-native #28583, #28545
Expand all
Inline Side-by-side
Showing 15 changed files with 424 additions and 50 deletions
... ... @@ -135,6 +135,8 @@ android {
targetSdkVersion rootProject.ext.targetSdkVersion
versionCode 1
versionName "1.0"
missingDimensionStrategy 'react-native-camera', 'general'
multiDexEnabled true
}
splits {
abi {
... ...
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.ngplay">
<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.ngplay">
<uses-permission android:name="android.permission.INTERNET" />
<application
android:name=".MainApplication"
android:label="@string/app_name"
android:icon="@mipmap/ic_launcher"
android:roundIcon="@mipmap/ic_launcher_round"
android:allowBackup="false"
android:theme="@style/AppTheme">
<activity
android:name=".MainActivity"
android:label="@string/app_name"
android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
android:launchMode="singleTask"
android:windowSoftInputMode="adjustResize">
<!-- 🚨 Permissioins start 🚨 -->
<!-- <uses-permission android:name="android.permission.ACCEPT_HANDOVER" />-->
<!-- <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />-->
<!-- <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />-->
<!-- <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />-->
<!-- <uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />-->
<!-- <uses-permission android:name="android.permission.ANSWER_PHONE_CALLS" />-->
<!-- <uses-permission android:name="android.permission.BODY_SENSORS" />-->
<!-- <uses-permission android:name="android.permission.CALL_PHONE" />-->
<uses-permission android:name="android.permission.CAMERA" />
<!-- <uses-permission android:name="android.permission.GET_ACCOUNTS" />-->
<!-- <uses-permission android:name="android.permission.PROCESS_OUTGOING_CALLS" />-->
<!-- <uses-permission android:name="android.permission.READ_CALENDAR" />-->
<!-- <uses-permission android:name="android.permission.READ_CALL_LOG" />-->
<!-- <uses-permission android:name="android.permission.READ_CONTACTS" />-->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<!-- <uses-permission android:name="android.permission.READ_PHONE_NUMBERS" />-->
<!-- <uses-permission android:name="android.permission.READ_PHONE_STATE" />-->
<!-- <uses-permission android:name="android.permission.READ_SMS" />-->
<!-- <uses-permission android:name="android.permission.RECEIVE_MMS" />-->
<!-- <uses-permission android:name="android.permission.RECEIVE_SMS" />-->
<!-- <uses-permission android:name="android.permission.RECEIVE_WAP_PUSH" />-->
<!-- <uses-permission android:name="android.permission.RECORD_AUDIO" />-->
<!-- <uses-permission android:name="android.permission.SEND_SMS" />-->
<!-- <uses-permission android:name="android.permission.USE_SIP" />-->
<!-- <uses-permission android:name="android.permission.WRITE_CALENDAR" />-->
<!-- <uses-permission android:name="android.permission.WRITE_CALL_LOG" />-->
<!-- <uses-permission android:name="android.permission.WRITE_CONTACTS" />-->
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<!-- … -->
<application android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:roundIcon="@mipmap/ic_launcher_round" android:allowBackup="false" android:theme="@style/AppTheme">
<activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
... ...
This diff is collapsed. Click to expand it.
... ... @@ -37,8 +37,14 @@
</dict>
</dict>
</dict>
<key>NSCameraUsageDescription</key>
<string>Use your camera to take a photo or scan codes</string>
<key>NSLocationWhenInUseUsageDescription</key>
<string></string>
<string>Use your location to check security</string>
<key>NSPhotoLibraryAddUsageDescription</key>
<string>Add photos to your photo library</string>
<key>NSPhotoLibraryUsageDescription</key>
<string>Read images from your photo library to set a avatar or scan codes</string>
<key>UIAppFonts</key>
<array>
<string>AntDesign.ttf</string>
... ...
... ... @@ -2,7 +2,7 @@ platform :ios, '9.0'
require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
def add_flipper_pods!
version = '~> 0.33.1'
version = '~> 0.37.0'
pod 'FlipperKit', version, :configuration => 'Debug'
pod 'FlipperKit/FlipperKitLayoutPlugin', version, :configuration => 'Debug'
pod 'FlipperKit/SKIOSNetworkPlugin', version, :configuration => 'Debug'
... ... @@ -54,6 +54,27 @@ target 'NGPlay' do
pod 'glog', :podspec => '../node_modules/react-native/third-party-podspecs/glog.podspec'
pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
# RNPermission start
permissions_path = '../node_modules/react-native-permissions/ios'
# pod 'Permission-BluetoothPeripheral', :path => "#{permissions_path}/BluetoothPeripheral.podspec"
# pod 'Permission-Calendars', :path => "#{permissions_path}/Calendars.podspec"
pod 'Permission-Camera', :path => "#{permissions_path}/Camera.podspec"
# pod 'Permission-Contacts', :path => "#{permissions_path}/Contacts.podspec"
# pod 'Permission-FaceID', :path => "#{permissions_path}/FaceID.podspec"
# pod 'Permission-LocationAlways', :path => "#{permissions_path}/LocationAlways.podspec"
pod 'Permission-LocationWhenInUse', :path => "#{permissions_path}/LocationWhenInUse.podspec"
# pod 'Permission-MediaLibrary', :path => "#{permissions_path}/MediaLibrary.podspec"
# pod 'Permission-Microphone', :path => "#{permissions_path}/Microphone.podspec"
# pod 'Permission-Motion', :path => "#{permissions_path}/Motion.podspec"
# pod 'Permission-Notifications', :path => "#{permissions_path}/Notifications.podspec"
pod 'Permission-PhotoLibrary', :path => "#{permissions_path}/PhotoLibrary.podspec"
# pod 'Permission-Reminders', :path => "#{permissions_path}/Reminders.podspec"
# pod 'Permission-Siri', :path => "#{permissions_path}/Siri.podspec"
# pod 'Permission-SpeechRecognition', :path => "#{permissions_path}/SpeechRecognition.podspec"
# pod 'Permission-StoreKit', :path => "#{permissions_path}/StoreKit.podspec"
# RNPermission end
target 'NGPlayTests' do
inherit! :complete
# Pods for testing
... ...
... ... @@ -11,11 +11,11 @@ PODS:
- React-Core (= 0.62.1)
- React-jsi (= 0.62.1)
- ReactCommon/turbomodule/core (= 0.62.1)
- Flipper (0.33.1):
- Flipper-Folly (~> 2.1)
- Flipper-RSocket (~> 1.0)
- Flipper (0.37.0):
- Flipper-Folly (~> 2.2)
- Flipper-RSocket (~> 1.1)
- Flipper-DoubleConversion (1.1.7)
- Flipper-Folly (2.1.1):
- Flipper-Folly (2.2.0):
- boost-for-react-native
- CocoaLibEvent (~> 1.0)
- Flipper-DoubleConversion
... ... @@ -23,38 +23,38 @@ PODS:
- OpenSSL-Universal (= 1.0.2.19)
- Flipper-Glog (0.3.6)
- Flipper-PeerTalk (0.0.4)
- Flipper-RSocket (1.0.0):
- Flipper-Folly (~> 2.0)
- FlipperKit (0.33.1):
- FlipperKit/Core (= 0.33.1)
- FlipperKit/Core (0.33.1):
- Flipper (~> 0.33.1)
- Flipper-RSocket (1.1.0):
- Flipper-Folly (~> 2.2)
- FlipperKit (0.37.0):
- FlipperKit/Core (= 0.37.0)
- FlipperKit/Core (0.37.0):
- Flipper (~> 0.37.0)
- FlipperKit/CppBridge
- FlipperKit/FBCxxFollyDynamicConvert
- FlipperKit/FBDefines
- FlipperKit/FKPortForwarding
- FlipperKit/CppBridge (0.33.1):
- Flipper (~> 0.33.1)
- FlipperKit/FBCxxFollyDynamicConvert (0.33.1):
- Flipper-Folly (~> 2.1)
- FlipperKit/FBDefines (0.33.1)
- FlipperKit/FKPortForwarding (0.33.1):
- FlipperKit/CppBridge (0.37.0):
- Flipper (~> 0.37.0)
- FlipperKit/FBCxxFollyDynamicConvert (0.37.0):
- Flipper-Folly (~> 2.2)
- FlipperKit/FBDefines (0.37.0)
- FlipperKit/FKPortForwarding (0.37.0):
- CocoaAsyncSocket (~> 7.6)
- Flipper-PeerTalk (~> 0.0.4)
- FlipperKit/FlipperKitHighlightOverlay (0.33.1)
- FlipperKit/FlipperKitLayoutPlugin (0.33.1):
- FlipperKit/FlipperKitHighlightOverlay (0.37.0)
- FlipperKit/FlipperKitLayoutPlugin (0.37.0):
- FlipperKit/Core
- FlipperKit/FlipperKitHighlightOverlay
- FlipperKit/FlipperKitLayoutTextSearchable
- YogaKit (~> 1.18)
- FlipperKit/FlipperKitLayoutTextSearchable (0.33.1)
- FlipperKit/FlipperKitNetworkPlugin (0.33.1):
- FlipperKit/FlipperKitLayoutTextSearchable (0.37.0)
- FlipperKit/FlipperKitNetworkPlugin (0.37.0):
- FlipperKit/Core
- FlipperKit/FlipperKitReactPlugin (0.33.1):
- FlipperKit/FlipperKitReactPlugin (0.37.0):
- FlipperKit/Core
- FlipperKit/FlipperKitUserDefaultsPlugin (0.33.1):
- FlipperKit/FlipperKitUserDefaultsPlugin (0.37.0):
- FlipperKit/Core
- FlipperKit/SKIOSNetworkPlugin (0.33.1):
- FlipperKit/SKIOSNetworkPlugin (0.37.0):
- FlipperKit/Core
- FlipperKit/FlipperKitNetworkPlugin
- Folly (2018.10.22.00):
... ... @@ -70,6 +70,12 @@ PODS:
- OpenSSL-Universal (1.0.2.19):
- OpenSSL-Universal/Static (= 1.0.2.19)
- OpenSSL-Universal/Static (1.0.2.19)
- Permission-Camera (2.1.2):
- RNPermissions
- Permission-LocationWhenInUse (2.1.2):
- RNPermissions
- Permission-PhotoLibrary (2.1.2):
- RNPermissions
- RCTRequired (0.62.1)
- RCTTypeSafety (0.62.1):
- FBLazyVector (= 0.62.1)
... ... @@ -233,6 +239,14 @@ PODS:
- React-cxxreact (= 0.62.1)
- React-jsi (= 0.62.1)
- React-jsinspector (0.62.1)
- react-native-camera (3.23.1):
- React
- react-native-camera/RCT (= 3.23.1)
- react-native-camera/RN (= 3.23.1)
- react-native-camera/RCT (3.23.1):
- React
- react-native-camera/RN (3.23.1):
- React
- react-native-netinfo (5.7.1):
- React
- react-native-safe-area-context (0.7.3):
... ... @@ -310,6 +324,8 @@ PODS:
- React
- RNLocalize (1.4.0):
- React
- RNPermissions (2.1.2):
- React
- RNReanimated (1.7.1):
- React
- RNScreens (2.4.0):
... ... @@ -324,13 +340,16 @@ DEPENDENCIES:
- DoubleConversion (from `../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec`)
- FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`)
- FBReactNativeSpec (from `../node_modules/react-native/Libraries/FBReactNativeSpec`)
- FlipperKit (~> 0.33.1)
- FlipperKit/FlipperKitLayoutPlugin (~> 0.33.1)
- FlipperKit/FlipperKitReactPlugin (~> 0.33.1)
- FlipperKit/FlipperKitUserDefaultsPlugin (~> 0.33.1)
- FlipperKit/SKIOSNetworkPlugin (~> 0.33.1)
- FlipperKit (~> 0.37.0)
- FlipperKit/FlipperKitLayoutPlugin (~> 0.37.0)
- FlipperKit/FlipperKitReactPlugin (~> 0.37.0)
- FlipperKit/FlipperKitUserDefaultsPlugin (~> 0.37.0)
- FlipperKit/SKIOSNetworkPlugin (~> 0.37.0)
- Folly (from `../node_modules/react-native/third-party-podspecs/Folly.podspec`)
- glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
- Permission-Camera (from `../node_modules/react-native-permissions/ios/Camera.podspec`)
- Permission-LocationWhenInUse (from `../node_modules/react-native-permissions/ios/LocationWhenInUse.podspec`)
- Permission-PhotoLibrary (from `../node_modules/react-native-permissions/ios/PhotoLibrary.podspec`)
- RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
- RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
- React (from `../node_modules/react-native/`)
... ... @@ -342,6 +361,7 @@ DEPENDENCIES:
- React-jsi (from `../node_modules/react-native/ReactCommon/jsi`)
- React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`)
- React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
- react-native-camera (from `../node_modules/react-native-camera`)
- "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
- react-native-webview (from `../node_modules/react-native-webview`)
... ... @@ -362,6 +382,7 @@ DEPENDENCIES:
- RNDeviceInfo (from `../node_modules/react-native-device-info`)
- RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
- RNLocalize (from `../node_modules/react-native-localize`)
- RNPermissions (from `../node_modules/react-native-permissions`)
- RNReanimated (from `../node_modules/react-native-reanimated`)
- RNScreens (from `../node_modules/react-native-screens`)
- RNVectorIcons (from `../node_modules/react-native-vector-icons`)
... ... @@ -393,6 +414,12 @@ EXTERNAL SOURCES:
:podspec: "../node_modules/react-native/third-party-podspecs/Folly.podspec"
glog:
:podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
Permission-Camera:
:path: "../node_modules/react-native-permissions/ios/Camera.podspec"
Permission-LocationWhenInUse:
:path: "../node_modules/react-native-permissions/ios/LocationWhenInUse.podspec"
Permission-PhotoLibrary:
:path: "../node_modules/react-native-permissions/ios/PhotoLibrary.podspec"
RCTRequired:
:path: "../node_modules/react-native/Libraries/RCTRequired"
RCTTypeSafety:
... ... @@ -411,6 +438,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native/ReactCommon/jsiexecutor"
React-jsinspector:
:path: "../node_modules/react-native/ReactCommon/jsinspector"
react-native-camera:
:path: "../node_modules/react-native-camera"
react-native-netinfo:
:path: "../node_modules/@react-native-community/netinfo"
react-native-safe-area-context:
... ... @@ -449,6 +478,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native-gesture-handler"
RNLocalize:
:path: "../node_modules/react-native-localize"
RNPermissions:
:path: "../node_modules/react-native-permissions"
RNReanimated:
:path: "../node_modules/react-native-reanimated"
RNScreens:
... ... @@ -465,16 +496,19 @@ SPEC CHECKSUMS:
DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
FBLazyVector: 95ee3e58937a6052f86b0e32f142388c22fa22c5
FBReactNativeSpec: 26dd6459299e48cd64eb397c45635e466dba9f45
Flipper: 6c1f484f9a88d30ab3e272800d53688439e50f69
Flipper: 1670db365568191bd123a0c905b834e77ba9e3d3
Flipper-DoubleConversion: 38631e41ef4f9b12861c67d17cb5518d06badc41
Flipper-Folly: 2de3d03e0acc7064d5e4ed9f730e2f217486f162
Flipper-Folly: c12092ea368353b58e992843a990a3225d4533c3
Flipper-Glog: 1dfd6abf1e922806c52ceb8701a3599a79a200a6
Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9
Flipper-RSocket: 1260a31c05c238eabfa9bb8a64e3983049048371
FlipperKit: 6dc9b8f4ef60d9e5ded7f0264db299c91f18832e
Flipper-RSocket: 64e7431a55835eb953b0bf984ef3b90ae9fdddd7
FlipperKit: afd4259ef9eadeeb2d30250b37d95cb3b6b97a69
Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
glog: 1f3da668190260b06b429bb211bfbee5cd790c28
OpenSSL-Universal: 8b48cc0d10c1b2923617dfe5c178aa9ed2689355
Permission-Camera: ebdba00e6926aface672cc547b19fa317c3d956e
Permission-LocationWhenInUse: cfd0d39a1c8ab2e9aeb0a1460800f85f74705404
Permission-PhotoLibrary: e29736d903e867d278747eb30951528303425f64
RCTRequired: e291538a455f5ad1afc2139a4288990be0cadd46
RCTTypeSafety: 8b6237185765dd9a03a3647807e08864105b1f95
React: 7b33e15fab929c47ac9c3c94c409258b13cfe452
... ... @@ -484,6 +518,7 @@ SPEC CHECKSUMS:
React-jsi: 600d8e42510c3254fd2abd702f4b9d3f598d8f52
React-jsiexecutor: e9698dee4fd43ceb44832baf15d5745f455b0157
React-jsinspector: f74a62727e5604119abd4a1eda52c0a12144bcd5
react-native-camera: 1b52abea404d04e040edb3e74b7c5523c01a3089
react-native-netinfo: 4fa023c153d582aeae8435df95c9a975c5986449
react-native-safe-area-context: e200d4433aba6b7e60b52da5f37af11f7a0b0392
react-native-webview: 0633fd7861a9bd7a80bacaee7da763c3afc248fa
... ... @@ -503,12 +538,13 @@ SPEC CHECKSUMS:
RNDeviceInfo: 6a3d16fce033f6979c4a6a41e62244d183e8c765
RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
RNLocalize: b6df30cc25ae736d37874f9bce13351db2f56796
RNPermissions: a96580116f7894146552e92b000ac30bf1661947
RNReanimated: 4e102df74a9674fa943e05f97f3362b6e44d0b48
RNScreens: b5c0e1b2b04512919e78bd3898e144a157ce2363
RNVectorIcons: 0bb4def82230be1333ddaeee9fcba45f0b288ed4
Yoga: 50fb6eb13d2152e7363293ff603385db380815b1
YogaKit: f782866e155069a2cca2517aafea43200b01fd5a
PODFILE CHECKSUM: be6f1c915e19e27904229555c28ac7d81a2caf5a
PODFILE CHECKSUM: e597d8e8194d3baf3ffcf09c60685a36eaabf88f
COCOAPODS: 1.9.1
... ...
/*
InfoPlist.strings
NGPlay
Created by Phecda on 2020/4/16.
*/
"NSCameraUsageDescription" = "Use your camera to take a photo or scan codes";
"NSLocationWhenInUseUsageDescription" = "Use your location to check security";
"NSPhotoLibraryAddUsageDescription" = "Add photos to your photo library";
"NSPhotoLibraryUsageDescription" = "Read images from your photo library to set a avatar or scan codes";
... ...
/*
InfoPlist.strings
NGPlay
Created by Phecda on 2020/4/16.
*/
"NSCameraUsageDescription" = "拍照或扫码功能需要使用相机";
"NSLocationWhenInUseUsageDescription" = "为保证安全，需要定位";
"NSPhotoLibraryAddUsageDescription" = "向照片图库中添加照片";
"NSPhotoLibraryUsageDescription" = "诸如扫码、设置头像等功能需要从照片图库中读取图片";
... ...
... ... @@ -25,11 +25,13 @@
"immer": "^6.0.3",
"react": "16.11.0",
"react-native": "0.62.1",
"react-native-camera": "^3.23.1",
"react-native-dark-mode": "^0.2.2",
"react-native-device-info": "^5.5.4",
"react-native-elements": "^1.2.7",
"react-native-gesture-handler": "^1.6.1",
"react-native-localize": "^1.4.0",
"react-native-permissions": "^2.1.2",
"react-native-progress": "^4.1.2",
"react-native-reanimated": "^1.7.1",
"react-native-safe-area-context": "^0.7.3",
... ...
... ... @@ -41,6 +41,7 @@ export const ListItem = ({
subtitleStyle,
rightTitleStyle,
rightSubtitleStyle,
chevron,
...props
}: ListItemProps) => {
const styles = useDynamicStyleSheet(dynamicStyles);
... ... @@ -51,6 +52,7 @@ export const ListItem = ({
subtitleStyle={[styles.subtitleStyle, subtitleStyle]}
rightTitleStyle={[styles.rightTitleStyle, rightTitleStyle]}
rightSubtitleStyle={[styles.rightSubtitleStyle, rightSubtitleStyle]}
chevron={chevron ?? !!props.onPress}
{...props}
/>
);
... ...
... ... @@ -20,6 +20,7 @@ import WebviewScreen from './WebviewScreen';
import { Platform } from 'react-native';
import RNLocalize from './RNLocalize';
import { useI18nStrings } from '../i18n';
import CameraScreen from './CameraScreen';
const MainTab = createBottomTabNavigator<MainTabParamList>();
... ... @@ -111,6 +112,7 @@ const Container = () => {
})}
/>
<MainStack.Screen name="RNLocalize" component={RNLocalize} />
<MainStack.Screen name="RNCamera" component={CameraScreen} />
</MainStack.Navigator>
</NavigationContainer>
);
... ...
import React, { useRef, useCallback, useState } from 'react';
import {
RNCamera,
TakePictureResponse,
RNCameraProps,
} from 'react-native-camera';
import { BGScroll, ListItem, Card, Divider } from '../component/View';
import { useSwitch, useToggle } from '@huse/boolean';
import {
Image,
useWindowDimensions,
View,
SafeAreaView,
ActivityIndicator,
Modal,
} from 'react-native';
import { Icon } from 'react-native-elements';
import {
DynamicStyleSheet,
useDynamicStyleSheet,
} from 'react-native-dark-mode';
import { colorPreset } from '../design';
const dynamicStyles = new DynamicStyleSheet({
cameraContainerPortrait: {
flex: 1,
backgroundColor: colorPreset.backgroundColor.primary,
},
topBar: { flex: 0.5 },
bottomBar: {
justifyContent: 'space-evenly',
alignItems: 'center',
flex: 1,
},
loadingButton: {
width: 52,
height: 52,
borderRadius: 28,
backgroundColor: 'white',
margin: 7,
justifyContent: 'center',
alignItems: 'center',
},
photoResult: {
flex: 1,
height: 240,
resizeMode: 'contain',
margin: 16,
},
});
const CameraModal = ({
visible,
onCancel,
onTakenPicture,
}: {
onCancel: () => void;
visible: boolean;
onTakenPicture: (picture: TakePictureResponse) => void;
}) => {
const styles = useDynamicStyleSheet(dynamicStyles);
const camera = useRef<RNCamera>(null);
const [loading, toggleLoading] = useToggle(false);
const [isBackCamera, toggleCameraType] = useToggle(true);
const { width, height } = useWindowDimensions();
const inPortrait = width <= height;
const previewDimension = inPortrait
? { width, height: (width * 4) / 3 }
: { height, width: (height * 4) / 3 };
const bottomDirection = inPortrait ? 'row' : 'column';
const containerDirection = inPortrait ? 'column' : 'row';
const onShot = useCallback(async () => {
if (camera.current) {
toggleLoading();
const result = await camera.current.takePictureAsync({
base64: true,
quality: 0.8,
pauseAfterCapture: true,
doNotSave: true,
});
toggleLoading();
onTakenPicture(result);
}
}, [onTakenPicture, toggleLoading]);
return (
<Modal visible={visible} onRequestClose={onCancel} animationType="slide">
<View
style={[
styles.cameraContainerPortrait,
{ flexDirection: containerDirection },
]}
>
<SafeAreaView style={styles.topBar} />
<RNCamera
ref={camera}
type={isBackCamera ? 'back' : 'front'}
style={previewDimension}
captureAudio={false}
/>
<SafeAreaView
style={[
styles.bottomBar,
{
flexDirection: bottomDirection,
},
]}
>
<Icon name="close" raised onPress={onCancel} />
{loading ? (
<View style={styles.loadingButton}>
<ActivityIndicator />
</View>
) : (
<Icon name="camera" raised onPress={onShot} />
)}
<Icon
type="ionicon"
name="ios-reverse-camera"
raised
onPress={toggleCameraType}
/>
</SafeAreaView>
</View>
</Modal>
);
};
type ParamsOf<T extends (...args: any[]) => any> = T extends (
...args: infer U
) => any
? U
: never;
const Scanner = ({
visible,
onCancel,
onScanCode,
}: {
visible: boolean;
onCancel: () => void;
onScanCode: (
...args: ParamsOf<Required<RNCameraProps>['onBarCodeRead']>
) => void;
}) => {
const styles = useDynamicStyleSheet(dynamicStyles);
const camera = useRef<RNCamera>(null);
const { width, height } = useWindowDimensions();
const inPortrait = width <= height;
const previewDimension = inPortrait
? { width, height: (width * 4) / 3 }
: { height, width: (height * 4) / 3 };
const bottomDirection = inPortrait ? 'row' : 'column';
const containerDirection = inPortrait ? 'column' : 'row';
return (
<Modal visible={visible} onRequestClose={onCancel} animationType="slide">
<View
style={[
styles.cameraContainerPortrait,
{ flexDirection: containerDirection },
]}
>
<SafeAreaView style={styles.topBar} />
<RNCamera
ref={camera}
style={previewDimension}
captureAudio={false}
onBarCodeRead={onScanCode}
/>
<SafeAreaView
style={[
styles.bottomBar,
{
flexDirection: bottomDirection,
},
]}
>
<Icon name="close" raised onPress={onCancel} />
</SafeAreaView>
</View>
</Modal>
);
};
const CameraScreen = () => {
const styles = useDynamicStyleSheet(dynamicStyles);
const [cameraVisible, openCamera, closeCamera] = useSwitch(false);
const [scannerVisible, openScanner, closeScanner] = useSwitch(false);
const [tempPicture, setTempPicture] = useState<TakePictureResponse>();
const [codeData, setCodeData] = useState<string>();
const [codeType, setCodeType] = useState<string>();
return (
<>
<BGScroll>
<Card round>
<ListItem title="Camera Modal" onPress={openCamera} />
{tempPicture && <Divider />}
{tempPicture && (
<Image
style={styles.photoResult}
source={{
uri: `data:image/jpeg;base64,${tempPicture.base64}`,
}}
/>
)}
</Card>
<Card round>
<ListItem title="Scanner Modal" onPress={openScanner} />
<Divider />
<ListItem title="data" rightTitle={codeData} />
<Divider />
<ListItem title="type" rightTitle={codeType} />
</Card>
</BGScroll>
<CameraModal
visible={cameraVisible}
onTakenPicture={(picture) => {
setTempPicture(picture);
closeCamera();
}}
onCancel={closeCamera}
/>
<Scanner
visible={scannerVisible}
onCancel={closeScanner}
onScanCode={(e) => {
setCodeData(e.data);
setCodeType(e.type);
closeScanner();
}}
/>
</>
);
};
export default CameraScreen;
... ...
... ... @@ -84,6 +84,12 @@ const SystemInfo = ({
rightTitle={strings.name}
chevron
/>
<Divider />
<ListItem
title={'Camera'}
onPress={() => navigation.navigate('RNCamera')}
chevron
/>
</Card>
</BGScroll>
);
... ...
... ... @@ -12,6 +12,7 @@ export type MainStackParamList = {
RNDeviceInfoList: undefined;
WebviewScreen: { uri: string } | undefined;
RNLocalize: undefined;
RNCamera: undefined;
};
export type MainTabScreenProps<RouteName extends keyof MainTabParamList> = {
... ...
... ... @@ -6880,6 +6880,13 @@ react-is@^16.12.0, react-is@^16.13.0, react-is@^16.7.0, react-is@^16.8.1, react-
resolved "https://registry.npm.taobao.org/react-is/download/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
integrity sha1-eJcppNw23imZ3BVt1sHZwYzqVqQ=
react-native-camera@^3.23.1:
version "3.23.1"
resolved "https://registry.npm.taobao.org/react-native-camera/download/react-native-camera-3.23.1.tgz#fb6fe52f8a357852de6dcd81d0d187cd632dc7dd"
integrity sha1-+2/lL4o1eFLebc2B0NGHzWMtx90=
dependencies:
prop-types "^15.6.2"
react-native-dark-mode@^0.2.2:
version "0.2.2"
resolved "https://registry.npm.taobao.org/react-native-dark-mode/download/react-native-dark-mode-0.2.2.tgz#4faa335e36330bfca832ba8b3d2bd84c7b880381"
... ... @@ -6930,6 +6937,11 @@ react-native-localize@^1.4.0:
resolved "https://registry.npm.taobao.org/react-native-localize/download/react-native-localize-1.4.0.tgz#4653596d066d0941c48f5404dc1c0d08b6950443"
integrity sha1-RlNZbQZtCUHEj1QE3BwNCLaVBEM=
react-native-permissions@^2.1.2:
version "2.1.2"
resolved "https://registry.npm.taobao.org/react-native-permissions/download/react-native-permissions-2.1.2.tgz#14f30a6cfa0851ecb210d7eadcc590f8823c8585"
integrity sha1-FPMKbPoIUeyyENfq3MWQ+II8hYU=
react-native-progress@^4.1.2:
version "4.1.2"
resolved "https://registry.npm.taobao.org/react-native-progress/download/react-native-progress-4.1.2.tgz#ffb2264ddfeba409c730e36a9791bb7bbe07a00d"
... ...