feat(UI): the next button is overlapped by system keyboard on the sig…

…n up screen (#1064)

* add condition for min hight for smal screen

* add hook to use Keyboard

* added isMobileKeyboardShown to simpleStore after focused on input

* added isMobileKeyboardShown to simpleStore after focused on input

* hide btn from mobile and tablet

* check autoFocus

* autoFocus only desktop

* fixed autoFocus only mobile

* fixed snapshot and hidden btn in phone screen

* down btn on focus

* increase the height of the screen by focus in the input

* fixed only Iphone5

* fixed only Iphone5

* fixed snapshots

* uses onTouchstart

* revert signupwrapper

* call onFocus if is mobile

* commit for test android

* remove css and add condition for android and ISO

* fixed snapshots

* trying add scroll on android

* change minHeight only for android

* refactor: save original device height and use

* refactor: moved originalScreenHeight to Orientation.js

Co-authored-by: Alexey Kosinski <36693645+AlexeyKosinski@users.noreply.github.com>

src/SignupRouter.js

@@ -3,7 +3,7 @@ import { createBrowserApp } from '@react-navigation/web'
 import { createSwitchNavigator } from '@react-navigation/core'
 
 import { Platform } from 'react-native'
-import { isMobileSafari } from 'mobile-device-detect'
+import { isAndroid, isMobileSafari } from 'mobile-device-detect'
 import Signup from './components/signup/SignupState'
 import SigninInfo from './components/signin/SigninInfo'
 import IOSWebAppSignIn from './components/signin/IOSWebAppSignIn'
@@ -14,6 +14,7 @@ import './components/appNavigation/blurFx.css'
 import SimpleStore from './lib/undux/SimpleStore.js'
 import { fireEventFromNavigation } from './lib/analytics/analytics'
 import isWebApp from './lib/utils/isWebApp'
+import { getOriginalScreenHeight } from './lib/utils/Orientation'
 
 const initialRouteName = isMobileSafari && isWebApp ? 'IOSWebAppSignIn' : 'Auth'
 const router = createSwitchNavigator(
@@ -42,15 +43,21 @@ const fullScreenContainer = {
   display: 'flex',
   flexGrow: 1,
   flexDirection: 'column',
-  minHeight: 480,
 }
 
 const Router = () => {
   const store = SimpleStore.useStore()
   const { visible: dialogVisible } = store.get('currentScreen').dialogData
+  const isShowKeyboard = store.get && store.get('isMobileKeyboardShown')
+  let minHeight = 480
+
+  if (isAndroid && isShowKeyboard) {
+    minHeight = getOriginalScreenHeight()
+  }
+
   return (
     <>
-      <Blurred style={fullScreenContainer} blur={dialogVisible}>
+      <Blurred style={{ minHeight, ...fullScreenContainer }} blur={dialogVisible}>
         <WebRouter onNavigationStateChange={(prevNav, nav, action) => fireEventFromNavigation(action)} />
       </Blurred>
     </>

src/components/common/form/InputText.js

@@ -1,6 +1,6 @@
 // @flow
 import React, { useEffect } from 'react'
-import { isMobileSafari } from 'mobile-device-detect'
+import { isMobile, isMobileSafari } from 'mobile-device-detect'
 import { StyleSheet, TextInput, TouchableOpacity, View } from 'react-native'
 import normalize from '../../../lib/utils/normalizeText'
 import SimpleStore from '../../../lib/undux/SimpleStore'
@@ -12,16 +12,31 @@ import ErrorText from './ErrorText'
 const InputText = ({ error, onCleanUpField, styles, theme, style, getRef, ...props }: any) => {
   const simpleStore = SimpleStore.useStore()
 
-  const onFocusMobileSafari = () => {
-    window.scrollTo(0, 0)
-    document.body.scrollTop = 0
-    simpleStore.set('isMobileSafariKeyboardShown')(true)
+  const shouldChangeSizeOnKeyboardShown = isMobileSafari && simpleStore.set && Config.safariMobileKeyboardGuidedSize
+
+  const onFocus = () => {
+    if (shouldChangeSizeOnKeyboardShown) {
+      window.scrollTo(0, 0)
+      document.body.scrollTop = 0
+      simpleStore.set('isMobileSafariKeyboardShown')(true)
+    }
+    if (isMobile) {
+      simpleStore.set('isMobileKeyboardShown')(true)
+    }
   }
 
-  const onBlurMobileSafari = () => simpleStore.set('isMobileSafariKeyboardShown')(false)
+  const onBlur = () => {
+    if (shouldChangeSizeOnKeyboardShown) {
+      simpleStore.set('isMobileSafariKeyboardShown')(false)
+    }
+    if (isMobile) {
+      simpleStore.set('isMobileKeyboardShown')(false)
+    }
+  }
 
   useEffect(() => {
-    return () => simpleStore.set('isMobileSafariKeyboardShown')(false)
+    simpleStore.set('isMobileSafariKeyboardShown')(false)
+    simpleStore.set('isMobileKeyboardShown')(false)
   }, [])
 
   const inputColor = error ? theme.colors.red : theme.colors.darkGray
@@ -30,7 +45,6 @@ const InputText = ({ error, onCleanUpField, styles, theme, style, getRef, ...pro
     color: inputColor,
   }
 
-  const shouldChangeSizeOnKeyboardShown = isMobileSafari && simpleStore.set && Config.safariMobileKeyboardGuidedSize
   return (
     <View style={styles.view}>
       <View style={styles.view}>
@@ -40,17 +54,13 @@ const InputText = ({ error, onCleanUpField, styles, theme, style, getRef, ...pro
           style={[styles.input, inputStyle, style]}
           placeholderTextColor={theme.colors.gray50Percent}
           onFocus={() => {
-            if (shouldChangeSizeOnKeyboardShown) {
-              onFocusMobileSafari()
-            }
             if (props.onFocus) {
               props.onFocus()
             }
           }}
+          onTouchStart={onFocus}
           onBlur={() => {
-            if (shouldChangeSizeOnKeyboardShown) {
-              onBlurMobileSafari()
-            }
+            onBlur()
             if (props.onBlur) {
               props.onBlur()
             }

src/components/common/form/__tests__/__snapshots__/InputGoodDollar.js.snap

@@ -67,6 +67,7 @@ exports[`InputGoodDollar matches snapshot 1`] = `
         onKeyDown={[Function]}
         onKeyPress={[Function]}
         onSelect={[Function]}
+        onTouchStart={[Function]}
         placeholder="0 G$"
         readOnly={false}
         spellCheck={true}
@@ -184,6 +185,7 @@ exports[`InputGoodDollar matches snapshot 2`] = `
         onKeyDown={[Function]}
         onKeyPress={[Function]}
         onSelect={[Function]}
+        onTouchStart={[Function]}
         placeholder="0 G$"
         readOnly={false}
         spellCheck={true}

src/components/common/form/__tests__/__snapshots__/InputText.js.snap

@@ -67,6 +67,7 @@ exports[`InputText empty matches snapshot 1`] = `
         onKeyDown={[Function]}
         onKeyPress={[Function]}
         onSelect={[Function]}
+        onTouchStart={[Function]}
         readOnly={false}
         spellCheck={true}
         style={
@@ -180,6 +181,7 @@ exports[`InputText matches snapshot 1`] = `
         onKeyDown={[Function]}
         onKeyPress={[Function]}
         onSelect={[Function]}
+        onTouchStart={[Function]}
         readOnly={false}
         spellCheck={true}
         style={

src/components/common/view/__tests__/__snapshots__/AmountInput.js.snap

@@ -106,6 +106,7 @@ exports[`AmountInput matches snapshot 1`] = `
             onResponderTerminationRequest={[Function]}
             onSelect={[Function]}
             onStartShouldSetResponder={[Function]}
+            onTouchStart={[Function]}
             placeholder="0 G$"
             readOnly={false}
             spellCheck={true}

src/components/dashboard/__tests__/__snapshots__/Amount.js.snap

@@ -433,6 +433,7 @@ exports[`Amount matches snapshot 1`] = `
                   onResponderTerminationRequest={[Function]}
                   onSelect={[Function]}
                   onStartShouldSetResponder={[Function]}
+                  onTouchStart={[Function]}
                   placeholder="0 G$"
                   readOnly={false}
                   spellCheck={true}

src/components/dashboard/__tests__/__snapshots__/Reason.js.snap

@@ -393,6 +393,7 @@ exports[`Reason matches snapshot 1`] = `
               onKeyDown={[Function]}
               onKeyPress={[Function]}
               onSelect={[Function]}
+              onTouchStart={[Function]}
               placeholder="Add a message"
               readOnly={false}
               spellCheck={true}

src/components/dashboard/__tests__/__snapshots__/Who.js.snap

@@ -405,6 +405,7 @@ exports[`Who matches snapshot 1`] = `
               onKeyDown={[Function]}
               onKeyPress={[Function]}
               onSelect={[Function]}
+              onTouchStart={[Function]}
               placeholder="Enter the recipient name"
               readOnly={false}
               spellCheck={true}

src/components/signin/__tests__/__snapshots__/IOSWebAppSignIn.js.snap

@@ -274,6 +274,7 @@ sent to you by text message:
               onKeyDown={[Function]}
               onKeyPress={[Function]}
               onSelect={[Function]}
+              onTouchStart={[Function]}
               readOnly={false}
               spellCheck={true}
               style={

src/components/signin/__tests__/__snapshots__/Mnemonics.js.snap

@@ -205,6 +205,7 @@ exports[`SignIn - Mnemonics matches snapshot 1`] = `
                 onKeyDown={[Function]}
                 onKeyPress={[Function]}
                 onSelect={[Function]}
+                onTouchStart={[Function]}
                 readOnly={false}
                 spellCheck={true}
                 style={

src/components/signup/EmailForm.js

@@ -1,6 +1,8 @@
 // @flow
 import React from 'react'
 import debounce from 'lodash/debounce'
+import SimpleStore from '../../lib/undux/SimpleStore'
+import { getScreenHeight } from '../../lib/utils/Orientation'
 import { getDesignRelativeHeight } from '../../lib/utils/sizes'
 import { userModelValidations } from '../../lib/gundb/UserModel'
 
@@ -63,7 +65,8 @@ class EmailForm extends React.Component<Props, State> {
     const errorMessage = this.state.errorMessage || this.props.screenProps.error
     this.props.screenProps.error = undefined
     const { key } = this.props.navigation.state
-    const { styles } = this.props
+    const { styles, theme, store } = this.props
+    const isShowKeyboard = store.get && store.get('isMobileKeyboardShown')
 
     return (
       <CustomWrapper
@@ -96,8 +99,17 @@ class EmailForm extends React.Component<Props, State> {
               />
             </Section.Row>
           </Section.Stack>
-          <Section.Row justifyContent="flex-end" style={styles.bottomContent}>
-            <Section.Text fontSize={14} color="gray80Percent">
+          <Section.Row
+            justifyContent="flex-end"
+            style={{
+              marginTop: 'auto',
+
+              /*only for small screen (iPhone5 , etc.)*/
+              marginBottom: isShowKeyboard && getScreenHeight() <= 480 ? -30 : theme.sizes.default,
+            }}
+          >
+            {/*change fontSize only for small screen (iPhone5 , etc.)*/}
+            <Section.Text fontSize={isShowKeyboard && getScreenHeight() <= 480 ? 13 : 14} color="gray80Percent">
               We respect your privacy and will never sell or give away your info to any third party.
             </Section.Text>
           </Section.Row>
@@ -116,10 +128,6 @@ const getStylesFromProps = ({ theme }) => ({
     height: getDesignRelativeHeight(200),
     paddingBottom: theme.sizes.defaultDouble,
   },
-  bottomContent: {
-    marginTop: 'auto',
-    marginBottom: theme.sizes.default,
-  },
 })
 
-export default withStyles(getStylesFromProps)(EmailForm)
+export default withStyles(getStylesFromProps)(SimpleStore.withStore(EmailForm))

src/components/signup/PhoneForm.web.js

@@ -1,11 +1,14 @@
 // @flow
+import { isMobile } from 'mobile-device-detect'
 import React from 'react'
 import PhoneInput from 'react-phone-number-input'
 import debounce from 'lodash/debounce'
 import './PhoneForm.css'
 import { getDesignRelativeHeight } from '../../lib/utils/sizes'
 import { userModelValidations } from '../../lib/gundb/UserModel'
+import { getScreenHeight } from '../../lib/utils/Orientation'
 import logger from '../../lib/logger/pino-logger'
+import SimpleStore from '../../lib/undux/SimpleStore'
 import { withStyles } from '../../lib/styles'
 import Config from '../../config/config'
 import { getFirstWord } from '../../lib/utils/getFirstWord'
@@ -38,6 +41,20 @@ class PhoneForm extends React.Component<Props, State> {
     isValid: true,
   }
 
+  onFocus = () => {
+    const { store } = this.props
+    if (isMobile) {
+      store.set('isMobileKeyboardShown')(true)
+    }
+  }
+
+  onBlur = () => {
+    const { store } = this.props
+    if (isMobile) {
+      store.set('isMobileKeyboardShown')(false)
+    }
+  }
+
   componentDidUpdate() {
     if (this.props.screenProps.data.countryCode !== this.state.countryCode) {
       this.setState({
@@ -80,9 +97,9 @@ class PhoneForm extends React.Component<Props, State> {
     this.props.screenProps.error = undefined
 
     const { key } = this.props.navigation.state
-    const { styles } = this.props
+    const { styles, store, theme } = this.props
     const { fullName, loading } = this.props.screenProps.data
-
+    const isShowKeyboard = store.get && store.get('isMobileKeyboardShown')
     return (
       <CustomWrapper valid={this.state.isValid} handleSubmit={this.handleSubmit} loading={loading}>
         <Section grow justifyContent="flex-start">
@@ -100,12 +117,23 @@ class PhoneForm extends React.Component<Props, State> {
                 error={errorMessage}
                 onKeyDown={this.handleEnter}
                 country={this.state.countryCode}
+                onTouchStart={this.onFocus}
+                onBlur={this.onBlur}
               />
               <ErrorText error={errorMessage} style={styles.customError} />
             </Section.Stack>
           </Section.Stack>
-          <Section.Row justifyContent="center" style={styles.bottomRow}>
-            <Section.Text fontSize={14} color="gray80Percent">
+          <Section.Row
+            justifyContent="center"
+            style={{
+              marginTop: 'auto',
+
+              /*only for small screen (iPhone5 , etc.)*/
+              marginBottom: isShowKeyboard && getScreenHeight() <= 480 ? -15 : theme.sizes.default,
+            }}
+          >
+            {/*change fontSize only for small screen (iPhone5 , etc.)*/}
+            <Section.Text fontSize={isShowKeyboard && getScreenHeight() <= 480 ? 13 : 14} color="gray80Percent">
               A verification code will be sent to this number
             </Section.Text>
           </Section.Row>
@@ -132,4 +160,4 @@ const getStylesFromProps = ({ theme }) => ({
   },
 })
 
-export default withStyles(getStylesFromProps)(PhoneForm)
+export default withStyles(getStylesFromProps)(SimpleStore.withStore(PhoneForm))

src/components/signup/SignupState.js

@@ -444,7 +444,6 @@ const Signup = ({ navigation }: { navigation: any, screenProps: any }) => {
   }, [navigation.state.index])
 
   const { scrollableContainer, contentContainer } = styles
-
   return (
     <View style={{ flexGrow: shouldGrow ? 1 : 0 }}>
       <NavBar goBack={showNavBarGoBackButton ? back : undefined} title={title} />

src/components/signup/__tests__/__snapshots__/EmailForm.js.snap

@@ -233,8 +233,8 @@ exports[`EmailForm matches snapshot 1`] = `
                   "alignItems": "center",
                   "flexDirection": "row",
                   "justifyContent": "center",
-                  "marginBottom": "8px",
-                  "marginTop": "auto",
+                  "marginBottom": "16px",
+                  "marginTop": "16px",
                   "msFlexAlign": "center",
                   "msFlexDirection": "row",
                   "msFlexPack": "center",
@@ -292,6 +292,7 @@ exports[`EmailForm matches snapshot 1`] = `
                     onKeyDown={[Function]}
                     onKeyPress={[Function]}
                     onSelect={[Function]}
+                    onTouchStart={[Function]}
                     readOnly={false}
                     spellCheck={true}
                     style={

src/components/signup/__tests__/__snapshots__/NameForm.js.snap

@@ -252,6 +252,7 @@ exports[`NameForm matches snapshot 1`] = `
                     onKeyDown={[Function]}
                     onKeyPress={[Function]}
                     onSelect={[Function]}
+                    onTouchStart={[Function]}
                     readOnly={false}
                     spellCheck={true}
                     style={
@@ -762,6 +763,7 @@ exports[`NameForm matches snapshot with empty value 1`] = `
                     onKeyDown={[Function]}
                     onKeyPress={[Function]}
                     onSelect={[Function]}
+                    onTouchStart={[Function]}
                     readOnly={false}
                     spellCheck={true}
                     style={

src/components/signup/__tests__/__snapshots__/PhoneForm.web.js.snap

@@ -1770,6 +1770,7 @@ so we could verify you
                     onChange={[Function]}
                     onFocus={[Function]}
                     onKeyDown={[Function]}
+                    onTouchStart={[Function]}
                     type="tel"
                     value=""
                   />
@@ -1813,6 +1814,7 @@ so we could verify you
                 "alignItems": "center",
                 "flexDirection": "row",
                 "justifyContent": "center",
+                "marginBottom": "8px",
                 "marginTop": "auto",
                 "msFlexAlign": "center",
                 "msFlexDirection": "row",

src/index.css

@@ -22,7 +22,7 @@ html {
 #root {
   display: flex;
   flex-direction: column;
-  overflow: hidden;
+  /*overflow: hidden;*/
   width: 100%;
 }