feat: keyboard scroll view

package.json

@@ -36,14 +36,15 @@
     "react": "18.2.0",
     "react-native": "0.72.6",
     "react-native-calendar-picker": "^7.1.4",
+    "react-native-keyboard-aware-scroll-view": "^0.9.5",
     "react-native-maps": "1.7.1",
+    "react-native-pager-view": "6.2.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
     "react-native-svg": "13.9.0",
     "react-native-tab-view": "^3.5.2",
     "yup": "^1.3.3",
-    "zustand": "^4.4.7",
-    "react-native-pager-view": "6.2.0"
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

src/screens/RegisterScreen/EditAccount/index.tsx

@@ -3,6 +3,7 @@ import { View, ScrollView } from 'react-native';
 import { Formik } from 'formik';
 import * as yup from 'yup';
 import { CommonActions, useNavigation } from '@react-navigation/native';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 
 import { AvatarPicker, BigText, Button, Header, Input, PageWrapper } from '../../../components';
 import { InputDatePicker } from '../../../components/Calendar/InputDatePicker';
@@ -47,77 +48,79 @@ const EditAccount = () => {
         <View style={{ gap: 10 }}>
           <Header label={'Sign Up'} />
           <BigText>Edit account data</BigText>
-          <Formik
-            initialValues={{
-              photo: {
-                type: '',
-                uri: '',
-                name: ''
-              },
-              first_name: '',
-              last_name: '',
-              date_of_birth: '',
-              homebase: 0
-            }}
-            validationSchema={SignUpSchema}
-            onSubmit={(values) => {
-              const data = {
-                user: {
-                  ...user,
-                  first_name: values.first_name,
-                  last_name: values.last_name,
-                  date_of_birth: values.date_of_birth,
-                  homebase: values.homebase
-                },
+          <KeyboardAwareScrollView>
+            <Formik
+              initialValues={{
                 photo: {
-                  type: values.photo.type,
-                  uri: values.photo.uri,
-                  name: values.photo.uri.split('/').pop()!
-                }
-              };
+                  type: '',
+                  uri: '',
+                  name: ''
+                },
+                first_name: '',
+                last_name: '',
+                date_of_birth: '',
+                homebase: 0
+              }}
+              validationSchema={SignUpSchema}
+              onSubmit={(values) => {
+                const data = {
+                  user: {
+                    ...user,
+                    first_name: values.first_name,
+                    last_name: values.last_name,
+                    date_of_birth: values.date_of_birth,
+                    homebase: values.homebase
+                  },
+                  photo: {
+                    type: values.photo.type,
+                    uri: values.photo.uri,
+                    name: values.photo.uri.split('/').pop()!
+                  }
+                };
 
-              userRegister(data);
-            }}
-          >
-            {(props) => (
-              <View>
-                <View style={{ display: 'flex', alignItems: 'center' }}>
-                  <AvatarPicker selectedAvatar={(asset) => props.setFieldValue('photo', asset)} />
-                </View>
-                <Input
-                  onChange={props.handleChange('first_name')}
-                  value={props.values.first_name}
-                  onBlur={props.handleBlur('first_name')}
-                  placeholder={'Enter your first name'}
-                  header={'First name'}
-                  formikError={props.touched.first_name && props.errors.first_name}
-                />
-                <Input
-                  onChange={props.handleChange('last_name')}
-                  value={props.values.last_name}
-                  onBlur={props.handleBlur('last_name')}
-                  placeholder={'Enter your last name'}
-                  header={'Last name'}
-                  formikError={props.touched.last_name && props.errors.last_name}
-                />
-                <InputDatePicker
-                  selectedDate={(date) => props.setFieldValue('date_of_birth', date)}
-                  formikError={props.touched.date_of_birth && props.errors.date_of_birth}
-                />
-                <ModalFlatList
-                  headerTitle={'Region of origin'}
-                  selectedObject={(data) => props.setFieldValue('homebase', data.id)}
-                />
-                <ModalFlatList
-                  headerTitle={'Second region'}
-                  selectedObject={(data) => console.log(data)}
-                />
-                <View style={{ marginTop: 10 }}>
-                  <Button onPress={props.handleSubmit}>Sign up</Button>
+                userRegister(data);
+              }}
+            >
+              {(props) => (
+                <View>
+                  <View style={{ display: 'flex', alignItems: 'center' }}>
+                    <AvatarPicker selectedAvatar={(asset) => props.setFieldValue('photo', asset)} />
+                  </View>
+                  <Input
+                    onChange={props.handleChange('first_name')}
+                    value={props.values.first_name}
+                    onBlur={props.handleBlur('first_name')}
+                    placeholder={'Enter your first name'}
+                    header={'First name'}
+                    formikError={props.touched.first_name && props.errors.first_name}
+                  />
+                  <Input
+                    onChange={props.handleChange('last_name')}
+                    value={props.values.last_name}
+                    onBlur={props.handleBlur('last_name')}
+                    placeholder={'Enter your last name'}
+                    header={'Last name'}
+                    formikError={props.touched.last_name && props.errors.last_name}
+                  />
+                  <InputDatePicker
+                    selectedDate={(date) => props.setFieldValue('date_of_birth', date)}
+                    formikError={props.touched.date_of_birth && props.errors.date_of_birth}
+                  />
+                  <ModalFlatList
+                    headerTitle={'Region of origin'}
+                    selectedObject={(data) => props.setFieldValue('homebase', data.id)}
+                  />
+                  <ModalFlatList
+                    headerTitle={'Second region'}
+                    selectedObject={(data) => console.log(data)}
+                  />
+                  <View style={{ marginTop: 10 }}>
+                    <Button onPress={props.handleSubmit}>Sign up</Button>
+                  </View>
                 </View>
-              </View>
-            )}
-          </Formik>
+              )}
+            </Formik>
+          </KeyboardAwareScrollView>
         </View>
       </ScrollView>
     </PageWrapper>

