chore: reorginize imports

package.json

@@ -61,7 +61,7 @@
     "prettier:write": "prettier --write ./src",
     "register": "expo register",
     "start:fast": "EXPO_USE_EXOTIC=1 expo start --clear",
-    "start": "cross-env IS_DEV=1 expo start -c",
+    "start": "cross-env IS_DEV=1 expo start -c -g",
     "test:debug": "jest -o --watch --coverage=false",
     "test:final": "jest",
     "test": "jest --watch --coverage=false --changedSince=origin/main",

scripts/templates/component_template.tsx

@@ -1,6 +1,6 @@
-import { Center, Text } from 'native-base'
 import { FC } from 'react'
 
+import { Center, Text } from '~components/atoms'
 import { useTranslation } from '~hooks'
 
 type _NAME_Props = {

scripts/templates/screen_template.tsx

@@ -1,5 +1,4 @@
-import { Button, Center, Text } from 'native-base'
-
+import { Button, Center, Text } from '~components/atoms'
 import { useCallback, useTranslation } from '~hooks'
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment

src/components/AppLoading.tsx

@@ -1,9 +1,8 @@
 import * as SplashScreen from 'expo-splash-screen'
-import { Center, Spinner, View } from 'native-base'
 import { FC, PropsWithChildren, useCallback, useEffect } from 'react'
-import { StyleSheet } from 'react-native'
+import { StyleSheet, View } from 'react-native'
 
-import { AbsoluteFullFill } from './atoms'
+import { AbsoluteFullFill, Loader, Center } from './atoms'
 
 import { useAuth, useBoolean, useCachedResources } from '~hooks'
 
@@ -59,8 +58,7 @@ export const AppLoading: FC<PropsWithChildren> = ({ children }) => {
       {isLoading || isDelayLoading ? (
         <AbsoluteFullFill bg="white">
           <Center flex="1">
-            {/* //TODO: Add custom spinner */}
-            <Spinner />
+            <Loader type="bubbles" />
           </Center>
         </AbsoluteFullFill>
       ) : null}

src/components/KeyboardAwareScrollView.tsx

@@ -20,10 +20,8 @@ export const KeyboardAwareScrollView = forwardRef<KeyboardAwareScroll, Props>(
     const scrollViewContentContainerStyle = useMemo(
       () => [
         {
-          alignItems: 'center',
           backgroundColor: navigationTheme.colors.background,
           flexGrow: 1,
-          justifyContent: 'space-between',
         },
         contentContainerStyle,
       ],

src/components/LanguagePicker.tsx

@@ -1,12 +1,4 @@
-import {
-  HStack,
-  ChevronDownIcon,
-  Text,
-  Pressable,
-  useTheme,
-  Menu,
-  IPressableProps,
-} from 'native-base'
+import { Pressable, Menu, IPressableProps } from 'native-base'
 import { StyleSheet } from 'react-native'
 import Animated, {
   useAnimatedStyle,
@@ -17,7 +9,8 @@ import Animated, {
 
 import languages from '../../assets/languages.json'
 
-import { useCallback, useTranslation } from '~hooks'
+import { Icon, Row, Text } from '~components/atoms'
+import { useCallback, useTranslation, useTheme } from '~hooks'
 
 export const LanguagePicker: React.FC = () => {
   const { sizes } = useTheme()
@@ -46,14 +39,14 @@ export const LanguagePicker: React.FC = () => {
 
       return (
         <Pressable {...props}>
-          <HStack>
+          <Row>
             <Text fontSize="xl" pr="2">
               {languages[language].emoji}
             </Text>
             <Animated.View style={[animatedIconStyle, styles.icon]}>
-              <ChevronDownIcon />
+              <Icon size={24} name="arrow-down-line" />
             </Animated.View>
-          </HStack>
+          </Row>
         </Pressable>
       )
     },

src/components/Version.tsx

@@ -2,8 +2,10 @@ import * as Application from 'expo-application'
 import * as Clipboard from 'expo-clipboard'
 import Constants from 'expo-constants'
 import * as Updates from 'expo-updates'
-import { Text, Pressable } from 'native-base'
 import { useCallback } from 'react'
+import { Pressable } from 'react-native'
+
+import { Spacer, Text } from './atoms'
 
 const appName = Application?.applicationName ?? Constants?.expoConfig?.name
 const appVersion = Application?.nativeApplicationVersion ?? Constants?.expoConfig?.version
@@ -18,8 +20,9 @@ export const Version = ({ onPress }: { onPress: () => void }) => {
   }, [version])
 
   return (
-    <Pressable onPress={handleShortPress} onLongPress={onPress} delayLongPress={7000} mb={1}>
+    <Pressable onPress={handleShortPress} onLongPress={onPress} delayLongPress={7000}>
       <Text opacity={40}>{version}</Text>
+      <Spacer y="1" />
     </Pressable>
   )
 }

src/components/atoms/Absolute.tsx

@@ -1,5 +1,5 @@
-import { Box } from 'native-base'
-
 import type { AbsoluteProps } from './types'
 
+import { Box } from '~components/atoms'
+
 export const Absolute = (props: AbsoluteProps) => <Box {...props} position="absolute" />

src/components/atoms/AbsoluteFullFill.tsx

@@ -1,7 +1,7 @@
-import { Box } from 'native-base'
-
 import type { AbsoluteProps } from './types'
 
+import { Box } from '~components/atoms'
+
 export const AbsoluteFullFill = (props: AbsoluteProps) => (
   <Box flex={1} top={0} right={0} left={0} bottom={0} {...props} position="absolute" />
 )

src/components/atoms/BubblesLoader.tsx

@@ -1,7 +1,7 @@
-import { View } from 'native-base'
 import React from 'react'
 import Animated from 'react-native-reanimated'
 
+import { Box } from '~components/atoms'
 import { useBubblesLoader } from '~hooks/loaders'
 
 export type BubblesLoaderType = {
@@ -10,7 +10,7 @@ export type BubblesLoaderType = {
 }
 
 const FullCircle = ({ size = 10, color = 'black' }: BubblesLoaderType): JSX.Element => (
-  <View style={{ backgroundColor: color, borderRadius: size / 2, width: size, height: size }} />
+  <Box style={{ backgroundColor: color, borderRadius: size / 2, width: size, height: size }} />
 )
 
 export const BubblesLoader = ({ size = 40, color = 'black' }: BubblesLoaderType): JSX.Element => {

src/components/atoms/CircleLoader.tsx

@@ -1,4 +1,3 @@
-import { View } from 'native-base'
 import React from 'react'
 import Animated, {
   Extrapolate,
@@ -7,6 +6,7 @@ import Animated, {
   useAnimatedStyle,
 } from 'react-native-reanimated'
 
+import { Box } from '~components/atoms'
 import { useCircleLoader } from '~hooks/loaders'
 
 type HalfCircleProps = {
@@ -69,7 +69,7 @@ const HalfCircle = ({
     }
   })
   return (
-    <View
+    <Box
       pointerEvents="none"
       style={{
         ...halfCircleContainerStyle,
@@ -85,17 +85,17 @@ const HalfCircle = ({
           animatedStyle,
         ]}
       >
-        <View style={halfCircleContainerStyle}>
-          <View
+        <Box style={halfCircleContainerStyle}>
+          <Box
             style={{
               ...fullCircleStyle,
               borderWidth: thickness,
               borderColor: color,
             }}
           />
-        </View>
+        </Box>
       </Animated.View>
-    </View>
+    </Box>
   )
 }
 

src/components/atoms/DiskLoader.tsx

@@ -1,4 +1,3 @@
-import { View } from 'native-base'
 import React, { useEffect } from 'react'
 import Animated, {
   Easing,
@@ -11,6 +10,8 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated'
 
+import { Box } from '~components/atoms'
+
 export type DiskLoaderType = {
   circleColor?: string
   containerColor?: string
@@ -57,7 +58,7 @@ export const DiskLoader = ({
           animatedStyle,
         ]}
       >
-        <View
+        <Box
           width={circleSize}
           height={circleSize}
           borderRadius="full"

src/components/atoms/Icon.tsx

@@ -1,8 +1,8 @@
 import { createIconSetFromIcoMoon } from '@expo/vector-icons'
 import iconJson from 'assets/icomoon/selection.json'
-import { useTheme } from 'native-base'
 import { StyleProp, ViewStyle } from 'react-native'
 
+import { useTheme } from '~hooks'
 import { IconNames } from '~types/icon'
 import { ColorNames } from '~types/native-base'
 import { getColorValue } from '~utils'

src/components/atoms/index.ts

@@ -1,4 +1,4 @@
-export { Pressable as Touchable } from 'native-base'
+export { Pressable as Touchable, Box, Center, Text, Button, Row } from 'native-base'
 export { LinearGradient as Gradient } from 'expo-linear-gradient'
 
 export * from './Absolute'

src/components/bottomSheets/BottomSheet.tsx

@@ -6,9 +6,9 @@ import {
   BottomSheetBackdropProps,
 } from '@gorhom/bottom-sheet'
 import { BottomSheetModalMethods } from '@gorhom/bottom-sheet/lib/typescript/types'
-import { Box } from 'native-base'
 import { forwardRef, Ref, useCallback } from 'react'
 
+import { Box } from '~components/atoms'
 import { useMemo } from '~hooks'
 
 type Props = {

src/components/molecules/Field/Input.tsx

@@ -1,6 +1,6 @@
-import { FormControl } from 'native-base'
-import { forwardRef } from 'react'
-import { TextInput } from 'react-native'
+import { Box, Text } from 'native-base'
+import { forwardRef, useCallback, useImperativeHandle, useRef } from 'react'
+import { NativeSyntheticEvent, Pressable, TextInput, TextInputFocusEventData } from 'react-native'
 
 import { Input as BaseInput } from '../../atoms/Input'
 import type { FieldInputProps } from './types'
@@ -34,8 +34,23 @@ const layoutPropsKeys = [
   'py',
 ]
 
-export const Input = forwardRef<TextInput, FieldInputProps>(
-  ({ isDisabled, isRequired, isInvalid, label, helperText, errorMessage, ...props }, ref) => {
+export const Input = forwardRef<Partial<TextInput>, FieldInputProps>(
+  (
+    {
+      isDisabled,
+      isRequired,
+      isInvalid,
+      label,
+      helperText,
+      errorMessage,
+      onFocus,
+      onBlur,
+      ...props
+    },
+    ref
+  ) => {
+    const _inputRef = useRef<TextInput>(null)
+
     const layoutProps = useMemo(
       () =>
         Object.fromEntries(Object.entries(props).filter(([key]) => layoutPropsKeys.includes(key))),
@@ -47,17 +62,53 @@ export const Input = forwardRef<TextInput, FieldInputProps>(
       [props]
     )
 
+    const handleFocus = useCallback(
+      (e?: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        onFocus && e && onFocus?.(e)
+        _inputRef?.current?.focus()
+      },
+      [onFocus]
+    )
+    const handleBlur = useCallback(
+      (e?: NativeSyntheticEvent<TextInputFocusEventData>) => {
+        onBlur && e && onBlur(e)
+        _inputRef.current?.blur()
+      },
+      [onBlur]
+    )
+
+    useImperativeHandle(
+      ref,
+      () => ({
+        focus: handleFocus,
+        blur: handleBlur,
+        ..._inputRef.current,
+      }),
+      [handleBlur, handleFocus]
+    )
+
     return (
-      <FormControl
-        isRequired={isRequired}
-        isInvalid={isInvalid || Boolean(errorMessage)}
-        {...layoutProps}
-      >
-        {label && <FormControl.Label>{label}</FormControl.Label>}
-        <BaseInput {...inputProps} ref={ref} />
-        {helperText && <FormControl.HelperText>{helperText}</FormControl.HelperText>}
-        {errorMessage && <FormControl.ErrorMessage>{errorMessage}</FormControl.ErrorMessage>}
-      </FormControl>
+      <Box {...layoutProps} width="100%" mb="2">
+        <Pressable onPress={() => handleFocus()}>
+          {label && (
+            <Text color="gray.600" mb="1">
+              {label}
+              {isRequired && <Text color="error.600">*</Text>}
+            </Text>
+          )}
+          <BaseInput
+            isRequired={isRequired}
+            isInvalid={isInvalid || Boolean(errorMessage)}
+            {...inputProps}
+            ref={_inputRef}
+          />
+          {errorMessage && (
+            <Text mt="1" color="error.600">
+              {errorMessage}
+            </Text>
+          )}
+        </Pressable>
+      </Box>
     )
   }
 )

src/hooks/useSecurePassword.ts

@@ -1,9 +1,7 @@
-import { IInputProps } from 'native-base'
 import { useCallback, useState } from 'react'
 
 import { IconNames } from '~types/icon'
-
-export const useSecurePassword = (type: IInputProps['type']) => {
+export const useSecurePassword = (type?: 'text' | 'password') => {
   const isPasswordType = type === 'password'
   const [securePassword, setSecurePassword] = useState(isPasswordType)
   const iconName: IconNames = securePassword ? 'eye-line' : 'eye-off-line'

src/navigation/BottomTabNavigator.tsx

@@ -1,11 +1,10 @@
 import { createBottomTabNavigator, BottomTabNavigationOptions } from '@react-navigation/bottom-tabs'
 import { createStackNavigator } from '@react-navigation/stack'
-import { Text } from 'native-base'
 import { memo } from 'react'
 
 import { bottomTabsScreensData } from './config/tabs'
 
-import { Icon } from '~components'
+import { Text, Icon } from '~components/atoms'
 import { TAB_DEFAULT_ICON } from '~constants'
 import { useCallback, useNavigationTheme } from '~hooks'