feat: update login form to use the new keyboard component + more components for modal

Author: yjose

src/components/login-form.tsx

@@ -2,6 +2,7 @@ import { zodResolver } from '@hookform/resolvers/zod';
 import React from 'react';
 import type { SubmitHandler } from 'react-hook-form';
 import { useForm } from 'react-hook-form';
+import { KeyboardAvoidingView } from 'react-native-keyboard-controller';
 import * as z from 'zod';
 
 import { Button, ControlledInput, Text, View } from '@/ui';
@@ -31,37 +32,43 @@ export const LoginForm = ({ onSubmit = () => {} }: LoginFormProps) => {
     resolver: zodResolver(schema),
   });
   return (
-    <View className="flex-1 justify-center p-4">
-      <Text testID="form-title" className="pb-6 text-center text-2xl">
-        Sign In
-      </Text>
+    <KeyboardAvoidingView
+      style={{ flex: 1 }}
+      behavior="padding"
+      keyboardVerticalOffset={10}
+    >
+      <View className="flex-1 justify-center p-4">
+        <Text testID="form-title" className="pb-6 text-center text-2xl">
+          Sign In
+        </Text>
 
-      <ControlledInput
-        testID="name"
-        control={control}
-        name="name"
-        label="Name"
-      />
+        <ControlledInput
+          testID="name"
+          control={control}
+          name="name"
+          label="Name"
+        />
 
-      <ControlledInput
-        testID="email-input"
-        control={control}
-        name="email"
-        label="Email"
-      />
-      <ControlledInput
-        testID="password-input"
-        control={control}
-        name="password"
-        label="Password"
-        placeholder="***"
-        secureTextEntry={true}
-      />
-      <Button
-        testID="login-button"
-        label="Login"
-        onPress={handleSubmit(onSubmit)}
-      />
-    </View>
+        <ControlledInput
+          testID="email-input"
+          control={control}
+          name="email"
+          label="Email"
+        />
+        <ControlledInput
+          testID="password-input"
+          control={control}
+          name="password"
+          label="Password"
+          placeholder="***"
+          secureTextEntry={true}
+        />
+        <Button
+          testID="login-button"
+          label="Login"
+          onPress={handleSubmit(onSubmit)}
+        />
+      </View>
+    </KeyboardAvoidingView>
   );
 };

src/ui/modal-keyboard-aware-scroll-view.tsx

@@ -0,0 +1,42 @@
+// source https://kirillzyusko.github.io/react-native-keyboard-controller/docs/api/components/keyboard-aware-scroll-view
+/**
+ * This component is used to handle the keyboard in a modal.
+ * It is a wrapper around the `KeyboardAwareScrollView` component from `react-native-keyboard-controller`.
+ * It is used to handle the keyboard in a modal.
+ * example usage:
+      export function Example() {
+        return (
+          <Modal>
+            <BottomSheetKeyboardAwareScrollView>
+            </BottomSheetKeyboardAwareScrollView>
+          </Modal>
+        );
+        }
+ */
+import {
+  type BottomSheetScrollViewMethods,
+  createBottomSheetScrollableComponent,
+  SCROLLABLE_TYPE,
+} from '@gorhom/bottom-sheet';
+import type { BottomSheetScrollViewProps } from '@gorhom/bottom-sheet/src/components/bottomSheetScrollable/types';
+import { memo } from 'react';
+import type { KeyboardAwareScrollViewProps } from 'react-native-keyboard-controller';
+import { KeyboardAwareScrollView } from 'react-native-keyboard-controller';
+import Reanimated from 'react-native-reanimated';
+
+const AnimatedScrollView =
+  Reanimated.createAnimatedComponent<KeyboardAwareScrollViewProps>(
+    KeyboardAwareScrollView
+  );
+const BottomSheetScrollViewComponent = createBottomSheetScrollableComponent<
+  BottomSheetScrollViewMethods,
+  BottomSheetScrollViewProps
+>(SCROLLABLE_TYPE.SCROLLVIEW, AnimatedScrollView);
+const BottomSheetKeyboardAwareScrollView = memo(BottomSheetScrollViewComponent);
+
+BottomSheetKeyboardAwareScrollView.displayName =
+  'BottomSheetKeyboardAwareScrollView';
+
+export default BottomSheetKeyboardAwareScrollView as (
+  props: BottomSheetScrollViewProps & KeyboardAwareScrollViewProps
+) => ReturnType<typeof BottomSheetKeyboardAwareScrollView>;