Add QR code to display a wallet.

app/package.json

@@ -11,6 +11,7 @@
         "react": "16.2.0",
         "react-native": "0.55.3",
         "react-native-image-zoom-viewer": "^2.2.5",
+        "react-native-qrcode": "^0.2.6",
         "react-native-vector-icons": "^4.5.0",
         "react-native-video": "2.0.0",
         "react-navigation": "^1.5.12",

app/src/component/walletAddress/view.js

@@ -1,6 +1,8 @@
 // @flow
 import React from 'react';
-import { Text, View } from 'react-native';
+import { Text, View, Animated } from "react-native";
+import QRCode from "react-native-qrcode";
+import Colors from '../../styles/colors';
 import Address from '../address';
 import Button from '../button';
 import walletStyle from '../../styles/wallet';
@@ -13,6 +15,10 @@ type Props = {
 };
 
 class WalletAddress extends React.PureComponent<Props> {
+  state = {
+    showQr: false
+  }
+
   componentWillMount() {
     const { checkAddressIsMine, receiveAddress, getNewAddress } = this.props;
     if (!receiveAddress) {
@@ -22,20 +28,55 @@ class WalletAddress extends React.PureComponent<Props> {
     }
   }
 
+  renderQrAddress() {
+    const { receiveAddress } = this.props;
+    return <View>
+      <QRCode
+        value={receiveAddress}
+        size={200}
+        bgColor={Colors.LbryGreen}
+        fgColor='white' />
+    </View>
+  }
+
+  toggleQrView() {
+    this.setState({showQr: !this.state.showQr});
+  }
+
   render() {
     const { receiveAddress, getNewAddress, gettingNewAddress } = this.props;
-    
+    const { showQr } = this.state;
+    const qrButtonText = showQr ? "Hide QR Address" : "Show QR Address";
     return (
-      <View style={walletStyle.card}>
+      <View>
         <Text style={walletStyle.title}>Receive Credits</Text>
         <Text style={[walletStyle.text, walletStyle.bottomMarginMedium]}>Use this wallet address to receive credits sent by another user (or yourself).</Text>
         <Address address={receiveAddress} style={walletStyle.bottomMarginSmall} />
-        <Button style={[walletStyle.button, walletStyle.bottomMarginLarge]}
-                icon={'refresh'}
-                text={'Get New Address'}
-                onPress={getNewAddress}
-                disabled={gettingNewAddress}
-                />
+
+        <View style={[walletStyle.row, walletStyle.bottomMarginLarge ]}>
+          <Button style={walletStyle.button}
+            icon={'refresh'}
+            text={'Get New Address'}
+            onPress={getNewAddress}
+            disabled={gettingNewAddress}
+          />
+
+          <Button style={walletStyle.button}
+            icon={'refresh'}
+            text={qrButtonText}
+            onPress={() => this.toggleQrView()}
+            disabled={gettingNewAddress}
+          />
+        </View>
+
+        {showQr && <View style={[walletStyle.bottomMarginLarge, walletStyle.qrContainer]}>
+          <QRCode
+            value={receiveAddress}
+            size={200}
+            bgColor={Colors.LbryGreen}
+            fgColor='white' />
+        </View>}
+
         <Text style={walletStyle.smallText}>
           You can generate a new address at any time, and any previous addresses will continue to work. Using multiple addresses can be helpful for keeping track of incoming payments from multiple sources.
         </Text>

app/src/styles/wallet.js

@@ -3,46 +3,46 @@ import Colors from './colors';
 
 const walletStyle = StyleSheet.create({
   row: {
-    flexDirection: 'row',
-    justifyContent: 'space-between',
-    alignItems: 'center'
+    flexDirection: "row",
+    justifyContent: "space-between",
+    alignItems: "center"
   },
   amountRow: {
-    flexDirection: 'row'
+    flexDirection: "row"
   },
   address: {
-    fontFamily: 'Metropolis-Regular',
+    fontFamily: "Metropolis-Regular",
     borderWidth: 1,
-    borderStyle: 'dashed',
-    borderColor: '#cccccc',
-    backgroundColor: '#f9f9f9',
+    borderStyle: "dashed",
+    borderColor: "#cccccc",
+    backgroundColor: "#f9f9f9",
     padding: 8,
-    width: '85%'
+    width: "85%"
   },
   button: {
     backgroundColor: Colors.LbryGreen
   },
   historyList: {
-    backgroundColor: '#ffffff'
+    backgroundColor: "#ffffff"
   },
   card: {
-    backgroundColor: '#ffffff',
+    backgroundColor: "#ffffff",
     marginTop: 16,
     marginLeft: 16,
     marginRight: 16,
     padding: 16
   },
   transactionsCard: {
-    backgroundColor: '#ffffff',
+    backgroundColor: "#ffffff",
     margin: 16
   },
   title: {
-    fontFamily: 'Metropolis-Bold',
+    fontFamily: "Metropolis-Bold",
     fontSize: 20,
     marginBottom: 24
   },
   transactionsTitle: {
-    fontFamily: 'Metropolis-Bold',
+    fontFamily: "Metropolis-Bold",
     fontSize: 20
   },
   transactionsHeader: {
@@ -51,19 +51,19 @@ const walletStyle = StyleSheet.create({
     paddingLeft: 16,
     paddingRight: 16,
     borderBottomWidth: 1,
-    borderBottomColor: '#eeeeee'
+    borderBottomColor: "#eeeeee"
   },
   text: {
-    fontFamily: 'Metropolis-Regular',
+    fontFamily: "Metropolis-Regular",
     fontSize: 14
   },
   link: {
     color: Colors.LbryGreen,
-    fontFamily: 'Metropolis-Regular',
+    fontFamily: "Metropolis-Regular",
     fontSize: 14
   },
   smallText: {
-    fontFamily: 'Metropolis-Regular',
+    fontFamily: "Metropolis-Regular",
     fontSize: 12
   },
   balanceCard: {
@@ -72,46 +72,46 @@ const walletStyle = StyleSheet.create({
     marginRight: 16
   },
   balanceBackground: {
-    position: 'absolute',
-    alignSelf: 'stretch',
-    width: '100%',
-    height: '100%',
+    position: "absolute",
+    alignSelf: "stretch",
+    width: "100%",
+    height: "100%"
   },
   balanceTitle: {
-    color: '#ffffff',
-    fontFamily: 'Metropolis-Bold',
+    color: "#ffffff",
+    fontFamily: "Metropolis-Bold",
     fontSize: 18,
     marginLeft: 16,
     marginTop: 16
   },
   balanceCaption: {
-    color: '#caedB9',
-    fontFamily: 'Metropolis-Medium',
+    color: "#caedB9",
+    fontFamily: "Metropolis-Medium",
     fontSize: 14,
     marginLeft: 16,
     marginTop: 8,
     marginBottom: 96
   },
   balance: {
-    color: '#ffffff',
-    fontFamily: 'Metropolis-Bold',
+    color: "#ffffff",
+    fontFamily: "Metropolis-Bold",
     fontSize: 36,
     marginLeft: 16,
     marginBottom: 16
   },
   infoText: {
-    color: '#aaaaaa',
-    fontFamily: 'Metropolis-Regular',
+    color: "#aaaaaa",
+    fontFamily: "Metropolis-Regular",
     fontSize: 14,
     padding: 16,
-    textAlign: 'center'
+    textAlign: "center"
   },
   input: {
-    fontFamily: 'Metropolis-Regular',
+    fontFamily: "Metropolis-Regular",
     fontSize: 14
   },
   amountInput: {
-    alignSelf: 'flex-start',
+    alignSelf: "flex-start",
     width: 100,
     fontSize: 16,
     letterSpacing: 1
@@ -127,8 +127,8 @@ const walletStyle = StyleSheet.create({
     margin: 16
   },
   warningText: {
-    color: '#ffffff',
-    fontFamily: 'Metropolis-Regular',
+    color: "#ffffff",
+    fontFamily: "Metropolis-Regular",
     fontSize: 16,
     lineHeight: 30
   },
@@ -136,7 +136,7 @@ const walletStyle = StyleSheet.create({
     marginLeft: 16
   },
   currency: {
-    alignSelf: 'flex-start',
+    alignSelf: "flex-start",
     marginTop: 17
   },
   sendButton: {
@@ -150,6 +150,10 @@ const walletStyle = StyleSheet.create({
   },
   bottomMarginLarge: {
     marginBottom: 24
+  },
+  qrContainer: {
+    justifyContent: "center",
+    alignItems: "center"
   }
 });