Merge branch 'fix/stop-keyboard-from-overlapping-with-inputs' into 'main'

Fix: Define isKeyboardOffset based on Platform

See merge request bloodyhealth/drip!523

android/app/src/main/AndroidManifest.xml

@@ -33,7 +33,7 @@
         android:label="@string/app_name"
         android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode"
         android:launchMode="singleTask"
-        android:windowSoftInputMode="adjustResize"
+        android:windowSoftInputMode="adjustPan"
         android:screenOrientation="sensorPortrait">
         <intent-filter>
             <action android:name="android.intent.action.MAIN" />

components/common/app-text-input.js

@@ -1,30 +1,15 @@
 import React from 'react'
-import { KeyboardAvoidingView, StyleSheet, TextInput } from 'react-native'
+import { StyleSheet, TextInput } from 'react-native'
 import PropTypes from 'prop-types'
 
 import { Colors, Spacing, Typography } from '../../styles'
 
-const AppTextInput = ({ style, isKeyboardOffset, ...props }) => {
+const AppTextInput = ({ style, ...props }) => (
-  const behavior = isKeyboardOffset ? 'padding' : 'height'
+  <TextInput style={[styles.input, style]} {...props} />
-  const keyboardVerticalOffset = isKeyboardOffset ? 300 : 0
+)
-
-  return (
-    <KeyboardAvoidingView
-      behavior={behavior}
-      keyboardVerticalOffset={keyboardVerticalOffset}
-    >
-      <TextInput style={[styles.input, style]} {...props} />
-    </KeyboardAvoidingView>
-  )
-}
 
 AppTextInput.propTypes = {
   style: PropTypes.object,
-  isKeyboardOffset: PropTypes.bool,
-}
-
-AppTextInput.defultProps = {
-  isKeyboardOffset: true,
 }
 
 const styles = StyleSheet.create({

components/cycle-day/symptom-edit-view.js

@@ -109,6 +109,13 @@ const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
   }
   const iconName = shouldShowInfo ? 'chevron-up' : 'chevron-down'
   const noteText = symptom === 'note' ? data.value : data.note
+  const inputProps = {
+    multiline: true,
+    numberOfLines: 3,
+    scrollEnabled: false,
+    style: styles.input,
+    textAlignVertical: 'top',
+  }
 
   return (
     <AppModal onClose={onSave}>
@@ -157,7 +164,7 @@ const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
                   />
                   {isOtherSelected && (
                     <AppTextInput
-                      multiline={true}
+                      {...inputProps}
                       placeholder={sharedLabels.enter}
                       value={data.note}
                       onChangeText={(value) => onSelectBoxNote(value)}
@@ -179,8 +186,7 @@ const SymptomEditView = ({ date, onClose, symptom, symptomData }) => {
             <Segment style={styles.segmentBorder}>
               <AppText>{symtomPage[symptom].note}</AppText>
               <AppTextInput
-                multiline={true}
+                {...inputProps}
-                numberOfLines={3}
                 onChangeText={onEditNote}
                 placeholder={sharedLabels.enter}
                 testID="noteInput"
@@ -233,6 +239,9 @@ const styles = StyleSheet.create({
     zIndex: 3, // works on ios
     elevation: 3, // works on android
   },
+  input: {
+    height: Sizes.base * 5,
+  },
   modalContainer: {
     paddingHorizontal: Spacing.base,
   },

components/password-prompt.js

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
-import { Alert, StyleSheet, View } from 'react-native'
+import { Alert, KeyboardAvoidingView, StyleSheet, View } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
 
 import AppPage from './common/app-page'
@@ -68,22 +68,23 @@ const PasswordPrompt = ({ enableShowApp }) => {
     <>
       <Header isStatic />
       <AppPage contentContainerStyle={styles.contentContainer}>
-        <AppTextInput
+        <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={150}>
-          isKeyboardOffset={false}
+          <AppTextInput
-          onChangeText={setPassword}
+            onChangeText={setPassword}
-          secureTextEntry={true}
+            secureTextEntry={true}
-          placeholder={labels.enterPassword}
+            placeholder={labels.enterPassword}
-        />
+          />
-        <View style={styles.containerButtons}>
+          <View style={styles.containerButtons}>
-          <Button onPress={onConfirmDeletion}>{labels.forgotPassword}</Button>
+            <Button onPress={onConfirmDeletion}>{labels.forgotPassword}</Button>
-          <Button
+            <Button
-            disabled={!isPasswordEntered}
+              disabled={!isPasswordEntered}
-            isCTA={isPasswordEntered}
+              isCTA={isPasswordEntered}
-            onPress={unlockApp}
+              onPress={unlockApp}
-          >
+            >
-            {labels.title}
+              {labels.title}
-          </Button>
+            </Button>
-        </View>
+          </View>
+        </KeyboardAvoidingView>
       </AppPage>
     </>
   )

components/settings/common/confirm-with-password.js

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
-import { Alert, StyleSheet, View } from 'react-native'
+import { Alert, KeyboardAvoidingView, StyleSheet, View } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
 
 import AppTextInput from '../../common/app-text-input'
@@ -53,7 +53,7 @@ const ConfirmWithPassword = ({ onSuccess, onCancel }) => {
   const isPassword = password !== null
 
   return (
-    <>
+    <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={150}>
       <AppTextInput
         onChangeText={setPassword}
         placeholder={labels.enterCurrent}
@@ -70,7 +70,7 @@ const ConfirmWithPassword = ({ onSuccess, onCancel }) => {
           {shared.confirmToProceed}
         </Button>
       </View>
-    </>
+    </KeyboardAvoidingView>
   )
 }
 

components/settings/password/enter-new-password.js

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { StyleSheet } from 'react-native'
+import { KeyboardAvoidingView, StyleSheet } from 'react-native'
 import nodejs from 'nodejs-mobile-react-native'
 import PropTypes from 'prop-types'
 
@@ -41,9 +41,8 @@ const EnterNewPassword = ({ changeEncryptionAndRestart }) => {
   const isButtonActive = password.length > 0 && passwordConfirmation.length > 0
 
   return (
-    <>
+    <KeyboardAvoidingView behavior="padding" keyboardVerticalOffset={150}>
       <AppTextInput
-        isKeyboardOffset={false}
         onChangeText={setPassword}
         placeholder={labels.enterNew}
         textContentType="password"
@@ -51,7 +50,6 @@ const EnterNewPassword = ({ changeEncryptionAndRestart }) => {
         secureTextEntry={true}
       />
       <AppTextInput
-        isKeyboardOffset={false}
         onChangeText={setPasswordConfirmation}
         placeholder={labels.confirmPassword}
         textContentType="password"
@@ -68,7 +66,7 @@ const EnterNewPassword = ({ changeEncryptionAndRestart }) => {
       >
         {labels.savePassword}
       </Button>
-    </>
+    </KeyboardAvoidingView>
   )
 }