rebase solution

package.json

@@ -1,6 +1,6 @@
 {
   "name": "rn-boiler-template",
-  "version": "1.67.40",
+  "version": "1.67.41",
   "description": "Clean and minimalist React Native template for a quick start with TypeScript and components",
   "scripts": {
     "test": "exit 0"

template/_babelrc

@@ -12,20 +12,23 @@
         "alias": {
           "@assets": "./src/app/assets",
           "@common": "./src/app/common",
+          "@hooks": "./src/app/common/hooks",
           "@typed-redux-saga": "./src/app/common/typed-redux-saga",
           "@animated": "./src/app/common/animated",
           "@config": "./src/app/config",
           "@features": "./src/app/features",
-          "@library": "./src/app/library",
           "@components": "./src/app/library/components",
           "@networking": "./src/app/library/networking",
           "@utils": "./src/app/library/utils",
+          "@storage": "./src/app/library/utils/storage",
           "@model": "./src/app/model",
           "@navigation": "./src/app/navigation",
-          "@store": "./src/app/store",
+          "@store": "./src/app/redux/store",
+          "@redux-slice": "./src/app/redux/action-slice",
+          "@redux-action-type": "./src/app/redux/action-type",
+          "@saga": "./src/app/redux/saga",
           "@theme": "./src/app/themes",
-          "@transition": "./src/app/transition",
-          "@app_redux": "./src/app/store/app_redux"
+          "@transition": "./src/app/transition"
         }
       }
     ]

template/src/app.tsx

@@ -8,10 +8,10 @@ import { Provider } from 'react-redux';
 
 import { AppModule, isIos } from '@common';
 import { PortalProvider } from '@components';
+import { AppContainer } from '@navigation/app-navigation';
 import { store } from '@store/store';
+import I18n from '@utils/i18n/i18n';
 
