diff --git a/client/react-native/android/app/build.gradle b/client/react-native/android/app/build.gradle
index 4bf2b8160c..f520937571 100644
--- a/client/react-native/android/app/build.gradle
+++ b/client/react-native/android/app/build.gradle
@@ -152,6 +152,7 @@ android {
 }
 
 dependencies {
+    compile project(':react-native-svg')
     compile project(':react-native-restart')
     compile project(':react-native-exception-handler')
     compile project(':react-native-vector-icons')
diff --git a/client/react-native/android/app/src/main/java/chat/berty/main/MainApplication.java b/client/react-native/android/app/src/main/java/chat/berty/main/MainApplication.java
index 545ca30525..571b5d32ea 100644
--- a/client/react-native/android/app/src/main/java/chat/berty/main/MainApplication.java
+++ b/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 com.horcrux.svg.SvgPackage;
 import com.avishayil.rnrestart.ReactNativeRestartPackage;
 import com.masteratul.exceptionhandler.ReactNativeExceptionHandlerPackage;
 import com.oblador.vectoricons.VectorIconsPackage;
@@ -32,6 +33,7 @@ public boolean getUseDeveloperSupport() {
         protected List<ReactPackage> getPackages() {
             return Arrays.<ReactPackage>asList(
                 new MainReactPackage(),
+            new SvgPackage(),
             new ReactNativeRestartPackage(),
             new ReactNativeExceptionHandlerPackage(),
                 new CorePackage(),
diff --git a/client/react-native/android/settings.gradle b/client/react-native/android/settings.gradle
index 9068478383..d70432a496 100644
--- a/client/react-native/android/settings.gradle
+++ b/client/react-native/android/settings.gradle
@@ -1,4 +1,6 @@
 rootProject.name = 'Berty'
+include ':react-native-svg'
+project(':react-native-svg').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-svg/android')
 include ':react-native-restart'
 project(':react-native-restart').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-restart/android')
 include ':react-native-exception-handler'
diff --git a/client/react-native/common/components/Library/PublicKeyWithActions.js b/client/react-native/common/components/Library/PublicKeyWithActions.js
index 00478041ae..98989631eb 100644
--- a/client/react-native/common/components/Library/PublicKeyWithActions.js
+++ b/client/react-native/common/components/Library/PublicKeyWithActions.js
@@ -1,4 +1,4 @@
-import { ScrollView, TextInput, Platform, Clipboard } from 'react-native'
+import { ScrollView, TextInput, Platform, Clipboard, TouchableNativeFeedback, TouchableOpacity } from 'react-native'
 import { btoa } from 'b64-lite'
 import React, { PureComponent } from 'react'
 
@@ -6,11 +6,13 @@ import { Button, Flex, TextInputMultilineFix, Text } from './index'
 import { RelayContext } from '../../relay'
 import { colors } from '../../constants'
 import {
-  extractPublicKeyFromId,
+  extractPublicKeyFromId, makeShareableUrl,
   shareLinkOther,
   shareLinkSelf,
 } from '../../helpers/contacts'
 import { marginTop, padding, rounded, textTiny } from '../../styles'
+import QRGenerator from './QRGenerator'
+import { ThemeProvider, ButtonGroup } from 'react-native-elements'
 
 const CopyKeyButton = ({ id }) => (
   <ActionButton
@@ -75,6 +77,7 @@ export default class PublicKeyWithActions extends PureComponent {
         overrideDisplayName: '',
         overrideDisplayStatus: '',
       },
+      mode: props.mode || 'key',
     }
 
     if (missingInitialData && props.data !== undefined) {
@@ -117,6 +120,7 @@ export default class PublicKeyWithActions extends PureComponent {
     } = this.props
     const {
       contact: { id, displayName },
+      mode,
     } = this.state
 
     let errors = []
@@ -126,52 +130,83 @@ export default class PublicKeyWithActions extends PureComponent {
       // noop
     }
 
+    const modeButtons = [
+      { element: () => <Text icon={'edit'} big color={mode === 'key' ? colors.white : colors.grey1} /> },
+      {
+        element: () => <Text icon={'material-qrcode-scan'} big
+          color={mode === 'qrcode' ? colors.white : colors.grey1} />,
+      },
+    ]
+
     return (
       <ScrollView>
         <Flex.Rows style={[padding]} align='center'>
-          <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',
-                width: 330,
-                flex: 0,
-                ...(Platform.OS === 'web' ? { outline: 'none' } : {}),
-              },
-              padding,
-              rounded,
-            ]}
-          />
-          <TextInputMultilineFix
-            style={[
-              {
-                width: 330,
-                height: 165,
-                backgroundColor: colors.grey7,
-                color: colors.black,
-                flexWrap: 'wrap',
-                fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
-              },
-              textTiny,
-              padding,
-              marginTop,
-              rounded,
-            ]}
-            multiline
-            placeholder='Type or copy/paste a berty user public key here'
-            value={id}
-            onChangeText={id =>
-              this.setState({ contact: { ...this.state.contact, id } })
-            }
-            editable={!readOnly}
-            selectTextOnFocus
-          />
+          <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,
+              ]}
+            />
+            {/* 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}
+          </Flex.Cols>
+          {(!readOnly || mode === 'key')
+            ? <TextInputMultilineFix
+              style={[
+                {
+                  width: 330,
+                  height: 248,
+                  backgroundColor: colors.grey7,
+                  color: colors.black,
+                  flexWrap: 'wrap',
+                  fontFamily: Platform.OS === 'ios' ? 'Courier' : 'monospace',
+                },
+                textTiny,
+                padding,
+                marginTop,
+                rounded,
+              ]}
+              multiline
+              placeholder='Type or copy/paste a berty user public key here'
+              value={id}
+              onChangeText={id =>
+                this.setState({ contact: { ...this.state.contact, id } })
+              }
+              editable={!readOnly}
+              selectTextOnFocus
+            />
+            : null}
+          {readOnly && mode === 'qrcode'
+            ? <QRGenerator
+              value={makeShareableUrl({ id, displayName })}
+              size={248}
+              style={[marginTop]} />
+            : null // TODO: implement camera
+          }
 
           {shareButton ? (
             <ShareKeyButton id={id} displayName={displayName} self={self} />
diff --git a/client/react-native/common/components/Library/QRGenerator.js b/client/react-native/common/components/Library/QRGenerator.js
new file mode 100644
index 0000000000..3325d3acf6
--- /dev/null
+++ b/client/react-native/common/components/Library/QRGenerator.js
@@ -0,0 +1,9 @@
+import React  from 'react'
+import QRCode from 'react-native-qrcode-svg'
+import { View } from 'react-native'
+
+export default ({ value, size, style }) => <>
+  <View style={[{ width: size, height: size }, ...(style || [])]}>
+    <QRCode size={size} value={value} />
+  </View>
+</>
diff --git a/client/react-native/common/components/Library/QRGenerator/QRGenerator.js b/client/react-native/common/components/Library/QRGenerator/QRGenerator.js
deleted file mode 100644
index 22981ef374..0000000000
--- a/client/react-native/common/components/Library/QRGenerator/QRGenerator.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React, { PureComponent } from 'react'
-import QRCode from 'qrcode-react'
-
-export default class QRGenerator extends PureComponent {
-  render () {
-    const { value, logo, size, logoWidth } = this.props
-    return (
-      <QRCode value={value} logo={logo} size={size} logoWidth={logoWidth} />
-    )
-  }
-}
diff --git a/client/react-native/common/components/Library/QRGenerator/QRGenerator.native.js b/client/react-native/common/components/Library/QRGenerator/QRGenerator.native.js
deleted file mode 100644
index 16c1e1f36e..0000000000
--- a/client/react-native/common/components/Library/QRGenerator/QRGenerator.native.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import { PureComponent } from 'react'
-
-export default class QRGenerator extends PureComponent {
-  render () {
-    return null
-  }
-}
diff --git a/client/react-native/common/components/Screens/Contacts/Add/ByQRCode.js b/client/react-native/common/components/Screens/Contacts/Add/ByQRCode.js
index 7658b77be3..dab109ef94 100644
--- a/client/react-native/common/components/Screens/Contacts/Add/ByQRCode.js
+++ b/client/react-native/common/components/Screens/Contacts/Add/ByQRCode.js
@@ -5,7 +5,7 @@ import { colors } from '../../../../constants'
 import { Flex, Screen, Button } from '../../../Library'
 import { padding, paddingVertical, borderBottom } from '../../../../styles'
 import { RelayContext } from '../../../../relay'
-import QRGenerator from '../../../Library/QRGenerator/QRGenerator'
+import QRGenerator from '../../../Library/QRGenerator'
 import QRReader from '../../../Library/QRReader/QRReader'
 
 // TODO: get contact with status == 'myself' to get real id
diff --git a/client/react-native/common/components/Screens/Settings/MyAccount/MyQRCode.js b/client/react-native/common/components/Screens/Settings/MyAccount/MyQRCode.js
index 74482d2dcf..e1da81b73f 100644
--- a/client/react-native/common/components/Screens/Settings/MyAccount/MyQRCode.js
+++ b/client/react-native/common/components/Screens/Settings/MyAccount/MyQRCode.js
@@ -1,10 +1,7 @@
 import React, { PureComponent } from 'react'
-import { Clipboard } from 'react-native'
 import { colors } from '../../../../constants'
-import { Flex, Screen, Button, Header } from '../../../Library'
-import { padding, paddingVertical } from '../../../../styles'
-import QRGenerator from '../../../Library/QRGenerator/QRGenerator'
-import { extractPublicKeyFromId } from '../../../../helpers/contacts'
+import { Screen, Header, PublicKeyWithActions } from '../../../Library'
+import { paddingVertical } from '../../../../styles'
 
 export default class MyQRCode extends PureComponent {
   static navigationOptions = ({ navigation }) => ({
@@ -12,58 +9,16 @@ export default class MyQRCode extends PureComponent {
     header: <Header navigation={navigation} title='My QR code' backBtn />,
   })
 
-  state = {
-    myID:
-      'MEkwEwYHKoZIzj0CAQYIKoZIzj0DAQMDMgAE+Y+qPqI3geo2hQH8eK7Rn+YWG09TejZ5QFoj9fmxFrUyYhFap6XmTdJtEi8myBmW',
-    logo: require('../../../../static/img/logo-border.png'),
-  }
-
   share = () => {
     console.error('share: not implemented')
   }
 
   render () {
-    const { logo } = this.state
-    const { id } = this.props.navigation.getParam('data')
-    const myID = extractPublicKeyFromId(id)
+    const { id, displayName } = this.props.navigation.getParam('data')
 
     return (
       <Screen style={[{ backgroundColor: colors.white }, paddingVertical]}>
-        <Flex.Rows style={[padding]} align='center'>
-          <QRGenerator value={myID} logo={logo} size={256} logoWidth={100} />
-          <Flex.Cols align='start'>
-            <Flex.Rows>
-              <Button
-                icon={'share'}
-                background={colors.blue}
-                margin
-                padding
-                rounded={23}
-                height={24}
-                medium
-                middle
-                center
-                onPress={this.share}
-              >
-                SHARE THE KEY
-              </Button>
-              <Button
-                icon='copy'
-                background={colors.blue}
-                margin
-                padding
-                rounded={23}
-                height={24}
-                medium
-                middle
-                center
-                onPress={() => Clipboard.setString(myID)}
-              >
-                COPY THE CODE
-              </Button>
-            </Flex.Rows>
-          </Flex.Cols>
-        </Flex.Rows>
+        <PublicKeyWithActions initialKey={id} initialName={displayName} copyButton shareButton readOnly self mode={'qrcode'} />
       </Screen>
     )
   }
diff --git a/client/react-native/ios/Berty.xcodeproj/project.pbxproj b/client/react-native/ios/Berty.xcodeproj/project.pbxproj
index 5c00971c35..0a71ebc6a9 100644
--- a/client/react-native/ios/Berty.xcodeproj/project.pbxproj
+++ b/client/react-native/ios/Berty.xcodeproj/project.pbxproj
@@ -64,6 +64,8 @@
 		F8799D7A2136F44B003B9FD7 /* CoreModule.m in Sources */ = {isa = PBXBuildFile; fileRef = F8799D752136F3C5003B9FD7 /* CoreModule.m */; };
 		F8799D7B2136F44E003B9FD7 /* CoreModule.swift in Sources */ = {isa = PBXBuildFile; fileRef = F8799D782136F3EA003B9FD7 /* CoreModule.swift */; };
 		F8EF7F482136A10600FDCCB5 /* core.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = F8EF7F472136A10500FDCCB5 /* core.framework */; };
+		76F82E0606D7449F9A9451B4 /* libRNSVG.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 03729C1E22E64EEB9A2172DD /* libRNSVG.a */; };
+		FCA390D83E0043E4B3C3DDBF /* libRNSVG-tvOS.a in Frameworks */ = {isa = PBXBuildFile; fileRef = A5CF2EBACA6944FB80758D67 /* libRNSVG-tvOS.a */; };
 /* End PBXBuildFile section */
 
 /* Begin PBXContainerItemProxy section */
