feat: add RNCamera

add RNCamera module and fix a bug on iOS which lead to crash. See react-native #28583, #28545

feat: add RNCamera
add RNCamera module and fix a bug on iOS which lead to crash. See react-native #28583, #28545
Phecda
Commit d9f6a56817ee67b1ad478c89dbbe9276ea781aef d9f6a568 1 parent 48835ff7
Showing 15 changed files with 424 additions and 50 deletions
android/app/build.gradle
android/app/src/main/AndroidManifest.xml
ios/NGPlay.xcodeproj/project.pbxproj
ios/NGPlay/Info.plist
ios/Podfile
ios/Podfile.lock
ios/en.lproj/InfoPlist.strings
ios/zh-Hans.lproj/InfoPlist.strings
package.json
src/component/View/list.tsx
src/screen/AppNavigationContainer.tsx
src/screen/CameraScreen.tsx
src/screen/SystemInfo.tsx
src/type/Navigation.ts
yarn.lock
--- a/android/app/build.gradle
View file @d9f6a56
+++ b/android/app/build.gradle
View file @d9f6a56
@@ -135,6 +135,8 @@ android {
         targetSdkVersion rootProject.ext.targetSdkVersion
         versionCode 1
         versionName "1.0"
+        missingDimensionStrategy 'react-native-camera', 'general'
+        multiDexEnabled true
     }
     splits {
         abi {
--- a/android/app/src/main/AndroidManifest.xml
View file @d9f6a56
+++ b/android/app/src/main/AndroidManifest.xml
View file @d9f6a56
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
+<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.ngplay">
-  package="com.ngplay">
   <uses-permission android:name="android.permission.INTERNET" />
-    <application
+  <!-- 🚨 Permissioins start 🚨 -->
-      android:name=".MainApplication"
+
-      android:label="@string/app_name"
+  <!--  <uses-permission android:name="android.permission.ACCEPT_HANDOVER" />-->
-      android:icon="@mipmap/ic_launcher"
+  <!--  <uses-permission android:name="android.permission.ACCESS_BACKGROUND_LOCATION" />-->
-      android:roundIcon="@mipmap/ic_launcher_round"
+  <!--  <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />-->
-      android:allowBackup="false"
+  <!--  <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />-->
-      android:theme="@style/AppTheme">
+  <!--  <uses-permission android:name="android.permission.ACTIVITY_RECOGNITION" />-->
-      <activity
+  <!--  <uses-permission android:name="android.permission.ANSWER_PHONE_CALLS" />-->
-        android:name=".MainActivity"
+  <!--  <uses-permission android:name="android.permission.BODY_SENSORS" />-->
-        android:label="@string/app_name"
+  <!--  <uses-permission android:name="android.permission.CALL_PHONE" />-->
-        android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
+  <uses-permission android:name="android.permission.CAMERA" />
-        android:launchMode="singleTask"
+  <!--  <uses-permission android:name="android.permission.GET_ACCOUNTS" />-->
-        android:windowSoftInputMode="adjustResize">
+  <!--  <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" />
--- a/ios/NGPlay.xcodeproj/project.pbxproj
View file @d9f6a56
+++ b/ios/NGPlay.xcodeproj/project.pbxproj
View file @d9f6a56
--- a/ios/NGPlay/Info.plist
View file @d9f6a56
+++ b/ios/NGPlay/Info.plist
View file @d9f6a56
@@ -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>
--- a/ios/Podfile
View file @d9f6a56
+++ b/ios/Podfile
View file @d9f6a56
@@ -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
--- a/ios/Podfile.lock
View file @d9f6a56
+++ b/ios/Podfile.lock
View file @d9f6a56
@@ -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 (0.37.0):
-    - Flipper-Folly (~> 2.1)
+    - Flipper-Folly (~> 2.2)
-    - Flipper-RSocket (~> 1.0)
+    - 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-RSocket (1.1.0):
-    - Flipper-Folly (~> 2.0)
+    - Flipper-Folly (~> 2.2)
-  - FlipperKit (0.33.1):
+  - FlipperKit (0.37.0):
-    - FlipperKit/Core (= 0.33.1)
+    - FlipperKit/Core (= 0.37.0)
-  - FlipperKit/Core (0.33.1):
+  - FlipperKit/Core (0.37.0):
-    - Flipper (~> 0.33.1)
+    - Flipper (~> 0.37.0)
     - FlipperKit/CppBridge
     - FlipperKit/FBCxxFollyDynamicConvert
     - FlipperKit/FBDefines
     - FlipperKit/FKPortForwarding
-  - FlipperKit/CppBridge (0.33.1):
+  - FlipperKit/CppBridge (0.37.0):
-    - Flipper (~> 0.33.1)
+    - Flipper (~> 0.37.0)
-  - FlipperKit/FBCxxFollyDynamicConvert (0.33.1):
+  - FlipperKit/FBCxxFollyDynamicConvert (0.37.0):
-    - Flipper-Folly (~> 2.1)
+    - Flipper-Folly (~> 2.2)
-  - FlipperKit/FBDefines (0.33.1)
+  - FlipperKit/FBDefines (0.37.0)
-  - FlipperKit/FKPortForwarding (0.33.1):
+  - FlipperKit/FKPortForwarding (0.37.0):
     - CocoaAsyncSocket (~> 7.6)
     - Flipper-PeerTalk (~> 0.0.4)
-  - FlipperKit/FlipperKitHighlightOverlay (0.33.1)
+  - FlipperKit/FlipperKitHighlightOverlay (0.37.0)
-  - FlipperKit/FlipperKitLayoutPlugin (0.33.1):
+  - FlipperKit/FlipperKitLayoutPlugin (0.37.0):
     - FlipperKit/Core
     - FlipperKit/FlipperKitHighlightOverlay
     - FlipperKit/FlipperKitLayoutTextSearchable
     - YogaKit (~> 1.18)
-  - FlipperKit/FlipperKitLayoutTextSearchable (0.33.1)
+  - FlipperKit/FlipperKitLayoutTextSearchable (0.37.0)
-  - FlipperKit/FlipperKitNetworkPlugin (0.33.1):
+  - 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 (~> 0.37.0)
-  - FlipperKit/FlipperKitLayoutPlugin (~> 0.33.1)
+  - FlipperKit/FlipperKitLayoutPlugin (~> 0.37.0)
-  - FlipperKit/FlipperKitReactPlugin (~> 0.33.1)
+  - FlipperKit/FlipperKitReactPlugin (~> 0.37.0)
-  - FlipperKit/FlipperKitUserDefaultsPlugin (~> 0.33.1)
+  - FlipperKit/FlipperKitUserDefaultsPlugin (~> 0.37.0)
-  - FlipperKit/SKIOSNetworkPlugin (~> 0.33.1)
+  - 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
+  Flipper-RSocket: 64e7431a55835eb953b0bf984ef3b90ae9fdddd7
-  FlipperKit: 6dc9b8f4ef60d9e5ded7f0264db299c91f18832e
+  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
--- a/ios/en.lproj/InfoPlist.strings 0 → 100644
View file @d9f6a56
+++ b/ios/en.lproj/InfoPlist.strings 0 → 100644
View file @d9f6a56
+/*
+  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";
--- a/ios/zh-Hans.lproj/InfoPlist.strings 0 → 100644
View file @d9f6a56
+++ b/ios/zh-Hans.lproj/InfoPlist.strings 0 → 100644
View file @d9f6a56
+/*
+  InfoPlist.strings
+  NGPlay
+
+  Created by Phecda on 2020/4/16.
+
+*/
+"NSCameraUsageDescription" = "拍照或扫码功能需要使用相机";
+"NSLocationWhenInUseUsageDescription" = "为保证安全，需要定位";
+"NSPhotoLibraryAddUsageDescription" = "向照片图库中添加照片";
+"NSPhotoLibraryUsageDescription" = "诸如扫码、设置头像等功能需要从照片图库中读取图片";
--- a/package.json
View file @d9f6a56
+++ b/package.json
View file @d9f6a56
@@ -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",
--- a/src/component/View/list.tsx
View file @d9f6a56
+++ b/src/component/View/list.tsx
View file @d9f6a56
@@ -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}
     />
   );
