chore(components): adding deprecation warning to KeyboardAwareScrollView

Author: William Porto

template/src/components/KeyboardAwareScrollView/KeyboardAwareScrollView.tsx

@@ -1,24 +1,26 @@
-import React, { FC, ReactNode } from 'react';
+import React, { FC, ReactNode } from "react";
 import {
   KeyboardAwareScrollView,
-  KeyboardAwareScrollViewProps
-} from 'react-native-keyboard-aware-scroll-view';
+  KeyboardAwareScrollViewProps,
+} from "react-native-keyboard-aware-scroll-view";
 
-interface KeyboardAwareScrollViewComponentProps extends KeyboardAwareScrollViewProps {
+interface KeyboardAwareScrollViewComponentProps
+  extends KeyboardAwareScrollViewProps {
   children: ReactNode;
 }
 
-const KeyboardAwareScrollViewComponent: FC<KeyboardAwareScrollViewComponentProps> = ({
-  children,
-  ...rest
-}) => (
-  <KeyboardAwareScrollView
-    showsVerticalScrollIndicator={false}
-    showsHorizontalScrollIndicator={false}
-    {...rest}
-  >
-    {children}
-  </KeyboardAwareScrollView>
-);
+/**
+ * @deprecated https://github.com/APSL/react-native-keyboard-aware-scroll-view/issues/494#issuecomment-900089166
+ */
+const KeyboardAwareScrollViewComponent: FC<KeyboardAwareScrollViewComponentProps> =
+  ({ children, ...rest }) => (
+    <KeyboardAwareScrollView
+      showsVerticalScrollIndicator={false}
+      showsHorizontalScrollIndicator={false}
+      {...rest}
+    >
+      {children}
+    </KeyboardAwareScrollView>
+  );
 
 export default KeyboardAwareScrollViewComponent;

template/src/screens/Form/Form.tsx

@@ -1,11 +1,11 @@
-import React, { FC, useRef, MutableRefObject, useState } from 'react';
-import { useForm, Controller } from 'react-hook-form';
-import { yupResolver } from '@hookform/resolvers/yup';
+import React, { FC, useRef, MutableRefObject, useState } from "react";
+import { ScrollView } from "react-native";
+import { useForm, Controller } from "react-hook-form";
+import { yupResolver } from "@hookform/resolvers/yup";
 
-import { Column, Input, InputRef, Button, KeyboardAwareScrollView } from 'src/components';
+import { Column, Input, InputRef, Button } from "src/components";
 
-import { FormExampleSchema } from 'src/utils';
-import { padding } from 'styled-system';
+import { FormExampleSchema } from "src/utils";
 
 interface FormExampleData {
   email: string;
@@ -17,14 +17,14 @@ const Form: FC = () => {
     control,
     handleSubmit,
     reset,
-    formState: { errors }
+    formState: { errors },
   } = useForm<FormExampleData>({
-    reValidateMode: 'onSubmit',
+    reValidateMode: "onSubmit",
     resolver: yupResolver(FormExampleSchema),
     defaultValues: {
-      email: '',
-      password: ''
-    }
+      email: "",
+      password: "",
+    },
   });
   const passwordInputRef = useRef() as MutableRefObject<InputRef>;
 
@@ -41,22 +41,22 @@ const Form: FC = () => {
 
   return (
     <Column flex={1}>
-      <KeyboardAwareScrollView
+      <ScrollView
         contentContainerStyle={{
           flex: 1,
-          justifyContent: 'center',
-          padding: 16
+          justifyContent: "center",
+          padding: 16,
         }}
       >
         <Controller
-          name='email'
+          name="email"
           control={control}
           render={({ field: { onChange, value } }): JSX.Element => (
             <Input
-              label='E-mail'
-              placeholder='[email protected]'
-              keyboardType='email-address'
-              returnKeyType='next'
+              label="E-mail"
+              placeholder="[email protected]"
+              keyboardType="email-address"
+              returnKeyType="next"
               value={value}
               error={errors.email?.message}
               onSubmitEditing={() => handleFocus(passwordInputRef)}
@@ -66,15 +66,15 @@ const Form: FC = () => {
         />
 
         <Controller
-          name='password'
+          name="password"
           control={control}
           render={({ field: { onChange, value } }): JSX.Element => (
             <Input
               ref={passwordInputRef}
               secureTextEntry={isPasswordInput}
-              label='Password'
-              placeholder='password'
-              returnKeyType='done'
+              label="Password"
+              placeholder="password"
+              returnKeyType="done"
               value={value}
               error={errors.password?.message}
               onChangeText={onChange}
@@ -84,10 +84,10 @@ const Form: FC = () => {
           )}
         />
 
-        <Button text='Submit form' onPress={handleSubmit(onSubmit)} mt={20} />
+        <Button text="Submit form" onPress={handleSubmit(onSubmit)} mt={20} />
 
-        <Button variant='secondary' text='Reset form' onPress={() => reset()} />
-      </KeyboardAwareScrollView>
+        <Button variant="secondary" text="Reset form" onPress={() => reset()} />
+      </ScrollView>
     </Column>
   );
 };