KeyboardAwareScrollView: Remove redundant props

flexGrow is not really appropriate, as the screen resizes, when keyboard is shown. Switch to fixed margin instead
sashko9807 · Aug 5, 2023 · ddc6d61 · ddc6d61
1 parent e379305
commit ddc6d61
Show file tree

Hide file tree

Showing 7 changed files with 67 additions and 89 deletions.
diff --git a/src/components/KeyboardAwareScrollView.js b/src/components/KeyboardAwareScrollView.js
diff --git a/src/components/KeyboardAwareScrollViewWrapper.js b/src/components/KeyboardAwareScrollViewWrapper.js
@@ -0,0 +1,13 @@
+
+import React from 'react'
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+
+const KeyboardAwareScrollViewWrapper = ({ children }) => {
+    return (
+        <KeyboardAwareScrollView style={{ flex: 1 }} keyboardShouldPersistTaps>
+            {children}
+        </KeyboardAwareScrollView>
+    )
+}
+
+export default KeyboardAwareScrollViewWrapper
diff --git a/src/screens/Authentication/ForgottenPasswordModal.js b/src/screens/Authentication/ForgottenPasswordModal.js
@@ -9,7 +9,6 @@ import ControlledUserInput from '../../components/ControlledUserInput';
 import { useForm } from 'react-hook-form';
 import { useForgotPasswordMutation } from '../../api/userQueries';
 
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import globalStyles from '../../globals/styles'
 import { useApiResultReducer, ACTIONS } from '../../hooks/useApiResultReducer';
 

diff --git a/src/screens/Authentication/RegisterModal.js b/src/screens/Authentication/RegisterModal.js
@@ -13,7 +13,7 @@ import { moderateScale } from '../../utils/scaling';
 
 import { useRegisterMutation } from '../../api/userQueries';
 import globalStyles from '../../globals/styles'
