nx-react-native-cli 1.0.16 → 1.0.18

package/templates/apps/mobile/src/components/atoms/ListLoadingItem/list-loading-item.component.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { View } from 'react-native';
 
 import { tw } from '../../../tailwind';
 import { DefaultComponentProps } from '../../../types';
+import { Box } from '../Box';
 import { Skeleton } from '../Skeleton';
 
 type Props = DefaultComponentProps & {
@@ -13,19 +13,19 @@ export function ListLoadingItemComponent(props: Props) {
   const { isLoading, style } = props;
 
   return (
-    <View style={[style]}>
-      <View style={[tw`gap-2`, style]}>
+    <Box style={[style]}>
+      <Box style={[tw`gap-2`, style]}>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[100px] w-full`} />}
+          {isLoading && <Box style={tw`h-[100px] w-full`} />}
         </Skeleton>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[100px] w-full`} />}
+          {isLoading && <Box style={tw`h-[100px] w-full`} />}
         </Skeleton>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[100px] w-full`} />}
+          {isLoading && <Box style={tw`h-[100px] w-full`} />}
         </Skeleton>
-      </View>
-    </View>
+      </Box>
+    </Box>
   );
 }
 
@@ -33,24 +33,24 @@ export function ListLoadingHorizontalItemComponent(props: Props) {
   const { isLoading, style } = props;
 
   return (
-    <View style={[style]}>
-      <View style={[tw`flex-row gap-2`, style]}>
+    <Box style={[style]}>
+      <Box style={[tw`flex-row gap-2`, style]}>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
+          {isLoading && <Box style={tw`h-[200px] w-[100px]`} />}
         </Skeleton>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
+          {isLoading && <Box style={tw`h-[200px] w-[100px]`} />}
         </Skeleton>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
+          {isLoading && <Box style={tw`h-[200px] w-[100px]`} />}
         </Skeleton>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
+          {isLoading && <Box style={tw`h-[200px] w-[100px]`} />}
         </Skeleton>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
+          {isLoading && <Box style={tw`h-[200px] w-[100px]`} />}
         </Skeleton>
-      </View>
-    </View>
+      </Box>
+    </Box>
   );
 }

package/templates/apps/mobile/src/components/atoms/Modal/modal.component.tsx

@@ -1,15 +1,16 @@
 /* eslint-disable no-magic-numbers */
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
-import React, { ReactNode, useCallback, useState } from 'react';
-import { Keyboard, ModalBaseProps, StyleProp, View, ViewStyle } from 'react-native';
+import React, { useCallback, useState } from 'react';
+import { Keyboard, ModalBaseProps, StyleProp, ViewStyle } from 'react-native';
 import RNModal from 'react-native-modal';
 
 import { tw } from '../../../tailwind';
 import { DefaultComponentProps } from '../../../types';
+import { Box } from '../Box';
 
 export type ModalProps = DefaultComponentProps &
   ModalBaseProps & {
-    children?: ReactNode;
+    children?: React.ReactNode;
     containerStyle?: StyleProp<ViewStyle>;
     isVisible: boolean;
     onBackdropPress?: () => void;
@@ -31,7 +32,7 @@ export function Modal(props: ModalProps) {
       onBackdropPress={onBackdropPress}
     >
       <BottomSheetModalProvider>
-        <View style={[tw`px-4`, containerStyle]}>{children}</View>
+        <Box style={[tw`px-4`, containerStyle]}>{children}</Box>
       </BottomSheetModalProvider>
     </RNModal>
   );

package/templates/apps/mobile/src/components/atoms/ScreenLoader/screen-loader.component.tsx

@@ -1,17 +1,18 @@
 import React from 'react';
-import { ActivityIndicator, View } from 'react-native';
+import { ActivityIndicator } from 'react-native';
 
 import { colors, tw } from '../../../tailwind';
 import { DefaultComponentProps } from '../../../types/component.type';
+import { Box } from '../Box';
 
 type Props = DefaultComponentProps;
 
-export function ScreenLoader(props: Props): JSX.Element {
+export function ScreenLoader(props: Props) {
   const { style } = props;
 
   return (
-    <View style={[tw`h-full w-full items-center justify-center bg-gray-50 p-8`, style]}>
+    <Box style={[tw`h-full w-full items-center justify-center bg-gray-50 p-8`, style]}>
       <ActivityIndicator color={colors.primary[400]} />
-    </View>
+    </Box>
   );
 }

package/templates/apps/mobile/src/components/atoms/Skeleton/skeleton.component.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { View } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -8,6 +7,7 @@ import Animated, {
 } from 'react-native-reanimated';
 
 import { tw } from '../../../tailwind';
+import { Box } from '../Box';
 
 interface Props {
   children: React.ReactNode;
@@ -36,7 +36,7 @@ export function Skeleton(props: Props) {
 
   return (
     <Animated.View style={[tw`rounded-lg bg-gray-200`, animatedStyle]}>
-      <View style={tw`opacity-0`}>{children}</View>
+      <Box style={tw`opacity-0`}>{children}</Box>
     </Animated.View>
   );
 }

package/templates/apps/mobile/src/components/atoms/TextInput/text-input.component.tsx

@@ -4,7 +4,6 @@ import {
   TextInputProps as RNTextInputProps,
   StyleProp,
   TextStyle,
-  View,
 } from 'react-native';
 
 import {
@@ -14,7 +13,8 @@ import {
   disabledInputStyle,
   focusedInputStyle,
 } from '../../../tailwind';
-import { DefaultInputComponentProps } from '../../../types';
+import { DefaultComponentProps } from '../../../types';
+import { Box } from '../Box';
 
 import { DefaultNameInputProps, DefaultTextAreaInputProps } from './constants';
 
@@ -29,7 +29,7 @@ export function getTextInputHeightAdjustment(numberOfNewLines: number) {
   return TEXT_INPUT_MIN_HEIGHT + (numberOfNewLines - 2) * TEXT_INPUT_LINE_HEIGHT;
 }
 
-export type TextInputProps = DefaultInputComponentProps<string> &
+export type TextInputProps = DefaultComponentProps &
   RNTextInputProps & {
     textInputRef?: React.RefObject<RNTextInput>;
     textStyle?: StyleProp<TextStyle>;
@@ -62,7 +62,7 @@ export function TextInput(props: TextInputProps) {
   }
 
   return (
-    <View
+    <Box
       style={[
         defaultInputContainerStyle,
         focusedInputStyle(isFocused),
@@ -85,7 +85,7 @@ export function TextInput(props: TextInputProps) {
         onFocus={handleOnFocus}
         {...extraProps}
       />
-    </View>
+    </Box>
   );
 }
 

package/templates/apps/mobile/src/components/atoms/Typography/index.ts

@@ -0,0 +1 @@
+export * from './typography.component';

package/templates/apps/mobile/src/components/atoms/{Text/text.component.tsx → Typography/typography.component.tsx}

@@ -7,7 +7,7 @@ type Props = TextProps & {
   numberOfLines?: number;
 };
 
-export function Text(props: Props): JSX.Element {
+export function Typography(props: Props): JSX.Element {
   const { numberOfLines = 0, style, ...extraProps } = props;
 
   const shouldTruncateTextProps: TextProps =

package/templates/apps/mobile/src/components/atoms/index.ts

@@ -1,4 +1,5 @@
 export * from './BottomSheet';
+export * from './Box';
 export * from './Button';
 export * from './Divider';
 export * from './InputLayout';
@@ -6,5 +7,5 @@ export * from './ListLoadingItem';
 export * from './Modal';
 export * from './ScreenLoader';
 export * from './Skeleton';
-export * from './Text';
 export * from './TextInput';
+export * from './Typography';

package/templates/apps/mobile/src/components/molecules/BackButton/back-button.component.tsx

@@ -6,7 +6,6 @@ import {
   PressableProps,
   StyleProp,
   TouchableOpacity,
-  View,
   ViewStyle,
 } from 'react-native';
 
@@ -15,6 +14,7 @@ import { ArrowLeftIcon } from '../../../icons';
 import { Screens } from '../../../routes';
 import { tw } from '../../../tailwind';
 import { DefaultComponentProps } from '../../../types/component.type';
+import { Box } from '../../atoms';
 
 type Props = DefaultComponentProps &
   PressableProps & {
@@ -24,7 +24,7 @@ type Props = DefaultComponentProps &
   };
 
 const ACTIVE_OPACITY = 0.5;
-export function BackButton(props: Props): JSX.Element {
+export function BackButton(props: Props) {
   const { fallbackRoute, onPress, style } = props;
   const navigation = useNavigation<ParamListBase>();
 
@@ -50,9 +50,9 @@ export function BackButton(props: Props): JSX.Element {
       style={[tw`h-[48px] w-[48px]`, style]}
       onPress={handleOnPress}
     >
-      <View style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
+      <Box style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
         <ArrowLeftIcon style={tw`text-gray-950`} />
-      </View>
+      </Box>
     </TouchableOpacity>
   );
 }

package/templates/apps/mobile/src/components/molecules/BottomActionsContainer/BottomActionsContainer.component.tsx

@@ -16,10 +16,7 @@ export function BottomActionsContainer(props: Props) {
   return (
     <SafeAreaView
       edges={['left', 'right', 'bottom']}
-      style={[
-        tw`border-geyser-200 absolute bottom-0 left-0 right-0 flex flex-col gap-y-2 border-b-0 border-t bg-gray-50 p-4`,
-        style,
-      ]}
+      style={[tw`absolute bottom-0 left-0 right-0`, style]}
       {...rest}
     >
       {children}

package/templates/apps/mobile/src/components/molecules/ScreenContainer/screen-container.component.tsx

@@ -6,7 +6,6 @@ import {
   Platform,
   StatusBar,
   StyleProp,
-  View,
   ViewStyle,
 } from 'react-native';
 import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
@@ -15,8 +14,10 @@ import { Edge, SafeAreaProviderProps, SafeAreaView } from 'react-native-safe-are
 
 import CONFIG from '../../../config';
 import { tw } from '../../../tailwind';
+import { Box } from '../../atoms';
 
 type Props = SafeAreaProviderProps & {
+  scrollViewRef?: React.RefObject<KeyboardAwareScrollView>;
   containerStyle?: StyleProp<ViewStyle>;
   excludedEdges?: Edge[];
   extraBottomPadding?: number;
@@ -28,21 +29,20 @@ type Props = SafeAreaProviderProps & {
   onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 };
 
-const defaultStyle = tw.style('grow', {
-  paddingTop: StatusBar.currentHeight ? StatusBar.currentHeight - 1 : 0,
-});
+const defaultStyle = tw`grow`;
 
 const safeAreaViewEdges: Edge[] = Platform.select({
-  android: ['left', 'right', 'bottom'],
+  android: ['top', 'left', 'right', 'bottom'],
   default: [],
-  ios: ['left', 'right', 'bottom', 'top'],
+  ios: ['top', 'left', 'right', 'bottom'],
 });
 
 const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent(KeyboardAwareScrollView);
 
-export function ScreenContainer(props: Props): JSX.Element {
+export function ScreenContainer(props: Props) {
   const {
     children,
+    scrollViewRef,
     containerStyle,
     excludedEdges = [],
     extraBottomPadding = 0,
@@ -81,10 +81,12 @@ export function ScreenContainer(props: Props): JSX.Element {
   ];
 
   return (
-    <SafeAreaView edges={edges} style={[tw`flex-1 bg-gray-50`, style]}>
+    <SafeAreaView edges={edges} style={[tw`flex-1 bg-gray-50 dark:bg-gray-900`, style]}>
       {hasScroll ? (
         <AnimatedKeyboardAwareScrollView
+        scrollViewRef={scrollViewRef}
           contentContainerStyle={defaultContainerStyle}
+          enableResetScrollToCoords={false}
           keyboardShouldPersistTaps="handled"
           refreshControl={refreshControl}
           scrollEventThrottle={16}
@@ -93,7 +95,7 @@ export function ScreenContainer(props: Props): JSX.Element {
           {children}
         </AnimatedKeyboardAwareScrollView>
       ) : (
-        <View style={defaultContainerStyle}>{children}</View>
+        <Box style={defaultContainerStyle}>{children}</Box>
       )}
     </SafeAreaView>
   );

package/templates/apps/mobile/src/components/molecules/ScreenHeader/screen-header.component.tsx

@@ -1,16 +1,16 @@
-import React, { ReactNode } from 'react';
-import { StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native';
+import React from 'react';
+import { StyleProp, TouchableOpacity, ViewStyle } from 'react-native';
 
 import { GearIcon } from '../../../icons';
 import { tw } from '../../../tailwind';
 import { DefaultComponentProps } from '../../../types/component.type';
-import { Text } from '../../atoms/Text';
+import { Box } from '../../atoms';
+import { Typography } from '../../atoms/Typography';
 import { BackButton } from '../BackButton';
 
 type Props = DefaultComponentProps & {
   hasBackButton?: boolean;
-  extraActionComponent?: ReactNode;
-  shouldShowBorder?: boolean;
+  extraActionComponent?: React.ReactNode;
   title: string;
   titleStyle?: StyleProp<ViewStyle>;
   onBackPress?: () => void;
@@ -24,7 +24,6 @@ export function ScreenHeader(props: Props) {
     hasBackButton = true,
     onBackPress,
     onExtraActionPress,
-    shouldShowBorder = false,
     style,
     title,
     titleStyle,
@@ -37,35 +36,30 @@ export function ScreenHeader(props: Props) {
       style={tw`z-10 h-[48px] w-[48px]`}
       onPress={onExtraActionPress}
     >
-      <View style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
+      <Box style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
         {extraActionComponent ? (
           extraActionComponent
         ) : (
           <GearIcon height={25} style={tw`text-black-950`} width={25} />
         )}
-      </View>
+      </Box>
     </TouchableOpacity>
   );
 
   return (
-    <View style={[tw`h-[64px] border border-transparent bg-gray-50`, style]}>
-      <View
-        style={[
-          tw`flex-row items-center justify-between border border-transparent p-4 pt-2`,
-          shouldShowBorder && tw`elevation-2 -m-[5px]`,
-        ]}
-      >
+    <Box style={[tw`h-[64px] border border-transparent`, style]}>
+      <Box style={[tw`flex-row items-center justify-between border border-transparent p-4 pt-2`]}>
         {hasBackButton && <BackButton style={tw`z-10`} onPress={onBackPress} />}
-        <Text
+        <Typography
           style={[
             tw`text-primary-700 absolute inset-x-0 top-4 text-center text-xl font-medium`,
             titleStyle,
           ]}
         >
           {title}
-        </Text>
+        </Typography>
         {extraActionComponentDisplay}
-      </View>
-    </View>
+      </Box>
+    </Box>
   );
 }

package/templates/apps/mobile/src/components/molecules/StorageManager/StorageManager.component.tsx

@@ -1,9 +1,7 @@
-import { ReactNode } from 'react';
-
 import { useLocalStorageState } from '../../../stores';
 
 type Props = {
-  children: ReactNode;
+  children: JSX.Element;
 };
 
 export function StorageManager(props: Props) {

package/templates/apps/mobile/src/hooks/index.ts

@@ -1,5 +1,5 @@
-export * from './useAppState.hook';
 export * from './useApplicationDimensions.hook';
+export * from './useAppState.hook';
 export * from './useDebounce.hook';
 export * from './useGetLayoutHeight.hook';
 export * from './useGetLayoutWidth.hook';
@@ -7,3 +7,4 @@ export * from './useNavigation.hook';
 export * from './useShakeAnimation.hook';
 export * from './useTextInputChangeFocus.hook';
 export * from './useThrottle.hook';
+export * from './useToggleDarkMode.hook';

package/templates/apps/mobile/src/hooks/useToggleDarkMode.hook.tsx

@@ -0,0 +1,9 @@
+import { useAppColorScheme } from 'twrnc';
+
+import { tw } from '../tailwind';
+
+export function useToggleDarkMode() {
+  const [, toggleColorScheme] = useAppColorScheme(tw);
+
+  return toggleColorScheme;
+}

package/templates/apps/mobile/src/routes/index.tsx

@@ -1,5 +1,5 @@
 import { DefaultTheme, NavigationContainer, Theme } from '@react-navigation/native';
-import { createStackNavigator } from '@react-navigation/stack';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { useEffect } from 'react';
 import { StatusBar } from 'react-native';
 
@@ -11,7 +11,7 @@ import PublicRoutes from './publicRoutes';
 import { Routes } from './routes.enum';
 import { screenOptions } from './screen-options';
 
-const RootStack = createStackNavigator();
+const RootStack = createNativeStackNavigator();
 
 export const noAnimation = {
   animationEnabled: false,
@@ -25,7 +25,7 @@ const navigationTheme: Theme = {
   },
 };
 
-export default function ApplicationRoutes(): JSX.Element {
+export default function ApplicationRoutes() {
   // const { isLoading } = useAuth();
   // const isUserAuthenticated = useLocalStorageState((state) => !!state.accessToken);
   const isUserAuthenticated = false;

package/templates/apps/mobile/src/routes/privateRoutes.tsx

@@ -1,5 +1,6 @@
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import { MaterialTopTabScreenProps } from '@react-navigation/material-top-tabs';
-import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
+import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
 import React from 'react';
 
 import { HomeScreen } from '../screens/HomeScreen/home.screen';
@@ -7,13 +8,13 @@ import { HomeScreen } from '../screens/HomeScreen/home.screen';
 import { screenOptions } from './screen-options';
 import { Screens } from './screens.enum';
 
-const PrivateStack = createStackNavigator<PrivateStackParams>();
+const PrivateStack = createNativeStackNavigator<PrivateStackParams>();
 
 export type PrivateStackParams = {
   [Screens.HOME]: undefined;
 };
 
-export type PrivateScreenProps<T extends keyof PrivateStackParams> = StackScreenProps<
+export type PrivateScreenProps<T extends keyof PrivateStackParams> = NativeStackScreenProps<
   PrivateStackParams,
   T
 >;
@@ -23,10 +24,12 @@ export type PrivateTabScreenProps<T extends keyof PrivateStackParams> = Material
   T
 >;
 
-export default function PrivateRoutes(): JSX.Element {
+export default function PrivateRoutes() {
   return (
-    <PrivateStack.Navigator initialRouteName={Screens.HOME} screenOptions={screenOptions}>
-      <PrivateStack.Screen component={HomeScreen} name={Screens.HOME} />
-    </PrivateStack.Navigator>
+    <BottomSheetModalProvider>
+      <PrivateStack.Navigator initialRouteName={Screens.HOME} screenOptions={screenOptions}>
+        <PrivateStack.Screen component={HomeScreen} name={Screens.HOME} />
+      </PrivateStack.Navigator>
+    </BottomSheetModalProvider>
   );
 }

package/templates/apps/mobile/src/routes/publicRoutes.tsx

@@ -1,26 +1,29 @@
-import { createStackNavigator, StackScreenProps } from '@react-navigation/stack';
+import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
+import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
 import React from 'react';
 
-import { LoginScreen } from '../screens/LoginScreen/login.screen';
+import { LandingScreen } from '../screens/LandingScreen/landing.screen';
 
 import { screenOptions } from './screen-options';
 import { Screens } from './screens.enum';
 
-const PublicStack = createStackNavigator<PublicStackParams>();
+const PublicStack = createNativeStackNavigator<PublicStackParams>();
 
 export type PublicStackParams = {
-  [Screens.LOGIN]: undefined;
+  [Screens.LANDING]: undefined;
 };
 
-export type PublicScreenProps<T extends keyof PublicStackParams> = StackScreenProps<
+export type PublicScreenProps<T extends keyof PublicStackParams> = NativeStackScreenProps<
   PublicStackParams,
   T
 >;
 
-export default function PublicRoutes(): JSX.Element {
+export default function PublicRoutes() {
   return (
-    <PublicStack.Navigator initialRouteName={Screens.LOGIN} screenOptions={screenOptions}>
-      <PublicStack.Screen component={LoginScreen} name={Screens.LOGIN} />
-    </PublicStack.Navigator>
+    <BottomSheetModalProvider>
+      <PublicStack.Navigator initialRouteName={Screens.LANDING} screenOptions={screenOptions}>
+        <PublicStack.Screen component={LandingScreen} name={Screens.LANDING} />
+      </PublicStack.Navigator>
+    </BottomSheetModalProvider>
   );
 }

package/templates/apps/mobile/src/routes/screen-options.ts

@@ -1,9 +1,4 @@
-import CONFIG from '../config';
-
-const areGesturesEnabled = CONFIG.IS_IOS;
-
 export const screenOptions = {
-  gestureEnabled: areGesturesEnabled,
-  gestureResponseDistance: 350,
+  gestureEnabled: true,
   headerShown: false,
 };

package/templates/apps/mobile/src/routes/screens.enum.ts

@@ -1,4 +1,4 @@
 export enum Screens {
   HOME = '/home',
-  LOGIN = '/login',
+  LANDING = '/landing',
 }

package/templates/apps/mobile/src/screens/HomeScreen/home.screen.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
 
-import { ScreenContainer, Text } from '../../components';
+import { ScreenContainer, Typography } from '../../components';
 import { PrivateScreenProps, Screens } from '../../routes';
 
 export function HomeScreen(props: PrivateScreenProps<Screens.HOME>) {
   return (
     <ScreenContainer>
-      <Text>Home</Text>
+      <Typography>Home</Typography>
     </ScreenContainer>
   );
 }

package/templates/apps/mobile/src/screens/LandingScreen/landing.screen.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+
+import {
+  BottomSheet,
+  Box,
+  Button,
+  OutlinedButton,
+  ScreenContainer,
+  ScreenHeader,
+  Typography,
+  useBottomSheet,
+} from '../../components';
+import { useToggleDarkMode } from '../../hooks';
+import { PublicScreenProps, Screens } from '../../routes';
+import { tw } from '../../tailwind';
+
+export function LandingScreen(props: PublicScreenProps<Screens.LANDING>) {
+  const toggleDarkMode = useToggleDarkMode();
+  const { expandSheet, sheetRef } = useBottomSheet();
+
+  return (
+    <ScreenContainer>
+      <ScreenHeader title="Landing" onExtraActionPress={toggleDarkMode} />
+      <Box style={tw`mx-4`}>
+        <Box row style={tw`gap-2`}>
+          <Button title="Show Bottom Sheet" onPress={expandSheet} />
+          <OutlinedButton title="Login" />
+        </Box>
+      </Box>
+      <BottomSheet sheetRef={sheetRef}>
+        <Box>
+          <Typography>Bottom Sheet</Typography>
+        </Box>
+      </BottomSheet>
+    </ScreenContainer>
+  );
+}

package/templates/apps/mobile/src/types/component.type.ts

@@ -1,13 +1,8 @@
-import { Atom, SetStateAction, WritableAtom } from 'jotai';
 import { StyleProp, ViewStyle } from 'react-native';
 
 export type DefaultComponentProps = {
   error?: string;
   isDisabled?: boolean;
-  style?: StyleProp<ViewStyle>;
-};
-
-export type DefaultInputComponentProps<T> = DefaultComponentProps & {
-  atom?: WritableAtom<T, [SetStateAction<T>], void> | Atom<T>;
   isLoading?: boolean;
+  style?: StyleProp<ViewStyle>;
 };

package/templates/apps/mobile/src/utils/axios.util.ts

@@ -0,0 +1,10 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import axios, { HttpStatusCode } from 'axios';
+
+export function isNetworkError(error: any) {
+  return axios.isAxiosError(error) && !error.response;
+}
+
+export function isUnauthorizedError(error: any) {
+  return axios.isAxiosError(error) && error.response?.status === HttpStatusCode.Unauthorized;
+}

package/templates/apps/mobile/src/utils/index.ts

@@ -0,0 +1,4 @@
+export * from './axios.util';
+export * from './log.util';
+export * from './route.util';
+