Add camera qr view to replace manual invitation input

Signed-off-by: Karim Stekelenburg <karim@animo.id>

android/app/src/main/AndroidManifest.xml

@@ -6,6 +6,7 @@
     <uses-permission android:name="android.permission.RECORD_AUDIO"/>
     <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
+    <uses-permission android:name="android.permission.VIBRATE"/>
     <application
       android:name=".MainApplication"
       android:label="@string/app_name"

ios/AriesMobileAgentJavaScript/Info.plist

@@ -53,5 +53,7 @@
 	</array>
 	<key>UIViewControllerBasedStatusBarAppearance</key>
 	<false/>
+  <key>NSCameraUsageDescription</key>
+  <string>Your message to user when the camera is accessed for the first time</string>
 </dict>
 </plist>

ios/Podfile

@@ -34,6 +34,9 @@ target 'AriesMobileAgentJavaScript' 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'
 
+  permissions_path = '../node_modules/react-native-permissions/ios'
+  pod 'Permission-Camera', :path => "#{permissions_path}/Camera/Permission-Camera.podspec"
+
   pod 'react-native-camera', :path => '../node_modules/react-native-camera'
 
   target 'AriesMobileAgentJavaScriptTests' do
@@ -45,12 +48,12 @@ target 'AriesMobileAgentJavaScript' do
   use_native_modules!
 end
 
-target 'AriesMobileAgentJavaScript-tvOS' do
-  # Pods for AriesMobileAgentJavaScript-tvOS
+# target 'AriesMobileAgentJavaScript-tvOS' do
+#   # Pods for AriesMobileAgentJavaScript-tvOS
 
-  target 'AriesMobileAgentJavaScript-tvOSTests' do
-    inherit! :search_paths
-    # Pods for testing
-  end
+#   target 'AriesMobileAgentJavaScript-tvOSTests' do
+#     inherit! :search_paths
+#     # Pods for testing
+#   end
 
-end
+# end

ios/Podfile.lock

@@ -23,6 +23,8 @@ PODS:
   - lottie-react-native (3.5.0):
     - lottie-ios (~> 3.1.8)
     - React
+  - Permission-Camera (3.0.0):
+    - RNPermissions
   - RCTRequired (0.61.5)
   - RCTTypeSafety (0.61.5):
     - FBLazyVector (= 0.61.5)
@@ -237,6 +239,8 @@ PODS:
     - React
   - RNFS (2.16.6):
     - React
+  - RNPermissions (3.0.0):
+    - React-Core
   - RNScreens (2.16.1):
     - React-Core
   - RNSVG (12.1.0):
@@ -251,6 +255,7 @@ DEPENDENCIES:
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - lottie-ios (from `../node_modules/lottie-ios`)
   - lottie-react-native (from `../node_modules/lottie-react-native`)