src/screens/RegisterScreen/JoinUs/index.tsx

@@ -3,6 +3,7 @@ import { View, Text, ScrollView } from 'react-native';
 import { NavigationProp } from '@react-navigation/native';
 import { Formik } from 'formik';
 import * as yup from 'yup';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 
 import { PageWrapper, Header, Button, BigText, CheckBox, Input } from '../../../components';
 import { NAVIGATION_PAGES } from '../../../types';
@@ -37,89 +38,91 @@ const JoinUsScreen: FC<Props> = ({ navigation }) => {
         <Header label={'Sign Up'} />
         <View style={{ gap: 15 }}>
           <BigText>Join us. It's free!</BigText>
-          <Formik
-            initialValues={{
-              email: '',
-              username: '',
-              password: '',
-              repeatPassword: '',
-              checkboxAgreed: false
-            }}
-            validationSchema={JoinSchema}
-            onSubmit={(values) => {
-              const { email, username, password } = values;
+          <KeyboardAwareScrollView>
+            <Formik
+              initialValues={{
+                email: '',
+                username: '',
+                password: '',
+                repeatPassword: '',
+                checkboxAgreed: false
+              }}
+              validationSchema={JoinSchema}
+              onSubmit={(values) => {
+                const { email, username, password } = values;
 
-              JoinTest({
-                email,
-                username
-              }).then((data) => {
-                if (!data?.field && data?.result === 'OK') {
-                  navigation.navigate(NAVIGATION_PAGES.REGISTER_ACCOUNT_DATA);
+                JoinTest({
+                  email,
+                  username
+                }).then((data) => {
+                  if (!data?.field && data?.result === 'OK') {
+                    navigation.navigate(NAVIGATION_PAGES.REGISTER_ACCOUNT_DATA);
 
-                  updateRegistrationUserData({ email, username, password });
-                }
-              });
-            }}
-          >
-            {(props) => (
-              <View style={{ gap: 15 }}>
-                <Input
-                  onChange={props.handleChange('username')}
-                  value={props.values.username}
-                  onBlur={props.handleBlur('username')}
-                  placeholder={'Enter your username'}
-                  header={'Username'}
-                  formikError={
-                    data?.field === 'USERNAME USED'
-                      ? data?.field
-                      : props.touched.username && props.errors.username
+                    updateRegistrationUserData({ email, username, password });
                   }
-                />
-                <Input
-                  onChange={props.handleChange('email')}
-                  value={props.values.email}
-                  onBlur={props.handleBlur('email')}
-                  placeholder={'Enter your email'}
-                  header={'Email address'}
-                  inputMode={'email'}
-                  formikError={
-                    data?.field === 'EMAIL USED'
-                      ? data?.field
-                      : props.touched.email && props.errors.email
-                  }
-                />
-                <Input
-                  onChange={props.handleChange('password')}
-                  value={props.values.password}
-                  onBlur={props.handleBlur('password')}
-                  placeholder={'Enter your password'}
-                  header={'Password'}
-                  isPrivate={true}
-                  formikError={props.touched.password && props.errors.password}
-                />
-                <Input
-                  onChange={props.handleChange('repeatPassword')}
-                  value={props.values.repeatPassword}
-                  onBlur={props.handleBlur('repeatPassword')}
-                  placeholder={'Repeat your password'}
-                  header={'Confirm password'}
-                  isPrivate={true}
-                  formikError={props.touched.repeatPassword && props.errors.repeatPassword}
-                />
-                <CheckBox
-                  label={'I accept NM Terms & Conditions'}
-                  onChange={(value) => props.setFieldValue('checkboxAgreed', value)}
-                  value={props.values.checkboxAgreed}
-                />
-                <Text>
-                  {props.touched.checkboxAgreed && props.errors.checkboxAgreed
-                    ? 'To use our service you need to agree'
-                    : null}
-                </Text>
-                <Button onPress={props.handleSubmit}>Continue</Button>
-              </View>
-            )}
-          </Formik>
+                });
+              }}
+            >
+              {(props) => (
+                <View style={{ gap: 15 }}>
+                  <Input
+                    onChange={props.handleChange('username')}
+                    value={props.values.username}
+                    onBlur={props.handleBlur('username')}
+                    placeholder={'Enter your username'}
+                    header={'Username'}
+                    formikError={
+                      data?.field === 'USERNAME USED'
+                        ? data?.field
+                        : props.touched.username && props.errors.username
+                    }
+                  />
+                  <Input
+                    onChange={props.handleChange('email')}
+                    value={props.values.email}
+                    onBlur={props.handleBlur('email')}
+                    placeholder={'Enter your email'}
+                    header={'Email address'}
+                    inputMode={'email'}
+                    formikError={
+                      data?.field === 'EMAIL USED'
+                        ? data?.field
+                        : props.touched.email && props.errors.email
+                    }
+                  />
+                  <Input
+                    onChange={props.handleChange('password')}
+                    value={props.values.password}
+                    onBlur={props.handleBlur('password')}
+                    placeholder={'Enter your password'}
+                    header={'Password'}
+                    isPrivate={true}
+                    formikError={props.touched.password && props.errors.password}
+                  />
+                  <Input
+                    onChange={props.handleChange('repeatPassword')}
+                    value={props.values.repeatPassword}
+                    onBlur={props.handleBlur('repeatPassword')}
+                    placeholder={'Repeat your password'}
+                    header={'Confirm password'}
+                    isPrivate={true}
+                    formikError={props.touched.repeatPassword && props.errors.repeatPassword}
+                  />
+                  <CheckBox
+                    label={'I accept NM Terms & Conditions'}
+                    onChange={(value) => props.setFieldValue('checkboxAgreed', value)}
+                    value={props.values.checkboxAgreed}
+                  />
+                  <Text>
+                    {props.touched.checkboxAgreed && props.errors.checkboxAgreed
+                      ? 'To use our service you need to agree'
+                      : null}
+                  </Text>
+                  <Button onPress={props.handleSubmit}>Continue</Button>
+                </View>
+              )}
+            </Formik>
+          </KeyboardAwareScrollView>
         </View>
       </ScrollView>
     </PageWrapper>