@@ -459,6 +461,9 @@
 		F8799D782136F3EA003B9FD7 /* CoreModule.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CoreModule.swift; sourceTree = "<group>"; };
 		F8EF7F472136A10500FDCCB5 /* core.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; path = core.framework; sourceTree = "<group>"; };
 		FA49C5BF6A3A4426A9FE0AA2 /* AntDesign.ttf */ = {isa = PBXFileReference; explicitFileType = undefined; fileEncoding = 9; includeInIndex = 0; lastKnownFileType = unknown; name = AntDesign.ttf; path = "../node_modules/react-native-vector-icons/Fonts/AntDesign.ttf"; sourceTree = "<group>"; };
+		CCA695F52DA7481FB92F902C /* RNSVG.xcodeproj */ = {isa = PBXFileReference; name = "RNSVG.xcodeproj"; path = "../node_modules/react-native-svg/ios/RNSVG.xcodeproj"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = wrapper.pb-project; explicitFileType = undefined; includeInIndex = 0; };
+		03729C1E22E64EEB9A2172DD /* libRNSVG.a */ = {isa = PBXFileReference; name = "libRNSVG.a"; path = "libRNSVG.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
+		A5CF2EBACA6944FB80758D67 /* libRNSVG-tvOS.a */ = {isa = PBXFileReference; name = "libRNSVG-tvOS.a"; path = "libRNSVG-tvOS.a"; sourceTree = "<group>"; fileEncoding = undefined; lastKnownFileType = archive.ar; explicitFileType = undefined; includeInIndex = 0; };
 /* End PBXFileReference section */
 
 /* Begin PBXFrameworksBuildPhase section */
@@ -497,6 +502,7 @@
 				B40E0A9F7F7B4896A7D74589 /* libRNImagePicker.a in Frameworks */,
 				EFEFDB40F99B499C82D9C417 /* libReactNativeExceptionHandler.a in Frameworks */,
 				A01BCBB91C754A66BB19B7C5 /* libRCTRestart.a in Frameworks */,
+				76F82E0606D7449F9A9451B4 /* libRNSVG.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -513,6 +519,7 @@
 				2D02E4C71E0B4AEC006451C7 /* libRCTText-tvOS.a in Frameworks */,
 				2D02E4C81E0B4AEC006451C7 /* libRCTWebSocket-tvOS.a in Frameworks */,
 				3FD46C36ED444780B7A88579 /* libRNVectorIcons-tvOS.a in Frameworks */,
+				FCA390D83E0043E4B3C3DDBF /* libRNSVG-tvOS.a in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -709,6 +716,7 @@
 				315E18D636B840518CA9A54F /* RNImagePicker.xcodeproj */,
 				B3E7C65ABAF9412C87CEC334 /* ReactNativeExceptionHandler.xcodeproj */,
 				6FB3194C6F754B4C9359EBA1 /* RCTRestart.xcodeproj */,
+				CCA695F52DA7481FB92F902C /* RNSVG.xcodeproj */,
 			);
 			name = Libraries;
 			sourceTree = "<group>";