-import KeyboardAwareScrollViewWrapper from '../../components/KeyboardAwareScrollView';
+import KeyboardAwareScrollViewWrapper from '../../components/KeyboardAwareScrollViewWrapper';
 
 const EMAIL_REGEXP =
   /^[a-zA-Z0-9.!#$%&'*+\/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/;
@@ -152,6 +152,7 @@ const mainStyle = StyleSheet.create({
   },
   authContainer: {
     flexGrow: 1,
+    marginTop: 20,
     borderTopRightRadius: 25,
     borderTopLeftRadius: 25,
     backgroundColor: globalStyles.colorSet.SECONDARY,
@@ -184,7 +185,7 @@ const mainStyle = StyleSheet.create({
     fontWeight: 'bold',
   },
   btnContainer: {
-    marginTop: moderateScale(120),
+    marginTop: moderateScale(160),
     borderColor: 'red',
     justifyContent: 'flex-end',
   },

diff --git a/src/screens/Authentication/WelcomeScreen.js b/src/screens/Authentication/WelcomeScreen.js
@@ -10,7 +10,7 @@ import ApiResultModal from '../../components/ApiResultModal'
 import ActivityIndicatorComponent from '../../components/ActivityIndicatorComponent';
 import { useApiResultReducer, ACTIONS } from '../../hooks/useApiResultReducer';
 import { moderateScale } from '../../utils/scaling';
-import KeyboardAwareScrollViewWrapper from '../../components/KeyboardAwareScrollView';
+import KeyboardAwareScrollViewWrapper from '../../components/KeyboardAwareScrollViewWrapper';
 
 const WelcomeScreen = ({ navigation }) => {
     const [email, setEmail] = useState('');
@@ -179,7 +179,7 @@ const styles = StyleSheet.create({
     btnContainer: {
         justifyContent: 'space-between',
         alignItems: 'center',
-        marginTop: moderateScale(10),
+        marginTop: moderateScale(100),
     },
     buttons: {
         position: 'relative',

diff --git a/src/screens/Home/buildings/AddBuildingScreen.js b/src/screens/Home/buildings/AddBuildingScreen.js
@@ -24,7 +24,7 @@ import { useForm } from 'react-hook-form';
 import globalStyles from '../../../globals/styles'
 
 import { ACTIONS, useApiResultReducer } from '../../../hooks/useApiResultReducer';
-import KeyboardAwareScrollViewWrapper from '../../../components/KeyboardAwareScrollView';
+import KeyboardAwareScrollViewWrapper from '../../../components/KeyboardAwareScrollViewWrapper';
 
 const AddBuildingScreen = ({ navigation }) => {
   const [addBuilding, { isLoading, isSuccess, isError }] =

diff --git a/src/screens/Settings/ChangePasswordScreen.js b/src/screens/Settings/ChangePasswordScreen.js
@@ -1,4 +1,4 @@
-import { View, StyleSheet, ScrollView, KeyboardAvoidingView } from 'react-native';
+import { View, StyleSheet } from 'react-native';
 import { useState } from 'react';
 
 import MainLayout from '../../container/MainLayout';
@@ -8,7 +8,7 @@ import ApiResultModal from '../../components/ApiResultModal';
 import { InlineButton } from '../../components/Buttons';
 import ControlledUserInput from '../../components/ControlledUserInput';
 
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import KeyboardAwareScrollViewWrapper from '../../components/KeyboardAwareScrollViewWrapper'
 
 import { useForm } from 'react-hook-form';
 
@@ -73,61 +73,59 @@ const ChangePasswordScreen = ({ navigation }) => {
         />
       )}
       <MainLayout>
-        <KeyboardAvoidingView behavior="padding" style={{ flex: 1 }} enabled keyboardVerticalOffset={80}>
-          <ScrollView keyboardShouldPersistTaps="handled">
-            <View style={styles.wrapper}>
+        <KeyboardAwareScrollViewWrapper>
+          <View style={styles.wrapper}>
+            <ControlledUserInput
+              title={'Current Password'}
+              name={'currPassword'}
+              control={control}
+              placeholder={'Current Password'}
+              rules={{
+                required: 'Current Password field is required',
+              }}
+              secureTextEntry
+            />
+            <View style={styles.verticalSpacing}>
               <ControlledUserInput
-                title={'Current Password'}
-                name={'currPassword'}
+                title={'New Password'}
+                name={'newPassword'}
                 control={control}
-                placeholder={'Current Password'}
+                placeholder={'New Password'}
                 rules={{
-                  required: 'Current Password field is required',
+                  required: 'New Password field is required',
+                  minLength: {
+                    value: 6,
+                    message: 'Password must be at least 6 characters long',
+                  },
+                  validate: (value) =>
+                    value === confirmNewPassword || "Passwords don't match",
                 }}
                 secureTextEntry
               />
-              <View style={styles.verticalSpacing}>
-                <ControlledUserInput
-                  title={'New Password'}
-                  name={'newPassword'}
-                  control={control}
-                  placeholder={'New Password'}
-                  rules={{
-                    required: 'New Password field is required',
-                    minLength: {
-                      value: 6,
-                      message: 'Password must be at least 6 characters long',
-                    },
-                    validate: (value) =>
-                      value === confirmNewPassword || "Passwords don't match",
-                  }}
-                  secureTextEntry
-                />
-              </View>
-              <View style={styles.verticalSpacing}>
-                <ControlledUserInput
-                  title={'Confirm New Password'}
-                  name={'confirmNewPassword'}
-                  control={control}
-                  placeholder={'Confirm New Password'}
-                  rules={{
-                    required: 'Confirm New Password field is required',
-                    validate: (value) =>
-                      value === newPassword || "Passwords don't match",
-                  }}
-                  secureTextEntry
-                />
-              </View>
-              <View style={styles.btnChangePassword}>
-                <InlineButton
-                  title="Change Password"
-                  onPress={handleSubmit(updateUserPassword)}
-                  borderRadius={10}
-                />
-              </View>
             </View>
-          </ScrollView>
-        </KeyboardAvoidingView>
+            <View style={styles.verticalSpacing}>
+              <ControlledUserInput
+                title={'Confirm New Password'}
+                name={'confirmNewPassword'}
+                control={control}
+                placeholder={'Confirm New Password'}
+                rules={{
+                  required: 'Confirm New Password field is required',
+                  validate: (value) =>
+                    value === newPassword || "Passwords don't match",
+                }}
+                secureTextEntry
+              />
+            </View>
+            <View style={styles.btnChangePassword}>
+              <InlineButton
+                title="Change Password"
+                onPress={handleSubmit(updateUserPassword)}
+                borderRadius={10}
+              />
+            </View>
+          </View>
+        </KeyboardAwareScrollViewWrapper>
       </MainLayout>
     </>
   );