ADD: Value and memo to the success screen

fix logic for both sent and receive

fix null

fix layout for small devices with flexbox

marcos suggestions fix

screen/lnd/lndViewInvoice.js

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { View, Dimensions, ScrollView, BackHandler, InteractionManager } from 'react-native';
+import { View, Text, Dimensions, ScrollView, BackHandler, InteractionManager, TouchableOpacity } from 'react-native';
 import Share from 'react-native-share';
 import {
   BlueLoading,
@@ -142,7 +142,35 @@ export default class LNDViewInvoice extends Component {
       if (invoice.ispaid || invoice.type === 'paid_invoice') {
         return (
           <SafeBlueArea style={{ flex: 1 }}>
-            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
+            <View style={{ flex: 2, flexDirection: 'column', justifyContent: 'center' }}>
+              {(invoice.type === 'paid_invoice') && invoice.value && (
+                <View style={{ flexDirection: 'row', justifyContent: 'center', paddingBottom: 8 }}>
+                  <Text style={{ color: '#0f5cc0', fontSize: 32, fontWeight: '600' }}>
+                    {invoice.value}
+                  </Text>
+                  <Text style={{ color: '#0f5cc0', fontSize: 16, marginHorizontal: 4, paddingBottom: 3, fontWeight: '600', alignSelf: 'flex-end' }}>
+                    {loc.lndViewInvoice.sats}
+                  </Text>
+                </View>
+              )}
+              {(invoice.type === 'user_invoice') && invoice.amt && (
+                <View style={{ flexDirection: 'row', justifyContent: 'center', paddingBottom: 8 }}>
+                  <Text style={{ color: '#0f5cc0', fontSize: 32, fontWeight: '600' }}>
+                    {invoice.amt}
+                  </Text>
+                  <Text style={{ color: '#0f5cc0', fontSize: 16, marginHorizontal: 4, paddingBottom: 3, fontWeight: '600', alignSelf: 'flex-end' }}>
+                    {loc.lndViewInvoice.sats}
+                  </Text>
+                </View>
+              )}
+              {!invoice.ispaid && invoice.memo && invoice.memo.length > 0 &&  (
+                <Text style={{ color: '#9aa0aa', fontSize: 14, marginHorizontal: 4, paddingBottom: 6, fontWeight: '400', alignSelf: 'center' }}>
+                  {invoice.memo}
+                </Text>
+              )}
+           </View>
+
+            <View style={{ flex: 3, alignItems: 'center', justifyContent: 'center' }}>
               <View
                 style={{
                   backgroundColor: '#ccddf9',
@@ -152,27 +180,28 @@ export default class LNDViewInvoice extends Component {
                   alignSelf: 'center',
                   justifyContent: 'center',
                   marginTop: -100,
-                  marginBottom: 30,
+                  marginBottom: 16,
                 }}
               >
                 <Icon name="check" size={50} type="font-awesome" color="#0f5cc0" />
               </View>
               <BlueText>{loc.lndViewInvoice.has_been_paid}</BlueText>
+              
+            </View>
+            <View style={{ flex: 1, justifyContent: 'flex-end', marginBottom: 24, alignItems: 'center' }}>
               {invoice.payment_preimage && typeof invoice.payment_preimage === 'string' && (
-                <View style={{ position: 'absolute', bottom: 0 }}>
-                  <BlueButton
-                    backgroundColor="#FFFFFF"
-                    icon={{
-                      name: 'info',
-                      type: 'entypo',
-                      color: BlueApp.settings.buttonTextColor,
-                    }}
-                    onPress={() => this.setState({ showPreimageQr: true })}
-                    title=" "
-                  />
-                </View>
+                <TouchableOpacity
+                  style={{ flexDirection: 'row', alignItems: 'center' }}
+                  onPress={() => this.setState({ showPreimageQr: true })}
+                >
+                  <Text style={{ color: '#9aa0aa', fontSize: 14, marginRight: 8 }}>
+                    {loc.send.create.details}
+                  </Text>
+                  <Icon name="angle-right" size={18} type="font-awesome" color="#9aa0aa" />
+                </TouchableOpacity>
               )}
             </View>
+              
           </SafeBlueArea>
         );
       }