@@ -1519,6 +1527,7 @@
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
 					"$(SRCROOT)/../node_modules/react-native-exception-handler/ios",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 				);
 				INFOPLIST_FILE = BertyTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
@@ -1527,6 +1536,8 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1550,6 +1561,7 @@
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
 					"$(SRCROOT)/../node_modules/react-native-exception-handler/ios",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 				);
 				INFOPLIST_FILE = BertyTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
@@ -1558,6 +1570,8 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1592,6 +1606,7 @@
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
 					"$(SRCROOT)/../node_modules/react-native-exception-handler/ios",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 				);
 				INFOPLIST_FILE = Berty/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.1;
@@ -1639,6 +1654,7 @@
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
 					"$(SRCROOT)/../node_modules/react-native-exception-handler/ios",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 				);
 				INFOPLIST_FILE = Berty/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.1;
@@ -1681,6 +1697,7 @@
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
 					"$(SRCROOT)/../node_modules/react-native-exception-handler/ios",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 				);
 				INFOPLIST_FILE = "Berty-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1688,6 +1705,8 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1720,6 +1739,7 @@
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
 					"$(SRCROOT)/../node_modules/react-native-exception-handler/ios",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 				);
 				INFOPLIST_FILE = "Berty-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1727,6 +1747,8 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1758,6 +1780,7 @@
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
 					"$(SRCROOT)/../node_modules/react-native-exception-handler/ios",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 				);
 				INFOPLIST_FILE = "Berty-tvOSTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@@ -1765,6 +1788,8 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1796,6 +1821,7 @@
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
 					"$(SRCROOT)/../node_modules/react-native-exception-handler/ios",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 				);
 				INFOPLIST_FILE = "Berty-tvOSTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@@ -1803,6 +1829,8 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1876,6 +1904,7 @@
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
 					"$(SRCROOT)/../node_modules/react-native-exception-handler/ios",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 				);
 				INFOPLIST_FILE = Berty/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.1;
