fixed a bug with the visibility of text input when the keyboard is open

.eslintrc.json

@@ -0,0 +1,33 @@
+{
+    "env": {
+      "browser": true,
+      "es2021": true
+    },
+    "extends": [
+      "standard-with-typescript",
+      "plugin:react/recommended"
+    ],
+    "parserOptions": {
+      "ecmaVersion": "latest",
+      "sourceType": "module",
+      "project": "./tsconfig.json"
+    },
+    "plugins": [
+        "react"
+    ],
+    "rules": {
+      "@typescript-eslint/consistent-type-imports": "off",
+      "@typescript-eslint/strict-boolean-expressions": "off",
+      "@typescript-eslint/no-misused-promises": "off",
+      "@typescript-eslint/explicit-function-return-type": "off",
+      "react/react-in-jsx-scope": "off",
+      "@typescript-eslint/consistent-type-assertions": "off",
+      "@typescript-eslint/ban-ts-comment": "off",
+      "@typescript-eslint/no-var-requires": "off",
+      "react/no-unescaped-entities": "off",
+      "@typescript-eslint/prefer-reduce-type-parameter": "off",
+      "@typescript-eslint/no-floating-promises": "off",
+      "@typescript-eslint/no-unused-expressions": "off",
+      "@typescript-eslint/restrict-plus-operands": "off"
+    }
+}

App.tsx

@@ -1,12 +1,12 @@
-import { AuthProvider } from './app/providers/AuthProvider';
-import { Navigation } from './app/navigation/Navigation';
-import { useFonts } from './app/hooks/useFonts';
-import { DataProvider } from './app/providers/DataProvider';
-import { StoryContainer } from './app/components/screens/home/stories/StoryContainer';
-import { GeneratePasswordProvider } from './app/providers/GeneratePasswordProvider';
+import { AuthProvider } from './app/providers/AuthProvider'
+import { Navigation } from './app/navigation/Navigation'
+import { useFonts } from './app/hooks/useFonts'
+import { DataProvider } from './app/providers/DataProvider'
+import { StoryContainer } from './app/components/screens/home/stories/StoryContainer'
+import { GeneratePasswordProvider } from './app/providers/GeneratePasswordProvider'
 
