[C-1261] Android sign on overflow (#2171)

* Improve layout of sign on screen so there is no overflow on android devices * Fix lint * Fix lint 2
AudiusProject · Oct 26, 2022 · e241f9c · e241f9c
1 parent edd5408
commit e241f9c
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 57 deletions.
diff --git a/packages/mobile/android/app/src/main/AndroidManifest.xml b/packages/mobile/android/app/src/main/AndroidManifest.xml
@@ -35,7 +35,7 @@
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
         android:screenOrientation="portrait"
-        android:windowSoftInputMode="adjustResize">
+        android:windowSoftInputMode="adjustPan">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />
             <category android:name="android.intent.category.LAUNCHER" />

diff --git a/packages/mobile/src/screens/signon/SignOn.tsx b/packages/mobile/src/screens/signon/SignOn.tsx
@@ -18,7 +18,6 @@ import {
   Image,
   ImageBackground,
   Keyboard,
-  Platform,
   StyleSheet,
   Text,
   TextInput,
@@ -27,6 +26,7 @@ import {
   View
 } from 'react-native'
 import RadialGradient from 'react-native-radial-gradient'
+import { SafeAreaView } from 'react-native-safe-area-context'
 import { useSelector, useDispatch } from 'react-redux'
 
 import backgImage from 'app/assets/images/DJportrait.jpg'
@@ -40,14 +40,12 @@ import { remindUserToTurnOnNotifications } from 'app/components/notification-rem
 import useAppState from 'app/hooks/useAppState'
 import { screen, track, make } from 'app/services/analytics'
 import { setVisibility } from 'app/store/drawers/slice'
-import { getIsKeyboardOpen } from 'app/store/keyboard/selectors'
 import { EventNames } from 'app/types/analytics'
 import { useThemeColors } from 'app/utils/theme'
 
 import type { SignOnStackParamList } from './types'
 
 const { getAccountUser } = accountSelectors
-const isAndroid = Platform.OS === 'android'
 const image = backgImage
 const windowWidth = Dimensions.get('window').width
 const defaultBorderColor = '#F2F2F4'
@@ -72,22 +70,19 @@ const styles = StyleSheet.create({
     width: '100%',
     zIndex: 5,
     backgroundColor: 'white',
-    alignItems: 'center',
     borderBottomRightRadius: 40,
     borderBottomLeftRadius: 40,
     padding: 28,
-    paddingBottom: 38,
-    paddingTop: 80
+    paddingBottom: 38
   },
-
+  drawerContent: { width: '100%', alignItems: 'center' },
   containerCTA: {
     position: 'absolute',
     bottom: 0,
     left: 0,
     width: '100%',
     zIndex: 4,
-    alignItems: 'center',
-    paddingBottom: 20
+    alignItems: 'center'
   },
   containerBack: {
     flex: 1,
@@ -135,7 +130,7 @@ const styles = StyleSheet.create({
   },
   signupCTAContainer: {
     flex: 1,
-    marginTop: 16
+    marginTop: 32
   },
   signupCTA: {
     resizeMode: 'contain',
@@ -334,8 +329,6 @@ const SignOn = ({ navigation }: SignOnProps) => {
   const [showEmptyPasswordError, setShowEmptyPasswordError] = useState(false)
   const [showDefaultError, setShowDefaultError] = useState(false)
 
-  const isKeyboardOpen = useSelector(getIsKeyboardOpen)
-
   const signOnStatus = useSelector(getStatus)
   const passwordField: EditableField = useSelector(getPasswordField)
   const emailField: EditableField = useSelector(getEmailField)
@@ -732,46 +725,48 @@ const SignOn = ({ navigation }: SignOnProps) => {
               )
             }}
           >
-            <Image
-              source={audiusLogoHorizontal}
-              style={styles.audiusLogoHorizontal}
-            />
-            <FormTitle isSignin={isSignin} />
-            <TextInput
-              style={[styles.input, { borderColor: emailBorderColor }]}
-              placeholderTextColor='#C2C0CC'
-              underlineColorAndroid='transparent'
-              placeholder='Email'
-              keyboardType='email-address'
-              autoComplete='off'
-              autoCorrect={false}
-              autoCapitalize='none'
-              enablesReturnKeyAutomatically={true}
-              maxLength={100}
-              textContentType='emailAddress'
-              onChangeText={(newText) => {
-                setShowDefaultError(false)
-                const newEmail = newText.trim()
-                setEmail(newEmail)
-                if (newEmail !== '') {
-                  validateEmail(newEmail)
-                }
-              }}
-              onFocus={() => {
-                setEmailBorderColor('#7E1BCC')
-              }}
-              onBlur={() => {
-                setEmailBorderColor(defaultBorderColor)
-                if (email !== '') {
-                  setShowInvalidEmailError(!isValidEmailString(email))
-                  // wait a bit for email validation to come back
-                  setTimeout(() => setAttemptedEmail(true), 1000)
-                }
-              }}
-            />
-            {passwordInputField()}
-            {errorView()}
-            <MainButton isWorking={isWorking} isSignin={isSignin} />
+            <SafeAreaView edges={['top']} style={styles.drawerContent}>
+              <Image
+                source={audiusLogoHorizontal}
+                style={styles.audiusLogoHorizontal}
+              />
+              <FormTitle isSignin={isSignin} />
+              <TextInput
+                style={[styles.input, { borderColor: emailBorderColor }]}
+                placeholderTextColor='#C2C0CC'
+                underlineColorAndroid='transparent'
+                placeholder='Email'
+                keyboardType='email-address'
+                autoComplete='off'
+                autoCorrect={false}
+                autoCapitalize='none'
+                enablesReturnKeyAutomatically={true}
+                maxLength={100}
+                textContentType='emailAddress'
+                onChangeText={(newText) => {
+                  setShowDefaultError(false)
+                  const newEmail = newText.trim()
+                  setEmail(newEmail)
+                  if (newEmail !== '') {
+                    validateEmail(newEmail)
+                  }
+                }}
+                onFocus={() => {
+                  setEmailBorderColor('#7E1BCC')
+                }}
+                onBlur={() => {
+                  setEmailBorderColor(defaultBorderColor)
+                  if (email !== '') {
+                    setShowInvalidEmailError(!isValidEmailString(email))
+                    // wait a bit for email validation to come back
+                    setTimeout(() => setAttemptedEmail(true), 1000)
+                  }
+                }}
+              />
+              {passwordInputField()}
+              {errorView()}
+              <MainButton isWorking={isWorking} isSignin={isSignin} />
+            </SafeAreaView>
           </Animated.View>
         </TouchableWithoutFeedback>
         <Animated.View
@@ -782,10 +777,6 @@ const SignOn = ({ navigation }: SignOnProps) => {
         >
           {Dimensions.get('window').height < 720 ? (
             <></>
-          ) : isAndroid && isKeyboardOpen ? (
-            // on android, if keyboard is showing and user is navigating away to the next screen
-            // the image below shows up above the keyboard and causes a weird transition */
-            <View style={styles.signupCTAContainer} />
           ) : (
             <View style={styles.signupCTAContainer}>
               <Image source={signupCTA} style={styles.signupCTA} />