nx-react-native-cli 1.0.20 → 2.0.0

package/templates/apps/mobile/fastlane/.env.template

@@ -1,13 +1,18 @@
 # Fastlane ENV
 IS_CI=false
 
+# Match
+GIT_URL=
+GIT_BRANCH=
+GIT_API_TOKEN=
+
 # Firebase
+FIREBASE_SERVICE_ACCOUNT=
 FASTLANE_FIREBASE_APP_ID=
 FASTLANE_FIREBASE_GROUP_TESTERS=
 
 # AppStore
 MATCH_PASSWORD=
-GITHUB_API_TOKEN=
 FASTLANE_APPSTORE_KEY_ID=
 FASTLANE_APPSTORE_ISSUER_ID=
 FASTLANE_APPSTORE_KEY_CONTENT=
@@ -18,7 +23,7 @@ FASTLANE_APPSTORE_EXTERNAL_DESTINATIONS=""
 # MISC
 FASTLANE_CHANGELOGS="Performance and Feature updates"
 
-# Android (Production ONLY)
+# Android (Production ONLY, Dev is already handled in build.gradle)
 STORE_PASSWORD=
 KEY_PASSWORD=
 KEY_ALIAS=

package/templates/apps/mobile/fastlane/Fastfile

@@ -1,7 +1,35 @@
 
 require 'fileutils'
+require 'base64'
+require 'json'
 
 def app_name = "AppsMobile"
+def service_account_path = '/tmp/fbd-sa.json'
+
+def decode_base64_to_json(encoded_string, output_path)
+  begin
+    # Decode the Base64 string
+    decoded_data = Base64.decode64(encoded_string)
+
+    # Parse JSON from the decoded data
+    json_data = JSON.parse(decoded_data)
+
+    # Write to the specified file
+    File.open(output_path, 'w') do |file|
+      file.write(JSON.pretty_generate(json_data))
+    end
+
+    puts "JSON file successfully written to: #{output_path}"
+  rescue JSON::ParserError
+    puts "Error: Decoded data is not valid JSON."
+  rescue StandardError => e
+    puts "Error: #{e.message}"
+  end
+end
+
+def get_service_account_credentials()
+    decode_base64_to_json(ENV['FIREBASE_SERVICE_ACCOUNT'], service_account_path)
+end
 
 def delete_gradle_temp()
     UI.message("Deleting Gradle Temp...")
@@ -136,6 +164,10 @@ def setup_android()
         gradle_file_path: "./android/app/build.gradle",
         version_code: build_number
     )
+
+    # Retrieving Service Account Credentials
+    UI.message("Retrieving Service Account Credentials...")
+    get_service_account_credentials()
 end
 
 def ios_build_ipa(configuration, scheme)