--- a/src/screen/AppNavigationContainer.tsx
View file @d9f6a56
+++ b/src/screen/AppNavigationContainer.tsx
View file @d9f6a56
@@ -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>
   );
--- a/src/screen/CameraScreen.tsx 0 → 100644
View file @d9f6a56
+++ b/src/screen/CameraScreen.tsx 0 → 100644
View file @d9f6a56
+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;
--- a/src/screen/SystemInfo.tsx
View file @d9f6a56
+++ b/src/screen/SystemInfo.tsx
View file @d9f6a56
@@ -84,6 +84,12 @@ const SystemInfo = ({
           rightTitle={strings.name}
           chevron
         />
+        <Divider />
+        <ListItem
+          title={'Camera'}
+          onPress={() => navigation.navigate('RNCamera')}
+          chevron
+        />
       </Card>
     </BGScroll>
   );
--- a/src/type/Navigation.ts
View file @d9f6a56
+++ b/src/type/Navigation.ts
View file @d9f6a56
@@ -12,6 +12,7 @@ export type MainStackParamList = {
   RNDeviceInfoList: undefined;
   WebviewScreen: { uri: string } | undefined;
   RNLocalize: undefined;
+  RNCamera: undefined;
 };
 export type MainTabScreenProps<RouteName extends keyof MainTabParamList> = {
--- a/yarn.lock
View file @d9f6a56
+++ b/yarn.lock
View file @d9f6a56
@@ -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"