feat: added qrcode scanning, styling is still rough

client/react-native/android/app/build.gradle

@@ -152,6 +152,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-camera')
     compile project(':react-native-svg')
     compile project(':react-native-restart')
     compile project(':react-native-exception-handler')

client/react-native/android/app/src/main/AndroidManifest.xml

@@ -6,6 +6,7 @@
     <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
     <uses-permission android:name="android.permission.CAMERA" />
     <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
+    <uses-permission android:name="android.permission.VIBRATE"/>
 
     <application
         android:name=".MainApplication"

client/react-native/android/app/src/main/java/chat/berty/main/MainApplication.java

@@ -3,6 +3,7 @@
 import android.app.Application;
 
 import com.facebook.react.ReactApplication;
+import org.reactnative.camera.RNCameraPackage;
 import com.horcrux.svg.SvgPackage;
 import com.avishayil.rnrestart.ReactNativeRestartPackage;
 import com.masteratul.exceptionhandler.ReactNativeExceptionHandlerPackage;
@@ -33,6 +34,7 @@ public boolean getUseDeveloperSupport() {
         protected List<ReactPackage> getPackages() {
             return Arrays.<ReactPackage>asList(
                 new MainReactPackage(),
+            new RNCameraPackage(),
             new SvgPackage(),
             new ReactNativeRestartPackage(),
             new ReactNativeExceptionHandlerPackage(),

client/react-native/android/settings.gradle

@@ -1,4 +1,6 @@
 rootProject.name = 'Berty'
+include ':react-native-camera'
+project(':react-native-camera').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-camera/android')
 include ':react-native-svg'
 project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
 include ':react-native-restart'

client/react-native/common/components/Library/PublicKeyWithActions.js

@@ -13,6 +13,8 @@ import {
 import { marginTop, padding, rounded, textTiny } from '../../styles'
 import QRGenerator from './QRGenerator'
 import { ThemeProvider, ButtonGroup } from 'react-native-elements'
+import { parse as parseUrl } from '../../helpers/url'
+import QRReader from './QRReader'
 
 const CopyKeyButton = ({ id }) => (
   <ActionButton
@@ -142,39 +144,40 @@ export default class PublicKeyWithActions extends PureComponent {
       <ScrollView>
         <Flex.Rows style={[padding]} align='center'>
           <Flex.Cols style={{ width: 330 }}>
-            <TextInput
-              placeholder={'Contact name (optional)'}
-              onChangeText={displayName =>
-                this.setState({ contact: { ...this.state.contact, displayName } })
-              }
-              value={displayName}
-              style={[
-                {
-                  backgroundColor: colors.grey7,
-                  color: colors.black,
-                  textAlign: 'left',
-                  flex: 1,
-                  ...(Platform.OS === 'web' ? { outline: 'none' } : {}),
-                },
-                padding,
-                rounded,
-              ]}
-            />
+            {mode === 'key' || (readOnly)
+              ? <TextInput
+                placeholder={'Contact name (optional)'}
+                onChangeText={displayName =>
+                  this.setState({ contact: { ...this.state.contact, displayName } })
+                }
+                value={displayName}
+                style={[
+                  {
+                    backgroundColor: colors.grey7,
+                    color: colors.black,
+                    textAlign: 'left',
+                    flex: 1,
+                    ...(Platform.OS === 'web' ? { outline: 'none' } : {}),
+                  },
+                  padding,
+                  rounded,
+                ]}
+              />
+              : <Text style={{ flex: 1 }}>{' '}</Text>
+            }
             {/* TODO: Use a lighter button group impl? */}
-            {readOnly
-              ? <ThemeProvider theme={{ colors: { primary: colors.blue } }}>
-                <ButtonGroup
-                  onPress={() => this.setState({ mode: mode === 'key' ? 'qrcode' : 'key' })}
-                  selectedIndex={mode === 'key' ? 0 : 1}
-                  buttons={modeButtons}
-                  containerStyle={{ height: 32, flex: 1 }}
-                  selectedBackgroundColor={colors.green}
-                  component={Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity}
-                />
-              </ThemeProvider>
-              : null}
+            <ThemeProvider theme={{ colors: { primary: colors.blue } }}>
+              <ButtonGroup
+                onPress={() => this.setState({ mode: mode === 'key' ? 'qrcode' : 'key' })}
+                selectedIndex={mode === 'key' ? 0 : 1}
+                buttons={modeButtons}
+                containerStyle={{ height: 32, flex: 1 }}
+                selectedBackgroundColor={colors.green}
+                component={Platform.OS === 'android' ? TouchableNativeFeedback : TouchableOpacity}
+              />
+            </ThemeProvider>
           </Flex.Cols>
-          {(!readOnly || mode === 'key')
+          {mode === 'key'
             ? <TextInputMultilineFix
               style={[
                 {
@@ -200,6 +203,24 @@ export default class PublicKeyWithActions extends PureComponent {
               selectTextOnFocus
             />
             : null}
+
+          {!readOnly && mode === 'qrcode'
+            ? <QRReader style={{ width: 248, height: 248 }} onFound={data => {
+              const url = parseUrl(data)
+
+              if (!url || url.pathname !== '/add-contact' || url.hashParts['public-key'] === '') {
+                return
+              }
+
+              this.setState({
+                mode: 'key',
+                contact: {
+                  ...this.state.contact,
+                  id: url.hashParts['public-key'],
+                  displayName: url.hashParts['display-name'] || '',
+                },
+              })
+            }} /> : null}
           {readOnly && mode === 'qrcode'
             ? <QRGenerator
               value={makeShareableUrl({ id, displayName })}
@@ -212,7 +233,7 @@ export default class PublicKeyWithActions extends PureComponent {
             <ShareKeyButton id={id} displayName={displayName} self={self} />
           ) : null}
           {copyButton ? <CopyKeyButton id={id} /> : null}
-          {addButton ? (
+          {addButton && mode === 'key' ? (
             <AddButton
               id={id}
               displayName={displayName}

client/react-native/common/components/Library/QRReader.js

@@ -0,0 +1,24 @@
+import React from 'react'
+import QRCodeScanner from 'react-native-qrcode-scanner'
+
+const QRReader = ({ onFound, style }) => <QRCodeScanner
+  onRead={event => onFound(event.data)}
+  onError={error => {
+    console.error(error)
+  }}
+  containerStyle={style}
+  topViewStyle={{
+    flex: 0,
+    width: 0,
+    height: 0,
+  }}
+  bottomViewStyle={{
+    flex: 0,
+    width: 0,
+    height: 0,
+  }}
+  cameraStyle={{ flex: 1, width: undefined, height: undefined, overflow: 'hidden' }}
+  fadeIn={false}
+/>
+
+export default QRReader

client/react-native/common/components/Library/QRReader.web.js

@@ -0,0 +1,13 @@
+import React from 'react'
+import QrReader from 'react-qr-reader'
+
+const QRReader = ({ onFound, style }) => <QrReader
+  onScan={onFound}
+  onError={error => {
+    console.error(error)
+  }}
+  style={style}
+  showViewFinder={false}
+/>
+
+export default QRReader

client/react-native/common/helpers/url.js

@@ -15,6 +15,10 @@ export const parse = url => {
   // We don't need to be fully compliant with URL spec yet
   // this is a quick and dirty replacement for whatwg-url
 
+  if (typeof url !== 'string') {
+    return {}
+  }
+
   // eslint-disable-next-line
   const parts = url.match(/([^:]+):\/+([^/]+)([^#?]*)(\?[^#]*)?(#.*)?/)