@@ -216,7 +248,7 @@ end
 def publish_bundle(flavor)
     UI.message("Uploading aab build to Firebase...")
     release = firebase_app_distribution(
-        service_credentials_file: to_boolean(ENV['IS_CI']) ? '/tmp/google-service-account-key.json' : nil,
+        service_credentials_file: service_account_path,
         app: ENV['FASTLANE_FIREBASE_APP_ID'],
         android_artifact_type: "AAB",
         android_artifact_path: "./android/app/build/outputs/bundle/#{flavor}Release/app-#{flavor}-release.aab",
@@ -228,7 +260,7 @@ end
 def publish_apk(flavor)
     UI.message("Uploading apk build to Firebase...")
     release = firebase_app_distribution(
-        service_credentials_file: to_boolean(ENV['IS_CI']) ? '/tmp/google-service-account-key.json' : nil,
+        service_credentials_file: service_account_path,
         app: ENV['FASTLANE_FIREBASE_APP_ID'],
         android_artifact_type: "APK",
         android_artifact_path: "./android/app/build/outputs/apk/#{flavor}/release/app-#{flavor}-release.apk",
@@ -238,6 +270,11 @@ def publish_apk(flavor)
 end
 
 platform :android do 
+    desc "Get Service Account Credentials"
+    lane :get_service_account_credentials do
+        get_service_account_credentials()
+    end
+
     desc "Build Android (Dev Server)"
     lane :dev do 
         begin
@@ -253,10 +290,14 @@ platform :android do
     desc "Build Android (Production Server)"
     lane :prod do 
         begin
-            flavor = 'production'
+            flavor = 'prod'
             setup_android()
-            android_build_bundle(flavor)
-            publish_bundle(flavor)
+            # TODO: COMMENT IF FIREBASE PROD IS LINKED TO GOOGLE PLAY
+            android_build_apk(flavor)
+            publish_apk(flavor)
+            # TODO: UNCOMMENT IF FIREBASE PROD IS LINKED TO GOOGLE PLAY
+            # android_build_bundle(flavor)
+            # publish_bundle(flavor)
         rescue => exception
             UI.error(exception)
         end

package/templates/apps/mobile/fastlane/Matchfile

@@ -1,5 +1,5 @@
-git_url("")
-git_branch("main")
-git_basic_authorization(ENV['GITHUB_API_TOKEN'])
+git_url(ENV['GIT_URL'])
+git_branch(ENV['GIT_BRANCH'])
+git_basic_authorization(ENV['GIT_API_TOKEN'])
 storage_mode("git")
 type("appstore")

package/templates/apps/mobile/ios/AppDelegate.mm

@@ -0,0 +1,33 @@
+#import "AppDelegate.h"
+
+#import <React/RCTBundleURLProvider.h>
+#import <ReactAppDependencyProvider/RCTAppDependencyProvider.h>
+
+@implementation AppDelegate
+
+- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+{
+  self.moduleName = @"AppsMobile";
+  self.dependencyProvider = [RCTAppDependencyProvider new];
+  // You can add your custom initial props in the dictionary below.
+  // They will be passed down to the ViewController used by React Native.
+  self.initialProps = @{};
+
+  return [super application:application didFinishLaunchingWithOptions:launchOptions];
+}
+
+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
+{
+  return [self bundleURL];
+}
+
+- (NSURL *)bundleURL
+{
+#if DEBUG
+  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"src/main"];
+#else
+  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+#endif
+}
+
+@end

package/templates/apps/mobile/metro.config.js

@@ -0,0 +1,42 @@
+const path = require('path');
+const { withNxMetro } = require('@nx/react-native');
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+
+const defaultConfig = getDefaultConfig(__dirname);
+const { assetExts, sourceExts } = defaultConfig.resolver;
+
+/**
+ * Metro configuration
+ * https://reactnative.dev/docs/metro
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const customConfig = {
+  cacheVersion: 'mobile',
+  transformer: {
+    babelTransformerPath: require.resolve('react-native-svg-transformer'),
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
+  },
+  resolver: {
+    extraNodeModules: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+    assetExts: assetExts.filter((ext) => ext !== 'svg'),
+    sourceExts: [...sourceExts, 'cjs', 'mjs', 'svg'],
+  },
+};
+
+module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig), {
+  // Change this to true to see debugging info.
+  // Useful if you have issues resolving modules
+  debug: false,
+  // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx', 'json'
+  extensions: [],
+  // Specify folders to watch, in addition to Nx defaults (workspace libraries and node_modules)
+  watchFolders: [],
+});

package/templates/apps/mobile/package.json

@@ -15,7 +15,7 @@
     "pre-build": "npm run ensure-symlink && npm run sync-deps && npm run pod-install",
     "list:ios-configurations": "cd ios && xcodebuild -list",
     "list:ios-devices": "xcrun xctrace list devices",
-    "xcode": "open ios/AppsMobile.xcworkspace",
+    "xcode": "open -a Xcode ios/AppsMobile.xcworkspace",
     "touch-xcode": "cd ios && touch .xcode.env",
     "check-env:mobile": "cd ../.. && npm run check-env:mobile",
     "setup-fastlane": "rbenv local && bundle install && bundle update",
@@ -26,7 +26,6 @@
   "dependencies": {
     "@gorhom/bottom-sheet": "*",
     "@hookform/resolvers": "*",
-    "@react-native-async-storage/async-storage": "*",
     "@react-native-community/datetimepicker": "*",
     "@react-native-community/hooks": "*",
     "@react-native/metro-config": "*",
@@ -54,7 +53,6 @@
     "metro-config": "*",
     "react-hook-form": "*",
     "react-native-dotenv": "*",
-    "react-native-fast-image": "*",
     "react-native-gesture-handler": "*",
     "react-native-get-random-values": "*",
     "react-native-haptic-feedback": "*",
@@ -69,6 +67,7 @@
     "react-native-simple-toast": "*",
     "react-native-svg-transformer": "*",
     "react-native-svg": "*",
+    "react-native-turbo-image": "*",
     "react-native-url-polyfill": "*",
     "react-native": "*",
     "react": "*",

package/templates/apps/mobile/project.json

@@ -17,7 +17,8 @@
       "dependsOn": ["check-env", "ensure-symlink", "pod-install"],
       "options": {
         "port": 8081,
-        "resetCache": true
+        "resetCache": true,
+        "client-logs": true
       }
     },
     "serve": {

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

@@ -1,21 +1,21 @@
-import AsyncStorage from '@react-native-async-storage/async-storage';
 import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
 import { QueryClient } from '@tanstack/react-query';
-import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
+import { AsyncStorage, PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
 import React from 'react';
 import { LogBox } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import 'react-native-get-random-values';
+import { MMKV } from 'react-native-mmkv';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { enableFreeze } from 'react-native-screens';
 import { useDeviceContext } from 'twrnc';
 
+import { StorageManager } from '@/components';
+import CONFIG from '@/config';
+import ApplicationRoutes from '@/routes';
+import { tw } from '@/tailwind';
 import 'react-native-url-polyfill/auto';
 
-import { StorageManager } from '../components';
-import ApplicationRoutes from '../routes';
-import { tw } from '../tailwind';
-
 LogBox.ignoreLogs(['VirtualizedLists', 'onAnimatedValueUpdate']);
 
 enableFreeze(true);
@@ -31,8 +31,23 @@ const queryClient = new QueryClient({
   },
 });
 
+const storage = new MMKV({
+  encryptionKey: CONFIG.STORAGE_KEY,
+  id: 'react-query-persist',
+});
+
+export const MmkvStorage: AsyncStorage = {
+  getItem: (name) => {
+    const value = storage.getString(name);
+
+    return value ?? null;
+  },
+  removeItem: (name) => storage.delete(name),
+  setItem: (name, value) => storage.set(name, value),
+};
+
 const persister = createAsyncStoragePersister({
-  storage: AsyncStorage,
+  storage: MmkvStorage as AsyncStorage,
 });
 
 const persistOptions = { maxAge: CACHE_TIME, persister };

package/templates/apps/mobile/src/components/atoms/BottomSheet/bottom-sheet.component.tsx

@@ -13,8 +13,8 @@ import { Keyboard, StyleProp, ViewStyle } from 'react-native';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
 
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types';
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
 export type BottomSheetProps = DefaultComponentProps & {
   backgroundStyle?: StyleProp<Omit<ViewStyle, 'left' | 'right' | 'position' | 'top' | 'bottom'>>;
@@ -127,7 +127,12 @@ export function BottomSheet(props: BottomSheetProps) {
   );
 }
 
-export function useBottomSheet() {
+export function useBottomSheet(): {
+  closeSheet: () => void;
+  expandSheet: () => void;
+  isVisible: boolean;
+  sheetRef: RefObject<BottomSheetModal>;
+} {
   const [isVisible, setIsVisible] = useState<boolean>(false);
   const sheetRef = useRef<BottomSheetModal>(null);
 
@@ -143,5 +148,5 @@ export function useBottomSheet() {
     setIsVisible(false);
   }, []);
 
-  return { closeSheet, expandSheet, isVisible, sheetRef };
+  return { closeSheet, expandSheet, isVisible, sheetRef: sheetRef as RefObject<BottomSheetModal> };
 }

package/templates/apps/mobile/src/components/atoms/Button/button.component.tsx

@@ -5,13 +5,13 @@ import {
   TextStyle,
   TouchableOpacity,
   TouchableOpacityProps,
+  View,
   ViewStyle,
 } from 'react-native';
 
-import { colors, disabledInputStyle, tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types/component.type';
-import { Box } from '../Box';
-import { Typography } from '../Typography';
+import { Typography } from '@/components/atoms/Typography';
+import { colors, disabledInputStyle, tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
 type Props = DefaultComponentProps &
   TouchableOpacityProps & {
@@ -45,7 +45,7 @@ export function Button(props: Props) {
 
   return (
     <TouchableOpacity activeOpacity={activeOpacity} disabled={disabled} style={[style]} {...rest}>
-      <Box
+      <View
         style={[
           tw`bg-primary-700 items-center justify-center rounded-xl p-3`,
           buttonStyle,
@@ -53,7 +53,7 @@ export function Button(props: Props) {
         ]}
       >
         {isLoading ? <ActivityIndicator color={activityIndicatorColor} /> : display}
-      </Box>
+      </View>
     </TouchableOpacity>
   );
 }

package/templates/apps/mobile/src/components/atoms/Divider/divider-component.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
+import { View } from 'react-native';
 
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types';
-import { Box } from '../Box';
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
 type Props = DefaultComponentProps & {};
 
 export function Divider(props: Props) {
   const { style } = props;
 
-  return <Box style={[tw`h-[1px] w-full bg-gray-200`, style]}></Box>;
+  return <View style={[tw`h-[1px] w-full bg-gray-200`, style]}></View>;
 }

package/templates/apps/mobile/src/components/atoms/ExcludedEdges/excluded-edges.component.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import { Platform } from 'react-native';
+import { Edge, SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
+
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
+
+type Props = DefaultComponentProps & {
+  children?: React.ReactNode;
+  excludedEdges?: Edge[];
+};
+
+const safeAreaViewEdges: Edge[] = Platform.select({
+  android: ['left', 'right', 'bottom'],
+  default: [],
+  ios: ['left', 'right', 'bottom', 'top'],
+});
+
+export function ExcludedEdges(props: Props) {
+  const { children, excludedEdges = [] } = props;
+  const insets = useSafeAreaInsets();
+  const { style } = props;
+  const edges =
+    excludedEdges.length > 0
+      ? safeAreaViewEdges.filter((edge) => !excludedEdges.includes(edge))
+      : safeAreaViewEdges;
+
+  function getExcludedEdgesStyles() {
+    return excludedEdges.map((edge) => tw`-${edge}-[${insets[edge]}px]`);
+  }
+
+  return (
+    <SafeAreaView edges={edges} style={[getExcludedEdgesStyles(), style]}>
+      {children}
+    </SafeAreaView>
+  );
+}

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

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

package/templates/apps/mobile/src/components/atoms/InputLayout/input-layout.component.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
-import { StyleProp, TextStyle } from 'react-native';
+import { StyleProp, TextStyle, View } from 'react-native';
 
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types';
-import { Box } from '../Box';
-import { Typography } from '../Typography';
+import { Typography } from '@/components/atoms/Typography';
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
 type Props = DefaultComponentProps & {
   children?: React.ReactNode;
@@ -17,7 +16,7 @@ export function InputLayout(props: Props) {
   const { children, error, isRequired, label, style, textStyle } = props;
 
   return (
-    <Box style={[style]}>
+    <View style={[style]}>
       {label && (
         <Typography style={[tw`mb-2 text-gray-600`, textStyle]}>
           {label}
@@ -26,10 +25,10 @@ export function InputLayout(props: Props) {
       )}
       {children}
       {!!error && (
-        <Box style={tw`items-end`}>
+        <View style={tw`items-end`}>
           <Typography style={tw`text-right text-red-500`}>{error}</Typography>
-        </Box>
+        </View>
       )}
-    </Box>
+    </View>
   );
 }

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

@@ -0,0 +1 @@
+export * from './keyboard-aware-scroll-view.component';

package/templates/apps/mobile/src/components/atoms/KeyboardAwareScrollView/keyboard-aware-scroll-view.component.tsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import {
+  NativeScrollEvent,
+  NativeSyntheticEvent,
+  RefreshControlProps,
+  StyleProp,
+  ViewStyle,
+} from 'react-native';
+import { KeyboardAwareScrollView as RNKeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
+import Animated from 'react-native-reanimated';
+
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
+
+type Props = DefaultComponentProps & {
+  children?: React.ReactNode;
+  scrollViewRef?: React.RefObject<RNKeyboardAwareScrollView>;
+  containerStyle?: StyleProp<ViewStyle>;
+  extraBottomPadding?: number;
+  refreshControl?: React.ReactElement<RefreshControlProps> | undefined;
+  onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
+};
+
+const defaultStyle = tw`grow`;
+
+const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent(RNKeyboardAwareScrollView);
+
+export function KeyboardAwareScrollView(props: Props) {
+  const {
+    children,
+    containerStyle,
+    extraBottomPadding,
+    onScroll,
+    refreshControl,
+    scrollViewRef,
+    style,
+  } = props;
+
+  const defaultContainerStyle = [
+    defaultStyle,
+    containerStyle,
+    // eslint-disable-next-line no-magic-numbers
+    extraBottomPadding && tw`pb-[${extraBottomPadding + 50}px]`,
+  ];
+
+  return (
+    <AnimatedKeyboardAwareScrollView
+      ref={scrollViewRef}
+      contentContainerStyle={[defaultContainerStyle, containerStyle]}
+      enableResetScrollToCoords={false}
+      keyboardShouldPersistTaps="handled"
+      refreshControl={refreshControl}
+      scrollEventThrottle={16}
+      style={style}
+      onScroll={onScroll}
+    >
+      {children}
+    </AnimatedKeyboardAwareScrollView>
+  );
+}

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

@@ -1,9 +1,9 @@
 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';
+import { Skeleton } from '@/components/atoms/Skeleton';
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
 type Props = DefaultComponentProps & {
   isLoading: boolean;
@@ -13,19 +13,19 @@ export function ListLoadingItemComponent(props: Props) {
   const { isLoading, style } = props;
 
   return (
-    <Box style={[style]}>
-      <Box style={[tw`gap-2`, style]}>
+    <View style={[style]}>
+      <View style={[tw`gap-2`, style]}>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <Box style={tw`h-[100px] w-full`} />}
+          {isLoading && <View style={tw`h-[100px] w-full`} />}
         </Skeleton>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <Box style={tw`h-[100px] w-full`} />}
+          {isLoading && <View style={tw`h-[100px] w-full`} />}
         </Skeleton>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <Box style={tw`h-[100px] w-full`} />}
+          {isLoading && <View style={tw`h-[100px] w-full`} />}
         </Skeleton>
-      </Box>
-    </Box>
+      </View>
+    </View>
   );
 }
 
@@ -33,24 +33,24 @@ export function ListLoadingHorizontalItemComponent(props: Props) {
   const { isLoading, style } = props;
 
   return (
-    <Box style={[style]}>
-      <Box style={[tw`flex-row gap-2`, style]}>
+    <View style={[style]}>
+      <View style={[tw`flex-row gap-2`, style]}>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <Box style={tw`h-[200px] w-[100px]`} />}
+          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
         </Skeleton>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <Box style={tw`h-[200px] w-[100px]`} />}
+          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
         </Skeleton>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <Box style={tw`h-[200px] w-[100px]`} />}
+          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
         </Skeleton>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <Box style={tw`h-[200px] w-[100px]`} />}
+          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
         </Skeleton>
         <Skeleton isLoading={isLoading}>
-          {isLoading && <Box style={tw`h-[200px] w-[100px]`} />}
+          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
         </Skeleton>
-      </Box>
-    </Box>
+      </View>
+    </View>
   );
 }

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

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

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

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