Fix: Issues raised on iOS QA (#325)

* fix: consuming before receiving funds

* fix: AmountTextInput focus method

* fix: createToken navigation

* fix: AppStack no longer modal

* fix: back to dashboard on receive

* fix: improves keyboard avoiding distance

* fix: modal bottom margin

* fix: PinScreen incorrect keyboard

* style: removes unused variables

* refactor: removes optional chaining

If there is no property, it's better
to throw an error than to silence it.

* refactor: removes state

* fix: New Address button

* fix: modal bottom margin

src/App.js

@@ -365,7 +365,6 @@ const AppStack = () => {
     >
       <Stack.Navigator
         screenOptions={{
-          presentation: 'modal',
           headerShown: false,
         }}
       >

src/components/AmountTextInput.js

@@ -17,7 +17,13 @@ class AmountTextInput extends React.Component {
   }
 
   focus = () => {
-    this.inputRef.current.focus();
+    /* After the focus method is called, the screen is still re-rendered at least once more.
+     * Requesting a delay before the focus command ensures it is executed on the final rendering
+     * of the component.
+     */
+    setTimeout(() => {
+      this.inputRef.current.focus();
+    }, 50);
   }
 
   onChangeText = (text) => {

src/components/HathorHeader.js

@@ -15,6 +15,7 @@ import Logo from './Logo';
 import chevronLeft from '../assets/icons/chevron-left.png';
 import closeIcon from '../assets/icons/icCloseActive.png';
 import baseStyle from '../styles/init';
+import { HEADER_HEIGHT } from '../constants';
 
 const HathorHeader = (props) => {
   const renderBackButton = () => {
@@ -75,7 +76,7 @@ const HathorHeader = (props) => {
 
 const styles = StyleSheet.create({
   wrapper: {
-    height: 56,
+    height: HEADER_HEIGHT,
     flexDirection: 'row',
     alignItems: 'center',
     borderColor: '#eee',
@@ -95,5 +96,4 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
 });
-
 export default HathorHeader;

src/components/ModalConfirmation.js

@@ -7,7 +7,7 @@
 
 import React from 'react';
 import {
-  Dimensions, Image, Platform, StyleSheet, TouchableWithoutFeedback, View,
+  Dimensions, Image, StyleSheet, TouchableWithoutFeedback, View,
 } from 'react-native';
 
 import checkLogo from '../assets/images/icCheckBig.png';
@@ -41,11 +41,9 @@ class ModalConfirmation extends React.Component {
       return null;
     }
 
-    const { height, width } = Dimensions.get('window');
-
-    // Prevent the bottom message to be covered by some android phones
-    const marginBottom = Platform.OS === 'android' ? 40 : 16;
+    const { width } = Dimensions.get('window');
 
+    // Prevents the bottom message from being covered
     const styles = StyleSheet.create({
       modal: {
         position: 'absolute',
@@ -55,11 +53,11 @@ class ModalConfirmation extends React.Component {
         justifyContent: 'flex-end',
         alignItems: 'center',
         zIndex: 3,
-        height,
-        width,
+        height: '100%',
+        width: '100%',
       },
       innerModal: {
-        marginBottom,
+        marginBottom: 32,
         height: 270,
         backgroundColor: 'white',
         alignItems: 'center',

src/constants.js

@@ -100,6 +100,12 @@ export const MIN_JOB_ESTIMATION = 1;
  */
 export const PIN_SIZE = 6;
 
+/**
+ * Default Hathor Header height, used for recalculating layout offsets.
+ * @type {number}
+ */
+export const HEADER_HEIGHT = 56;
+
 /**
  * Unleash constants
  */

src/screens/CreateTokenAmount.js

@@ -114,7 +114,7 @@ class CreateTokenAmount extends React.Component {
         <HathorHeader
           title={t`CREATE TOKEN`}
           onBackPress={() => this.props.navigation.goBack()}
-          onCancel={() => this.props.navigation.pop()}
+          onCancel={() => this.props.navigation.getParent().goBack()}
         />
         <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }} keyboardVerticalOffset={getKeyboardAvoidingViewTopDistance()}>
           <View style={{ flex: 1, padding: 16, justifyContent: 'space-between' }}>

src/screens/CreateTokenConfirm.js

@@ -162,7 +162,7 @@ class CreateTokenConfirm extends React.Component {
         <HathorHeader
           title={t`CREATE TOKEN`}
           onBackPress={() => this.props.navigation.goBack()}
-          onCancel={() => this.props.navigation.pop()}
+          onCancel={() => this.props.navigation.getParent().goBack()}
         />
 
         { this.state.modal && (

src/screens/CreateTokenName.js

@@ -42,7 +42,7 @@ class CreateTokenName extends React.Component {
         <HathorHeader
           title={t`CREATE TOKEN`}
           onBackPress={() => this.props.navigation.pop()}
-          onCancel={() => this.props.navigation.pop()}
+          onCancel={() => this.props.navigation.getParent().goBack()}
         />
         <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }} keyboardVerticalOffset={getKeyboardAvoidingViewTopDistance()}>
           <View style={{ flex: 1, padding: 16, justifyContent: 'space-between' }}>

src/screens/CreateTokenSymbol.js

@@ -61,7 +61,7 @@ class CreateTokenSymbol extends React.Component {
         <HathorHeader
           title={t`CREATE TOKEN`}
           onBackPress={() => this.props.navigation.goBack()}
-          onCancel={() => this.props.navigation.pop()}
+          onCancel={() => this.props.navigation.getParent().goBack()}
         />
         <KeyboardAvoidingView behavior='padding' style={{ flex: 1 }} keyboardVerticalOffset={getKeyboardAvoidingViewTopDistance()}>
           <View style={{ flex: 1, padding: 16, justifyContent: 'space-between' }}>

src/screens/PaymentRequestDetail.js

@@ -21,6 +21,7 @@ import OfflineBar from '../components/OfflineBar';
 import TextFmt from '../components/TextFmt';
 import { clearInvoice } from '../actions';
 import { getTokenLabel, renderValue, isTokenNFT } from '../utils';
+import NavigationService from '../NavigationService';
 
 /**
  * address {string} Invoice destination address
@@ -46,8 +47,9 @@ class PaymentRequestDetail extends React.Component {
   }
 
   async componentDidMount() {
-    // When we create a new payment request we update the address for a new one
-    await this.props.wallet.getNextAddress();
+    // When we create a new payment request, we don't update the address for a new one
+    // This will only happen when it receives a transaction and becomes a used address
+    await this.props.wallet.getCurrentAddress();
   }
 
   componentDidUpdate(prevProps) {
@@ -62,6 +64,18 @@ class PaymentRequestDetail extends React.Component {
     this.props.dispatch(clearInvoice());
   }
 
+  /**
+   * If the payment was not yet received, the user goes back to the "Select Amount" screen.
+   * Otherwise, goes directly to the Home screen to see the updated wallet.
+   */
+  onBackClick() {
+    if (this.props.payment !== null) {
+      NavigationService.resetToMain();
+    } else {
+      this.props.navigation.goBack();
+    }
+  }
+
   render() {
     const { symbol } = this.props.token;
     const isNFT = isTokenNFT(get(this.props, 'token.uid'), this.props.tokenMetadata);
@@ -88,7 +102,7 @@ class PaymentRequestDetail extends React.Component {
         <HathorHeader
           withBorder
           title={t`PAYMENT REQUEST`}
-          onBackPress={() => this.props.navigation.goBack()}
+          onBackPress={() => this.onBackClick()}
         />
         <View style={{
           flex: 1, justifyContent: 'space-between', alignItems: 'center', width: '100%',

src/screens/PinScreen.js

@@ -9,7 +9,7 @@ import React from 'react';
 import { connect } from 'react-redux';
 import { t } from 'ttag';
 
-import { BackHandler, Text, View } from 'react-native';
+import { BackHandler, Keyboard, Text, View } from 'react-native';
 import * as Keychain from 'react-native-keychain';
 import { walletUtils, cryptoUtils } from '@hathor/wallet-lib';
 import SimpleButton from '../components/SimpleButton';
@@ -76,6 +76,9 @@ class PinScreen extends React.Component {
   }
 
   componentDidMount() {
+    // If the keyboard is being shown, hide it. This screen's keyboard is built differently
+    Keyboard.dismiss();
+
     const supportedBiometry = getSupportedBiometry();
     const biometryEnabled = isBiometryEnabled();
     if (supportedBiometry && biometryEnabled) {

src/utils.js

@@ -12,7 +12,7 @@ import { t } from 'ttag';
 import { Linking, Platform, Text } from 'react-native';
 import { getStatusBarHeight } from 'react-native-status-bar-height';
 import baseStyle from './styles/init';
-import { PRIMARY_COLOR, KEYCHAIN_USER, networkObj } from './constants';
+import { PRIMARY_COLOR, HEADER_HEIGHT, KEYCHAIN_USER, networkObj } from './constants';
 import { STORE } from './store';
 import { TxHistory } from './models';
 
@@ -243,10 +243,12 @@ function extractAddress(plainText) {
  * @return {number} The top distance
  */
 export const getKeyboardAvoidingViewTopDistance = () => {
-  if (Platform.OS === 'android') {
-    return getStatusBarHeight();
-  }
-  return 0;
+  const statusBarHeight = getStatusBarHeight();
+  const calculatedHeight = (Platform.OS === 'ios')
+    ? statusBarHeight + HEADER_HEIGHT
+    : statusBarHeight;
+
+  return calculatedHeight;
 };
 
 /**