From ddc6d61e455072a96d6bda24f6979bf5dc929a14 Mon Sep 17 00:00:00 2001 From: Alexander Petkov Date: Sat, 5 Aug 2023 13:33:54 +0300 Subject: [PATCH] KeyboardAwareScrollView: Remove redundant props flexGrow is not really appropriate, as the screen resizes, when keyboard is shown. Switch to fixed margin instead --- src/components/KeyboardAwareScrollView.js | 33 ------- .../KeyboardAwareScrollViewWrapper.js | 13 +++ .../Authentication/ForgottenPasswordModal.js | 1 - src/screens/Authentication/RegisterModal.js | 5 +- src/screens/Authentication/WelcomeScreen.js | 4 +- .../Home/buildings/AddBuildingScreen.js | 2 +- src/screens/Settings/ChangePasswordScreen.js | 98 +++++++++---------- 7 files changed, 67 insertions(+), 89 deletions(-) delete mode 100644 src/components/KeyboardAwareScrollView.js create mode 100644 src/components/KeyboardAwareScrollViewWrapper.js diff --git a/src/components/KeyboardAwareScrollView.js b/src/components/KeyboardAwareScrollView.js deleted file mode 100644 index 87fdbec..0000000 --- a/src/components/KeyboardAwareScrollView.js +++ /dev/null @@ -1,33 +0,0 @@ -import { View, Text, KeyboardAvoidingView, Keyboard, StatusBar } from 'react-native' -import React, { useEffect, useState } from 'react' -import { useWindowDimensions } from 'react-native'; -import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'; - -const KeyboardAwareScrollViewWrapper = ({ children }) => { - const [keyboardHeight, setKeyboardHeight] = useState(0); - const deviceHeight = useWindowDimensions().height - StatusBar.currentHeight - useEffect(() => { - function onKeyboardDidShow(e) { - setKeyboardHeight(e.endCoordinates.height - 10); - } - - function onKeyboardDidHide() { - setKeyboardHeight(0); - } - - const showSubscription = Keyboard.addListener('keyboardDidShow', onKeyboardDidShow); - const hideSubscription = Keyboard.addListener('keyboardDidHide', onKeyboardDidHide); - - return () => { - showSubscription.remove(); - hideSubscription.remove() - } - }, []) - return ( - - {children} - - ) -} - -export default KeyboardAwareScrollViewWrapper \ No newline at end of file diff --git a/src/components/KeyboardAwareScrollViewWrapper.js b/src/components/KeyboardAwareScrollViewWrapper.js new file mode 100644 index 0000000..b852c12 --- /dev/null +++ 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 ( + + {children} + + ) +} + +export default KeyboardAwareScrollViewWrapper \ No newline at end of file diff --git a/src/screens/Authentication/ForgottenPasswordModal.js b/src/screens/Authentication/ForgottenPasswordModal.js index 9b25162..8082659 100644 --- 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 index 1d8e9d4..e62044d 100644 --- 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 index a20a696..74814cb 100644 --- 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 index 234b886..2850e6a 100644 --- 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 index a82ce57..85b1663 100644 --- 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 }) => { /> )} - - - + + + + + value === confirmNewPassword || "Passwords don't match", }} secureTextEntry /> - - - value === confirmNewPassword || "Passwords don't match", - }} - secureTextEntry - /> - - - - value === newPassword || "Passwords don't match", - }} - secureTextEntry - /> - - - - - - + + + value === newPassword || "Passwords don't match", + }} + secureTextEntry + /> + + + + + + );