Skip to content
Permalink
Browse files

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>
  • Loading branch information
2 people authored and sirpy committed Jan 8, 2020
1 parent 117af42 commit bdd3915c423987748eb36b3f412dbdbb8ffdcee3
@@ -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>
</>
@@ -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()
}
@@ -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}
@@ -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={
@@ -106,6 +106,7 @@ exports[`AmountInput matches snapshot 1`] = `
onResponderTerminationRequest={[Function]}
onSelect={[Function]}
onStartShouldSetResponder={[Function]}
onTouchStart={[Function]}
placeholder="0 G$"
readOnly={false}
spellCheck={true}
@@ -433,6 +433,7 @@ exports[`Amount matches snapshot 1`] = `
onResponderTerminationRequest={[Function]}
onSelect={[Function]}
onStartShouldSetResponder={[Function]}
onTouchStart={[Function]}
placeholder="0 G$"
readOnly={false}
spellCheck={true}
@@ -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}
@@ -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}
@@ -274,6 +274,7 @@ sent to you by text message:
onKeyDown={[Function]}
onKeyPress={[Function]}
onSelect={[Function]}
onTouchStart={[Function]}
readOnly={false}
spellCheck={true}
style={
@@ -205,6 +205,7 @@ exports[`SignIn - Mnemonics matches snapshot 1`] = `
onKeyDown={[Function]}
onKeyPress={[Function]}
onSelect={[Function]}
onTouchStart={[Function]}
readOnly={false}
spellCheck={true}
style={
@@ -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))
@@ -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))
@@ -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} />
@@ -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={
@@ -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={
@@ -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",
@@ -22,7 +22,7 @@ html {
#root {
display: flex;
flex-direction: column;
overflow: hidden;
/*overflow: hidden;*/
width: 100%;
}

0 comments on commit bdd3915

Please sign in to comment.
You can’t perform that action at this time.