+  - Permission-Camera (from `../node_modules/react-native-permissions/ios/Camera/Permission-Camera.podspec`)
   - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
   - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`)
   - React (from `../node_modules/react-native/`)
@@ -278,6 +283,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - rn-indy-sdk (from `../node_modules/rn-indy-sdk`)
   - RNFS (from `../node_modules/react-native-fs`)
+  - RNPermissions (from `../node_modules/react-native-permissions`)
   - RNScreens (from `../node_modules/react-native-screens`)
   - RNSVG (from `../node_modules/react-native-svg`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
@@ -301,6 +307,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/lottie-ios"
   lottie-react-native:
     :path: "../node_modules/lottie-react-native"
+  Permission-Camera:
+    :path: "../node_modules/react-native-permissions/ios/Camera/Permission-Camera.podspec"
   RCTRequired:
     :path: "../node_modules/react-native/Libraries/RCTRequired"
   RCTTypeSafety:
@@ -349,6 +357,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/rn-indy-sdk"
   RNFS:
     :path: "../node_modules/react-native-fs"
+  RNPermissions:
+    :path: "../node_modules/react-native-permissions"
   RNScreens:
     :path: "../node_modules/react-native-screens"
   RNSVG:
@@ -365,6 +375,7 @@ SPEC CHECKSUMS:
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28
   lottie-ios: 48fac6be217c76937e36e340e2d09cf7b10b7f5f
   lottie-react-native: 1fb4ce21d6ad37dab8343eaff8719df76035bd93
+  Permission-Camera: 119b01de97a5b3edb637999e38476b68143b9d17
   RCTRequired: b153add4da6e7dbc44aebf93f3cf4fcae392ddf1
   RCTTypeSafety: 9aa1b91d7f9310fc6eadc3cf95126ffe818af320
   React: b6a59ef847b2b40bb6e0180a97d0ca716969ac78
@@ -387,12 +398,13 @@ SPEC CHECKSUMS:
   React-RCTText: 9ccc88273e9a3aacff5094d2175a605efa854dbe
   React-RCTVibration: a49a1f42bf8f5acf1c3e297097517c6b3af377ad
   ReactCommon: 198c7c8d3591f975e5431bec1b0b3b581aa1c5dd
-  rn-indy-sdk: def342a0b0de8e2c78818367320beb48afe96e45
+  rn-indy-sdk: 66036f7e0e0dff2b6bf82de8fc8838e1dd656447
   RNFS: 2bd9eb49dc82fa9676382f0585b992c424cd59df
+  RNPermissions: 99dd8d4a30ff13509b949ca63cd1f69edc461775
   RNScreens: 45c457af3d2ee9e08fc01e70da87e653d46b1198
   RNSVG: ce9d996113475209013317e48b05c21ee988d42e
   Yoga: f2a7cd4280bfe2cca5a7aed98ba0eb3d1310f18b
 
-PODFILE CHECKSUM: cbec772e9cab0670df74815acfd914bf296f6f17
+PODFILE CHECKSUM: b13146217985624f08ecd71034f63e6f8e227b06
 
 COCOAPODS: 1.10.0

package.json

@@ -29,19 +29,22 @@
     "react-native-camera": "^3.40.0",
     "react-native-fs": "^2.16.6",
     "react-native-get-random-values": "^1.5.0",
+    "react-native-permissions": "^3.0.0",
     "react-native-safe-area-context": "^3.1.9",
     "react-native-screens": "^2.16.1",
     "react-native-svg": "^12.1.0",
     "react-redux": "^7.2.2",
     "redux": "^4.0.5",
-    "rn-indy-sdk": "^0.1.7"
+    "rn-indy-sdk": "file:rn-indy-sdk-v0.1.7.tgz",
+    "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@babel/core": "^7.6.2",
     "@babel/runtime": "^7.6.2",
     "@react-native-community/eslint-config": "^0.0.5",
     "@types/react": "^16.9.55",
     "@types/react-native": "^0.61.23",
+    "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^4.10.0",
     "@typescript-eslint/parser": "^4.10.0",
     "babel-jest": "^24.9.0",

src/App.tsx

@@ -1,22 +1,19 @@
 import * as eva from '@eva-design/eva'
-import { ApplicationProvider, IconRegistry } from '@ui-kitten/components'
+import { ApplicationProvider, IconRegistry, StyleService, useStyleSheet } from '@ui-kitten/components'
 import { EvaIconsPack } from '@ui-kitten/eva-icons'
 import React from 'react'
 import 'react-native-get-random-values'
-import { Provider } from 'react-redux'
+import { SafeAreaView } from 'react-native-safe-area-context'
 import { AgentProvider } from './agent/AgentProvider'
-import { store } from './redux/store'
 import { RootView } from './views/RootView'
 
 const App = (): Element => {
   return (
     <>
       <IconRegistry icons={EvaIconsPack} />
       <ApplicationProvider {...eva} theme={eva.dark}>
-        <AgentProvider agentConfig={{ mediatorUrl: 'https://a4cacc7c1d3b.ngrok.io' }}>
-          <Provider store={store}>
-            <RootView />
-          </Provider>
+        <AgentProvider agentConfig={{ mediatorUrl: 'https://573c94f0d09a.ngrok.io' }}>
+          <RootView />
         </AgentProvider>
       </ApplicationProvider>
     </>

src/views/BaseView.tsx

@@ -34,6 +34,7 @@ const themedStyles = StyleService.create({
   },
   header: {
     paddingVertical: 5,
+    marginBottom: 10,
   },
   viewTitle: {
     marginVertical: 5,

src/views/RootView.tsx

@@ -1,13 +1,23 @@
+import { StyleService, useStyleSheet } from '@ui-kitten/components'
 import React from 'react'
+import { SafeAreaView } from 'react-native-safe-area-context'
 import { useAgent } from '../agent/AgentProvider'
 import { AppNavigator } from '../components'
 import { LoaderView } from './LoaderView'
 
 const RootView: React.FC = (): React.ReactElement => {
+  const styles = useStyleSheet(themedStyles)
+
   const { loading } = useAgent()
   console.log(loading)
 
-  return <>{loading ? <LoaderView /> : <AppNavigator />}</>
+  return <SafeAreaView style={styles.safeAreaView}>{loading ? <LoaderView /> : <AppNavigator />}</SafeAreaView>
 }
+const themedStyles = StyleService.create({
+  safeAreaView: {
+    flex: 1,
+    backgroundColor: 'background-basic-color-1',
+  },
+})
 
 export { RootView }

src/views/ScanInvitationView.tsx

@@ -1,9 +1,10 @@
-import { Button, Icon, Input } from '@ui-kitten/components'
 import { decodeInvitationFromUrl } from 'aries-framework-javascript'
 import { ConnectionInvitationMessage } from 'aries-framework-javascript/build/lib/protocols/connections/ConnectionInvitationMessage'
-import React, { useState } from 'react'
-import { Keyboard, StyleSheet, TouchableWithoutFeedback, View } from 'react-native'
-import { RNCamera } from 'react-native-camera'
+import React, { useEffect, useRef, useState } from 'react'
+import { Alert, StyleSheet, View } from 'react-native'
+import { BarCodeReadEvent, BarCodeType, RNCamera } from 'react-native-camera'
+import Permissions from 'react-native-permissions'
+
 import { useAgent } from '../agent/AgentProvider'
 import { InvitationModal } from '../components'
 import { BaseView } from './BaseView'
@@ -12,11 +13,49 @@ const ScannerView = ({ navigation }): React.ReactElement => {
   const [invitationUrl, setInvitationUrl] = useState('')
   const [modalVisible, setModalVisible] = useState(false)
   const [invitationObject, setInvitationObject] = useState<ConnectionInvitationMessage | undefined>(undefined)
+  let qrScanned = false
+
+  let cameraRef = useRef(null)
   const { agent } = useAgent()
 
-  async function onScan(scanResult: any): Promise<void> {
-    console.warn(scanResult.type)
-    console.warn(scanResult.data)
+  useEffect(() => {
+    Permissions.check('ios.permission.CAMERA')
+  }, [])
+
+  async function showInvitationAlert(invite: ConnectionInvitationMessage, newInvite = false): Promise<void> {
+    Alert.alert(
+      'Connection Invitation',
+      `ID:\t\t${invite.id}\n\nEndpoint:\t\t${invite.serviceEndpoint}`,
+      [
+        {
+          text: 'Decline',
+          style: 'cancel',
+          onPress: async (): Promise<void> => await onDecline(),
+        },
+        { text: 'Accept', onPress: async (): Promise<void> => await onAccept(invite) },
+      ],
+      {
+        cancelable: true,
+      }
+    )
+  }
+
+  async function onScan(scanResult: BarCodeReadEvent): Promise<void> {
+    console.log(scanResult)
+
+    if (qrScanned === true) return
+
+    console.log('hihi')
+    qrScanned = true
+
+    if (scanResult.data === null) {
+      qrScanned = false
+      return
+    }
+
+    const invitation = await decodeInvitationFromUrl(scanResult.data)
+
+    await showInvitationAlert(invitation)
   }
 
   // try {
@@ -30,36 +69,35 @@ const ScannerView = ({ navigation }): React.ReactElement => {
   // }
   // }
 
-  async function onAccept(): Promise<void> {
-    await agent.connections.receiveInvitation(invitationObject.toJSON(), { autoAcceptConnection: true })
-    setModalVisible(false)
+  async function onAccept(invite: ConnectionInvitationMessage): Promise<void> {
+    await agent.connections.receiveInvitation(invite.toJSON(), { autoAcceptConnection: true })
     navigation.navigate('Connections')
+    qrScanned = false
   }
 
   async function onDecline(): Promise<void> {
     setModalVisible(false)
     setInvitationObject(undefined)
+    qrScanned = false
   }
 
-  let camera = null
-
   return (
     <BaseView viewTitle="Scan Invitation">
-      <View>
+      <View style={styles.container}>
         <RNCamera
           ref={ref => {
-            camera = ref
+            cameraRef = ref
+          }}
+          onBarCodeRead={(scanResult: BarCodeReadEvent): Promise<void> => onScan(scanResult)}
+          captureAudio={false}
+          androidCameraPermissionOptions={{
+            title: 'Permission to use camera',
+            message: 'We need your permission to use your camera',
+            buttonPositive: 'Ok',
+            buttonNegative: 'Cancel',
           }}
-          // defaultTouchToFocus
-          // flashMode={this.state.camera.flashMode}
-          // mirrorImage={false}
-          onBarCodeRead={scanResult => onScan(scanResult)}
-          // onFocusChanged={() => {}}
-          // onZoomChanged={() => {}}
-          permissionDialogTitle={'Permission to use camera'}
-          permissionDialogMessage={'We need your permission to use your camera phone'}
           style={styles.preview}
-          type={camera.type}
+          type="back"
         />
       </View>
       {modalVisible && (
@@ -77,7 +115,8 @@ const ScannerView = ({ navigation }): React.ReactElement => {
 const styles = StyleSheet.create({
   container: {
     flex: 1,
-    alignItems: 'center',
+    margin: 30,
+    // alignItems: 'center',
   },
   row: {
     flexDirection: 'row',