-export default function App() {
-  const { fontLoaded } = useFonts();
+export default function App () {
+  const { fontLoaded } = useFonts()
 
   if (fontLoaded) {
     return (
@@ -19,6 +19,6 @@ export default function App() {
           </GeneratePasswordProvider>
         </DataProvider>
       </AuthProvider>
-    );
+    )
   }
 }

app/components/layout/Layout.tsx

@@ -1,22 +1,23 @@
-import { View, ScrollView, StyleSheet } from 'react-native';
-import { FC, ReactNode } from 'react';
+import { View, ScrollView, StyleSheet } from 'react-native'
+import { FC, ReactNode } from 'react'
 
 interface Props {
-  isScrollView?: boolean,
-  children: ReactNode,
+  isScrollView?: boolean
+  children: ReactNode
 }
 
 export const Layout: FC<Props> = ({ children, isScrollView = true }) => {
-
   return (
     <View style={ styles.container }>
-      {isScrollView ? (
+      {isScrollView
+        ? (
         <ScrollView>
           {children}
         </ScrollView>
-      ) : (
-        children
-      )}
+          )
+        : (
+            children
+          )}
     </View>
   )
 }

app/components/layout/footer/Footer.tsx

@@ -1,17 +1,17 @@
-import { StyleSheet } from 'react-native';
-import { FC } from 'react';
-import { Padding } from '../../ui/Padding';
-import { menu } from './menu';
-import { NavItem } from './NavItem/NavItem';
-import { TypeRootStackParamList } from '../../../navigation/types';
+import { StyleSheet } from 'react-native'
+import { FC } from 'react'
+import { Padding } from '../../ui/Padding'
+import { menu } from './menu'
+import { NavItem } from './NavItem/NavItem'
+import { TypeRootStackParamList } from '../../../navigation/types'
 
 interface Props {
-  navigate: (screenName: keyof TypeRootStackParamList) => void,
-  currentRoute: string,
+  navigate: (screenName: keyof TypeRootStackParamList) => void
+  currentRoute: string
 }
 
 export const Footer: FC<Props> = (props) => {
-  const { navigate, currentRoute } = props;
+  const { navigate, currentRoute } = props
 
   return (
     <Padding style={styles.main}>
@@ -38,6 +38,6 @@ const styles = StyleSheet.create({
     paddingBottom: 20,
     paddingTop: 8,
     borderTopColor: '#E1E1E1',
-    borderTopWidth: 1,
+    borderTopWidth: 1
   }
 })

app/components/layout/footer/NavItem/NavItem.tsx

@@ -1,24 +1,24 @@
-import { Text, Pressable, StyleSheet } from 'react-native';
-import { FC } from 'react';
-import { IFooterItem } from '../../../../typedefs/typedefs';
-import { AntDesign } from '@expo/vector-icons';
-import { TypeRootStackParamList } from '../../../../navigation/types';
+import { Text, Pressable, StyleSheet } from 'react-native'
+import { FC } from 'react'
+import { IFooterItem } from '../../../../typedefs/typedefs'
+import { AntDesign } from '@expo/vector-icons'
+import { TypeRootStackParamList } from '../../../../navigation/types'
 
 interface Props {
-  item: IFooterItem,
-  navigate: (screenName: keyof TypeRootStackParamList) => void,
-  currentRoute: string,
+  item: IFooterItem
+  navigate: (screenName: keyof TypeRootStackParamList) => void
+  currentRoute: string
 }
 
 export const NavItem: FC<Props> = (props) => {
-  const { item, navigate, currentRoute } = props;
+  const { item, navigate, currentRoute } = props
 
-  const isActive = currentRoute === item.title;
+  const isActive = currentRoute === item.title
 
   return (
     <Pressable
       style={styles.main}
-      onPress={() => navigate(item.title)}
+      onPress={() => { navigate(item.title) }}
     >
       <AntDesign
         name={item.iconName}
@@ -40,10 +40,10 @@ const styles = StyleSheet.create({
     width: '20%'
   },
   icon: {
-    fontSize: 20,
+    fontSize: 20
   },
   text: {
     fontSize: 12,
-    marginTop: 4,
+    marginTop: 4
   }
 })

app/components/layout/footer/menu.ts

@@ -1,24 +1,24 @@
-import { IFooterItem } from '../../../typedefs/typedefs';
+import { IFooterItem } from '../../../typedefs/typedefs'
 
 export const menu: IFooterItem[] = [
   {
     iconName: 'creditcard',
-    title: 'Home',
+    title: 'Home'
   },
   {
     iconName: 'pay-circle1',
-    title: 'Payments',
+    title: 'Payments'
   },
   {
     iconName: 'switcher',
-    title: 'Services',
+    title: 'Services'
   },
   {
     iconName: 'message1',
-    title: 'Support',
+    title: 'Support'
   },
   {
     iconName: 'ellipsis1',
-    title: 'More',
-  },
+    title: 'More'
+  }
 ]

app/components/screens/auth/Auth.tsx

@@ -1,76 +1,78 @@
-import { View, Text, StyleSheet, Pressable } from 'react-native';
-import { FC, useCallback, useEffect, useState } from 'react';
-import { useAuth } from '../../../hooks/useAuth';
-import { Loader } from '../../../components/ui/Loader';
-import { Field } from '../../../components/ui/Field';
+import { View, Text, StyleSheet, Pressable } from 'react-native'
+import { FC, useCallback, useEffect, useState } from 'react'
+import { useAuth } from '../../../hooks/useAuth'
+import { Loader } from '../../../components/ui/Loader'
+import { Field } from '../../../components/ui/Field'
 import { Button } from '../../../components/ui/Button'
-import { IData } from '../../../typedefs/typedefs';
-import { AuthModal } from './AuthModal/AuthModal';
-import { useGeneratePassword } from '../../../hooks/useGeneratePassword';
+import { IData } from '../../../typedefs/typedefs'
+import { AuthModal } from './AuthModal/AuthModal'
+import { useGeneratePassword } from '../../../hooks/useGeneratePassword'
 
 export const Auth: FC = ({ navigation }: any) => {
-  const [data, setData] = useState<IData>({} as IData);
-  const [isReg, setIsReg] = useState(false);
-  const [isSecure, setIsSecure] = useState(true);
+  const [data, setData] = useState<IData>({} as IData)
+  const [isReg, setIsReg] = useState(false)
+  const [isSecure, setIsSecure] = useState(true)
 
   const {
     isLoading,
     login,
     register
-  } = useAuth();
+  } = useAuth()
 
-  const { password, isClicked } = useGeneratePassword();
+  const { password, isClicked } = useGeneratePassword()
 
-  const { isModalVisible, handleChangeModalVisible } = useGeneratePassword();
+  const { isModalVisible, handleChangeModalVisible } = useGeneratePassword()
 
   const authHandler = async () => {
-    const { email, password } = data;
+    const { email, password } = data
 
     if (isReg) {
-      await register(email, password);
+      await register(email, password)
     } else {
-      await login(email, password);
+      await login(email, password)
     }
 
-    setData({} as IData);
-    navigation.navigate('Home');
-  };
+    setData({} as IData)
+    navigation.navigate('Home')
+  }
 
   const handleChangeSecure = useCallback(() => {
-    setIsSecure((prevState => !prevState))
+    setIsSecure(prevState => !prevState)
   }, [])
 
   useEffect(() => {
-    setData({...data, password: password});
+    setData({ ...data, password })
   }, [isClicked])
 
   return (
     <View style={styles.main}>
       <View style={styles.block}>
-        <View style={{width: '75%'}}>
+        <View style={{ width: '75%' }}>
           <Text style={styles.text}>
             {isReg ? 'Sign Up' : 'Sign in'}
           </Text>
 
-          {isLoading ? (
+          {isLoading
+            ? (
             <Loader />
-          ) : (
+              )
+            : (
             <>
               <Field
                 val={data.email}
                 placeholder='Enter email'
-                onChange={val => setData({...data, email: val})}
+                onChange={val => { setData({ ...data, email: val }) }}
               />
 
               <Field
                 val={data.password}
                 placeholder='Enter password'
-                onChange={val => setData({...data, password: val})}
+                onChange={val => { setData({ ...data, password: val }) }}
                 isSecure={isSecure}
                 onChangeSecure={handleChangeSecure}
               />
 
-              <Pressable onPress={() => handleChangeModalVisible()}>
+              <Pressable onPress={() => { handleChangeModalVisible() }}>
                 <Text style={styles.lowText}>
                   {isReg ? 'Generate password' : ''}
                 </Text>
@@ -80,16 +82,16 @@ export const Auth: FC = ({ navigation }: any) => {
 
               <Button
                 onPress={authHandler}
-                title={`Let's go`}
+                title={'Let\'s go'}
               />
 
-              <Pressable onPress={() => setIsReg(!isReg)}>
+              <Pressable onPress={() => { setIsReg(!isReg) }}>
                 <Text style={styles.lowText}>
                   {isReg ? 'Login' : 'Register'}
                 </Text>
               </Pressable>
             </>
-          )}
+              )}
         </View>
       </View>
     </View>
@@ -99,12 +101,12 @@ export const Auth: FC = ({ navigation }: any) => {
 const styles = StyleSheet.create({
   main: {
     height: '100%',
-    width: '100%',
+    width: '100%'
   },
   block: {
     justifyContent: 'center',
     alignItems: 'center',
-    height: '100%',
+    height: '100%'
   },
   text: {
     textAlign: 'center',
@@ -116,5 +118,5 @@ const styles = StyleSheet.create({
     textAlign: 'right',
     opacity: 30,
     marginTop: 3
-  },
+  }
 })