@@ -1912,6 +1941,7 @@
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
 					"$(SRCROOT)/../node_modules/react-native-exception-handler/ios",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 				);
 				INFOPLIST_FILE = BertyTests/Info.plist;
 				IPHONEOS_DEPLOYMENT_TARGET = 9.0;
@@ -1920,6 +1950,8 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1949,6 +1981,7 @@
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
 					"$(SRCROOT)/../node_modules/react-native-exception-handler/ios",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 				);
 				INFOPLIST_FILE = "Berty-tvOS/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
@@ -1956,6 +1989,8 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
@@ -1987,6 +2022,7 @@
 					"$(SRCROOT)/../node_modules/react-native-image-picker/ios",
 					"$(SRCROOT)/../node_modules/react-native-exception-handler/ios",
 					"$(SRCROOT)/../node_modules/react-native-restart/ios/RCTRestart/**",
+					"$(SRCROOT)/../node_modules/react-native-svg/ios/**",
 				);
 				INFOPLIST_FILE = "Berty-tvOSTests/Info.plist";
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
@@ -1994,6 +2030,8 @@
 					"$(inherited)",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
+					"\"$(SRCROOT)/$(TARGET_NAME)\"",
 				);
 				OTHER_LDFLAGS = (
 					"-ObjC",
diff --git a/client/react-native/package.json b/client/react-native/package.json
index d8cfd0e53f..b7a3f91c2f 100644
--- a/client/react-native/package.json
+++ b/client/react-native/package.json
@@ -25,11 +25,16 @@
     "react-dom": "16.4.2",
     "react-native": "^0.57.6",
     "react-native-collapsible": "^1.3.0",
+    "react-native-elements": "^1.0.0-beta7",
     "react-native-exception-handler": "^2.10.2",
     "react-native-image-picker": "^0.27.1",
     "react-native-keyboard-spacer": "^0.4.1",
     "react-native-network-info": "^4.0.0",
+    "react-native-qrcode-svg": "^5.1.1",
     "react-native-restart": "^0.0.7",
+    "react-native-segmented-control-tab": "^3.3.1",
+    "react-native-svg": "^8.0.8",
+    "react-native-svg-web": "^1.0.1",
     "react-native-vector-icons": "^6.0.1",
     "react-navigation": "^2.17.0",
     "react-relay": "^1.6.2",
diff --git a/client/react-native/web/config/webpack.config.dev.js b/client/react-native/web/config/webpack.config.dev.js
index bb8f7aecc2..2a69d074f7 100644
--- a/client/react-native/web/config/webpack.config.dev.js
+++ b/client/react-native/web/config/webpack.config.dev.js
@@ -133,6 +133,7 @@ module.exports = {
     // for React Native Web.
     extensions: ['.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx'],
     alias: {
+      'react-native-svg': 'react-native-svg-web',
       'react-dom/unstable-native-dependencies': path.resolve(
         paths.appPath,
         'config/unstable-native-dependencies'
diff --git a/client/react-native/web/config/webpack.config.prod.js b/client/react-native/web/config/webpack.config.prod.js
index 0a31b272d9..a7459d65f6 100644
--- a/client/react-native/web/config/webpack.config.prod.js
+++ b/client/react-native/web/config/webpack.config.prod.js
@@ -204,6 +204,7 @@ module.exports = {
     // for React Native Web.
     extensions: ['.mjs', '.web.js', '.js', '.json', '.web.jsx', '.jsx'],
     alias: {
+      'react-native-svg': 'react-native-svg-web',
       'react-dom/unstable-native-dependencies': path.resolve(
         paths.appPath,
         'config/unstable-native-dependencies'
diff --git a/client/react-native/yarn.lock b/client/react-native/yarn.lock
index 6fab83b36a..b33dfc7196 100644
--- a/client/react-native/yarn.lock
+++ b/client/react-native/yarn.lock
@@ -1613,6 +1613,12 @@ camelcase@^4.0.0, camelcase@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
 
+can-promise@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/can-promise/-/can-promise-0.0.1.tgz#7a7597ad801fb14c8b22341dfec314b6bd6ad8d3"
+  dependencies:
+    window-or-global "^1.0.1"
+
 capture-exit@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-1.2.0.tgz#1c5fcc489fd0ab00d4f1ac7ae1072e3173fbab6f"
@@ -1735,7 +1741,7 @@ collection-visit@^1.0.0:
     map-visit "^1.0.0"
     object-visit "^1.0.0"
 
-color-convert@^1.9.0:
+color-convert@^1.9.0, color-convert@^1.9.1:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/color-convert/-/color-convert-1.9.3.tgz#bb71850690e1f136567de629d2d5471deda4c1e8"
   dependencies:
@@ -1745,10 +1751,28 @@ color-name@1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
 
+color-name@^1.0.0:
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+
+color-string@^1.5.2:
+  version "1.5.3"
+  resolved "https://registry.yarnpkg.com/color-string/-/color-string-1.5.3.tgz#c9bbc5f01b58b5492f3d6857459cb6590ce204cc"
+  dependencies:
+    color-name "^1.0.0"
+    simple-swizzle "^0.2.2"
+
 color-support@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
 
+color@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/color/-/color-2.0.1.tgz#e4ed78a3c4603d0891eba5430b04b86314f4c839"
+  dependencies:
+    color-convert "^1.9.1"
+    color-string "^1.5.2"
+
 combined-stream@1.0.6:
   version "1.0.6"
   resolved "http://registry.npmjs.org/combined-stream/-/combined-stream-1.0.6.tgz#723e7df6e801ac5613113a7e445a9b69cb632818"
@@ -2066,6 +2090,10 @@ detect-newline@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
 
+dijkstrajs@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/dijkstrajs/-/dijkstrajs-1.0.1.tgz#d3cd81221e3ea40742cfcde556d4e99e98ddc71b"
+
 dlv@^1.1.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/dlv/-/dlv-1.1.2.tgz#270f6737b30d25b6657a7e962c784403f85137e5"
@@ -3292,6 +3320,10 @@ is-arrayish@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.2.1.tgz#77c99840527aa8ecb1a8ba697b80645a7a926a9d"
 
+is-arrayish@^0.3.1:
+  version "0.3.2"
+  resolved "https://registry.yarnpkg.com/is-arrayish/-/is-arrayish-0.3.2.tgz#4574a2ae56f7ab206896fb431eaeed066fdf8f03"
+
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3523,6 +3555,10 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
 
+isarray@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.4.tgz#38e7bcbb0f3ba1b7933c86ba1894ddfc3781bbb7"
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -3778,7 +3814,7 @@ lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
 
-lodash.merge@^4.6.0:
+lodash.merge@^4.6.0, lodash.merge@^4.6.1:
   version "4.6.1"
   resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.1.tgz#adc25d9cb99b9391c59624f379fbba60d7111d54"
 
@@ -3798,11 +3834,15 @@ lodash.throttle@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
 
+lodash.times@^4.3.2:
+  version "4.3.2"
+  resolved "https://registry.yarnpkg.com/lodash.times/-/lodash.times-4.3.2.tgz#3e1f2565c431754d54ab57f2ed1741939285ca1d"
+
 lodash.unescape@4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/lodash.unescape/-/lodash.unescape-4.0.1.tgz#bf2249886ce514cda112fae9218cdc065211fc9c"
 
-lodash@^4.0.0, lodash@^4.17.10, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@^4.6.1:
+lodash@^4.0.0, lodash@^4.16.6, lodash@^4.17.10, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0, lodash@^4.6.1:
   version "4.17.11"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
 
@@ -4542,6 +4582,10 @@ onetime@^2.0.0:
   dependencies:
     mimic-fn "^1.0.0"
 
+opencollective-postinstall@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.1.tgz#798e83e168f7b91949061c2683f762af747f17cc"
+
 opn@^3.0.2:
   version "3.0.3"
   resolved "http://registry.npmjs.org/opn/-/opn-3.0.3.tgz#b6d99e7399f78d65c3baaffef1fb288e9b85243a"
@@ -4812,6 +4856,10 @@ pluralize@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/pluralize/-/pluralize-7.0.0.tgz#298b89df8b93b0221dbf421ad2b1b1ea23fc6777"
 
+pngjs@^3.3.0:
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.3.3.tgz#85173703bde3edac8998757b96e5821d0966a21b"
+
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab"
@@ -4926,7 +4974,7 @@ promise@^7.1.1:
   dependencies:
     asap "~2.0.3"
 
-prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   dependencies:
@@ -4949,6 +4997,16 @@ punycode@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
 
+qrcode@^1.2.0:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/qrcode/-/qrcode-1.3.2.tgz#ddb816b623236b31aa8cc2efcc04e02ac0fc7742"
+  dependencies:
+    can-promise "0.0.1"
+    dijkstrajs "^1.0.1"
+    isarray "^2.0.1"
+    pngjs "^3.3.0"
+    yargs "^8.0.2"
+
 qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
@@ -5039,6 +5097,15 @@ react-native-drawer-layout@1.3.2:
   dependencies:
     react-native-dismiss-keyboard "1.0.0"
 
+react-native-elements@^1.0.0-beta7:
+  version "1.0.0-beta7"
+  resolved "https://registry.yarnpkg.com/react-native-elements/-/react-native-elements-1.0.0-beta7.tgz#d732affc905079033a8b53343587f7c1dbc59834"
+  dependencies:
+    lodash.merge "^4.6.1"
+    lodash.times "^4.3.2"
+    opencollective-postinstall "^2.0.0"
+    prop-types "^15.5.8"
+
 react-native-exception-handler@^2.10.2:
   version "2.10.2"
   resolved "https://registry.yarnpkg.com/react-native-exception-handler/-/react-native-exception-handler-2.10.2.tgz#c500f7713fd30e79f44b03b223cf9ea90facae89"
@@ -5055,6 +5122,13 @@ react-native-network-info@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/react-native-network-info/-/react-native-network-info-4.0.0.tgz#aade28ddcf38f5d2c4d8055078dd7f0d97c51cff"
 
+react-native-qrcode-svg@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/react-native-qrcode-svg/-/react-native-qrcode-svg-5.1.1.tgz#f7dc136cb9de2b7b488a51e27048f6bb3c1ed94c"
+  dependencies:
+    prop-types "^15.5.10"
+    qrcode "^1.2.0"
+
 react-native-restart@^0.0.7:
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/react-native-restart/-/react-native-restart-0.0.7.tgz#e2ec764dcb0a82918a301c8664c30df75225f7e3"
@@ -5069,6 +5143,26 @@ react-native-screens@^1.0.0-alpha.11:
   version "1.0.0-alpha.15"
   resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-1.0.0-alpha.15.tgz#5b5a0041310b46f12048fda1908d52e7290ec18f"
 
+react-native-segmented-control-tab@^3.3.1:
+  version "3.3.1"
+  resolved "https://registry.yarnpkg.com/react-native-segmented-control-tab/-/react-native-segmented-control-tab-3.3.1.tgz#6fba6b2a48d4a0a3105f1b2225b5fd176e0dc88b"
+  dependencies:
+    prop-types "^15.5.10"
+
+react-native-svg-web@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-native-svg-web/-/react-native-svg-web-1.0.1.tgz#16e1784077b6e5b6c7ebd9c3829e6684211cba99"
+  dependencies:
+    prop-types "^15.5.10"
+
+react-native-svg@^8.0.8:
+  version "8.0.8"
+  resolved "https://registry.yarnpkg.com/react-native-svg/-/react-native-svg-8.0.8.tgz#5d4c636751d9db2d98a9b3cfc4ef45c4eac65d60"
+  dependencies:
+    color "^2.0.1"
+    lodash "^4.16.6"
+    pegjs "^0.10.0"
+
 react-native-tab-view@^0.0.77:
   version "0.0.77"
   resolved "http://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-0.0.77.tgz#11ceb8e7c23100d07e628dc151b57797524d00d4"
@@ -5727,6 +5821,12 @@ simple-plist@^0.2.1:
     bplist-parser "0.1.1"
     plist "2.0.1"
 
+simple-swizzle@^0.2.2:
+  version "0.2.2"
+  resolved "https://registry.yarnpkg.com/simple-swizzle/-/simple-swizzle-0.2.2.tgz#a4da6b635ffcccca33f70d17cb92592de95e557a"
+  dependencies:
+    is-arrayish "^0.3.1"
+
 single-line-log@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/single-line-log/-/single-line-log-1.1.2.tgz#c2f83f273a3e1a16edb0995661da0ed5ef033364"
@@ -6372,6 +6472,10 @@ widest-line@^2.0.0:
   dependencies:
     string-width "^2.1.1"
 
+window-or-global@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/window-or-global/-/window-or-global-1.0.1.tgz#dbe45ba2a291aabc56d62cf66c45b7fa322946de"
+
 wordwrap@^1.0.0, wordwrap@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"