-import I18n from './app/library/utils/i18n/i18n';
-import { AppContainer } from './app/navigation/app-navigation';
 declare module 'react' {
   // eslint-disable-next-line @typescript-eslint/ban-types
   function forwardRef<T, P = {}>(

template/src/app/common/handle-error/index.ts

@@ -1,13 +1,12 @@
-/* eslint-disable @typescript-eslint/no-explicit-any */
 import { ERROR_NETWORK_CODE } from '@config/api';
 import { ResponseBase } from '@config/type';
-import { translate } from '@utils';
+import { translate } from '@utils/i18n/translate';
 
-const handleData = (responseError: ResponseBase<any>) => {
+const handleData = (responseError: ResponseBase<null>) => {
   return responseError;
 };
 
-export const HandleErrorApi = (status: number) => {
+export const handleErrorApi = (status: number) => {
   switch (status) {
     case ERROR_NETWORK_CODE:
       return handleData({

template/src/app/common/handle/index.ts

@@ -1,24 +1,25 @@
 import { sizeScale } from '../scale/index';
 
-export const checkKeyInObject = (T: any, key: string) => {
+export const checkKeyInObject = (T: Record<string, unknown>, key: string) => {
   return Object.keys(T).includes(key);
 };
-export const propsToStyle = <T = any>(arrStyle: Array<T>) => {
+export const propsToStyle = <T = Record<string, number | string>>(
+  arrStyle: Array<T>,
+) => {
   return arrStyle
     .filter(
       x => x !== undefined && !Object.values(x).some(v => v === undefined),
     )
-    .reduce((prev: Record<string, unknown>, curr: any) => {
-      // eslint-disable-next-line prefer-destructuring
-      const firstKey = Object.keys(curr)[0];
+    .reduce((prev: Record<string, number | string>, curr) => {
+      const firstKey = Object.keys(curr)[0] as keyof T;
       const firstValue = curr[firstKey];
 
       if (
-        !['opacity', 'zIndex', 'flex'].includes(firstKey as never) &&
+        !['opacity', 'zIndex', 'flex'].includes(firstKey as string) &&
         typeof firstValue === 'number'
       ) {
-        curr[firstKey] = sizeScale(firstValue);
+        (curr[firstKey] as unknown as number) = sizeScale(firstValue);
       }
       return { ...prev, ...curr };
-    }, {});
+    }, {} as Record<string, number | string>);
 };

template/src/app/common/index.ts

@@ -1,5 +1,4 @@
 export * from './create-form-data';
-export * from './hooks';
 export * from './handle-error';
 // export * from './request-permission';
 export * from './constant';

template/src/app/common/method/index.ts

@@ -2,8 +2,8 @@
 import { Alert, Platform } from 'react-native';
 
 import { R } from '@assets/value';
-import { onLogout } from '@store/app-redux/reducer';
-import { remove } from '@utils';
+import { appActions } from '@redux-slice';
+import { remove } from '@storage';
 
 import { dispatch } from '../redux';
 
@@ -29,6 +29,6 @@ export const onCheckType = (
 export const isIos = Platform.OS === 'ios';
 
 export const logout = () => {
-  dispatch(onLogout());
+  dispatch(appActions.onLogout());
   remove(R.strings.TOKEN);
 };

template/src/app/features/un-authentication/login/design/components/input.tsx → template/src/app/features/un-authentication/login/components/input.tsx

@@ -6,7 +6,7 @@ import { useController, useFormContext } from 'react-hook-form';
 
 import { CustomOmit } from '@common';
 import { HelperText, TextField } from '@components';
-import { InputFlatProps } from '@library/components/text-field/components/flat/type';
+import { InputFlatProps } from '@components/text-field/components/flat/type';
 import { FormLoginType } from '@model/login';
 
 interface InputProps<T extends Record<string, any>>

template/src/app/features/un-authentication/login/design/index.tsx → template/src/app/features/un-authentication/login/index.tsx

@@ -3,7 +3,7 @@ import { Alert } from 'react-native';
 
 import isEqual from 'react-fast-compare';
 
-import { dispatch, useAnimatedState } from '@common';
+import { dispatch } from '@common';
 import {
   ActionSheet,
   Block,
@@ -27,8 +27,9 @@ import {
   TouchableScale,
   Wallpaper,
 } from '@components';
+import { useAnimatedState } from '@hooks';
 import { FormLoginType } from '@model/login';
-import { onSetAppTheme } from '@store/app-redux/reducer';
+import { appActions } from '@redux-slice';
 
 import { FormLogin } from './components/form-login';
 
@@ -45,7 +46,7 @@ const LoginComponent = () => {
 
   // function
   const onSubmit = useCallback((data: FormLoginType) => {
-    dispatch(onSetAppTheme('dark'));
+    dispatch(appActions.onSetAppTheme('dark'));
     Alert.alert(JSON.stringify(data));
   }, []);
 
@@ -59,14 +60,15 @@ const LoginComponent = () => {
       <Wallpaper />
 
       <Screen
+        bottomInsetColor="transparent"
         scroll
         style={{ paddingVertical: 0, paddingHorizontal: 10 }}
         backgroundColor={'transparent'}>
         <FormLogin onSubmit={onSubmit} />
         <Block block height={150}>
           <LightBox
             source={{
-              uri: 'https://images.unsplash.com/photo-1648152298347-ee10674a14fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1374&q=80',
+              uri: 'https://images.unsplash.com/photo-1650704098443-241484a53bd7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1074&q=80',
             }}
           />
         </Block>

template/src/app/library/components/block/index.tsx

@@ -46,7 +46,7 @@ const BlockComponent = forwardRef(
       borderRadius,
       shadow,
       flex,
-      shadowConfig,
+      shadowConfig = {},
       position,
       flexWrap,
       left,
@@ -88,7 +88,7 @@ const BlockComponent = forwardRef(
           borderColor: '#bbb',
         },
         colorTheme && { backgroundColor: theme.colors[colorTheme] },
-        borderColorTheme && { borc: theme.colors[borderColorTheme] },
+        borderColorTheme && { borderColor: theme.colors[borderColorTheme] },
         middle && { alignItems: 'center' },
         shadow && {
           shadowColor: '#000',
@@ -102,6 +102,7 @@ const BlockComponent = forwardRef(
           elevation: 5,
           ...shadowConfig,
         },
+
         propsToStyle([
           { margin },
           { marginLeft },

template/src/app/library/components/block/type.ts

@@ -1,5 +1,11 @@
 import React from 'react';
-import { FlexAlignType, StyleProp, ViewProps, ViewStyle } from 'react-native';
+import {
+  ColorValue,
+  FlexAlignType,
+  StyleProp,
+  ViewProps,
+  ViewStyle,
+} from 'react-native';
 
 import { Colors } from '@theme';
 
@@ -20,14 +26,10 @@ type FlexWrap = 'wrap' | 'nowrap' | 'wrap-reverse';
 type OverFlow = 'visible' | 'hidden' | 'scroll';
 
 export type ShadowConfig = {
-  shadowColor?: string;
-  shadowOffset?: {
-    width?: number;
-    height?: number;
-  };
-  shadowOpacity?: number;
-  shadowRadius?: number;
-  elevation?: number;
+  shadowColor?: ColorValue | undefined;
+  shadowOffset?: { width: number; height: number } | undefined;
+  shadowOpacity?: number | undefined;
+  shadowRadius?: number | undefined;
 };
 export interface BlockProps extends ViewProps {
   flexWrap?: FlexWrap;

template/src/app/library/components/comment-loading/index.tsx

@@ -3,7 +3,7 @@ import { useWindowDimensions, View } from 'react-native';
 
 import isEqual from 'react-fast-compare';
 
-import { useAsyncState, useInterval } from '@common';
+import { useAsyncState, useInterval } from '@hooks';
 
 import {
   DELAY_MS,

template/src/app/library/components/fab/components/group/index.tsx

@@ -13,14 +13,14 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { useMix, useRadian, useSharedSpringTransition } from '@animated';
 import { onCheckType } from '@common';
-import { Text } from '@library/components/text';
 
 import { ButtonGroup } from './button-group';
 import { SIZE_FAB, SPACE_BETWEEN } from './constants';
 import { styles } from './styles';
 import { Actions, FABGroupProps } from './type';
 
 import { Icon } from '../../../icon';
+import { Text } from '../../../text';
 
 const FABGroupComponent = (props: FABGroupProps) => {
   const { style, icon = 'plus', label, actions = [] } = props;

template/src/app/library/components/image/index.tsx

@@ -7,7 +7,8 @@ import FastImage, { OnLoadEvent } from 'react-native-fast-image';
 import Animated, { useAnimatedStyle } from 'react-native-reanimated';
 
 import { useSharedTransition } from '@animated';
-import { onCheckType, useAsyncState, useMounted } from '@common';
+import { onCheckType } from '@common';
+import { useAsyncState, useMounted } from '@hooks';
 
 import { styles } from './styles';
 import { ImageProps } from './type';

template/src/app/library/components/modal/index.tsx

@@ -2,7 +2,7 @@ import React, { memo, useCallback, useEffect, useRef, useState } from 'react';
 
 import isEqual from 'react-fast-compare';
 
-import { useDismissKeyboard } from '@common';
+import { useDismissKeyboard } from '@hooks';
 
 import { ModalContent } from './modal-content';
 import { ModalProps } from './type';

template/src/app/library/components/modal/modal-content.tsx

@@ -26,13 +26,8 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { sharedClamp, sharedTiming } from '@animated';
-import {
-  AppModule,
-  CustomOmit,
-  isIos,
-  onCheckType,
-  useDisableBackHandler,
-} from '@common';
+import { AppModule, CustomOmit, isIos, onCheckType } from '@common';
+import { useDisableBackHandler } from '@hooks';
 
 import {
   ANIMATED_IN_DURATION,

template/src/app/library/components/progress-dialog/index.tsx

@@ -9,7 +9,7 @@ import { ActivityIndicator, View } from 'react-native';
 
 import isEqual from 'react-fast-compare';
 
-import { useDisableBackHandler, useDismissKeyboard } from '@common';
+import { useDisableBackHandler, useDismissKeyboard } from '@hooks';
 import { useTheme } from '@theme';
 
 import { styles } from './styles';

template/src/app/library/components/snack-bar/snack-bar-item.tsx

@@ -6,8 +6,8 @@ import Animated, { runOnJS } from 'react-native-reanimated';
 import { useSafeAreaInsets } from 'react-native-safe-area-context';
 
 import { sharedTiming } from '@animated';
-import { VectorIcon, VectorIconName } from '@assets/vector-icon/vector-icon';
-import { useMessageYupTranslation } from '@common';
+import { VectorIcon, VectorIconIcon } from '@assets/vector-icon/vector-icon';
+import { useMessageYupTranslation } from '@hooks';
 
 import {
   BG_ERROR,
@@ -37,7 +37,7 @@ const getColor = (typeMessage: TypeMessage): string => {
   }
 };
 
-const getIcon = (typeMessage: TypeMessage): VectorIconName => {
+const getIcon = (typeMessage: TypeMessage): VectorIconIcon => {
   switch (typeMessage) {
     case TYPE_MESSAGE.SUCCESS:
       return 'bx_success';
@@ -139,9 +139,9 @@ export const SnackItem = memo(
         entering={CustomEnteringAnimation}
         exiting={CustomExitAnimation}
         style={[styles.itemBar, containStyle]}>
-        <VectorIcon icon={getIcon(item.type)} colorTheme="white" />
+        <VectorIcon icon={getIcon(item.type)} color="white" />
         <Spacer width={10} />
-        <Text style={[styles.text]} preset="linkMedium" colorTheme="white">
+        <Text style={[styles.text]} preset="linkMedium" color="white">
           {message}
         </Text>
       </Animated.View>

template/src/app/library/components/text-field/components/flat/index.tsx

@@ -22,11 +22,12 @@ import Animated, {
 
 import { useInterpolate, useSharedTransition } from '@animated';
 import { onCheckType } from '@common';
-import { Text } from '@library/components/text';
 
 import { styles } from './styles';
 import { InputFlatProps } from './type';
 
+import { Text } from '../../../text';
+
 const UN_ACTIVE_COLOR = 'rgb(159,152,146)';
 const ACTIVE_COLOR = 'rgb(0,87,231)';
 const ERROR_COLOR = 'rgb(214,45,32)';