nx-react-native-cli 1.1.0 → 2.0.0

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

@@ -1,10 +1,10 @@
 import React from 'react';
-
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types';
-import { Skeleton } from '../Skeleton';
 import { View } from 'react-native';
 
+import { Skeleton } from '@/components/atoms/Skeleton';
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
+
 type Props = DefaultComponentProps & {
   isLoading: boolean;
 };

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

@@ -4,8 +4,8 @@ import React, { useCallback, useState } from 'react';
 import { Keyboard, ModalBaseProps, StyleProp, View, ViewStyle } from 'react-native';
 import RNModal from 'react-native-modal';
 
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types';
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
 export type ModalProps = DefaultComponentProps &
   ModalBaseProps & {

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

@@ -1,8 +1,8 @@
 import React from 'react';
 import { ActivityIndicator, View } from 'react-native';
 
-import { colors, tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types/component.type';
+import { colors, tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
 type Props = DefaultComponentProps;
 

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import { View } from 'react-native';
 import Animated, {
   useAnimatedStyle,
   useSharedValue,
@@ -6,16 +7,16 @@ import Animated, {
   withTiming,
 } from 'react-native-reanimated';
 
-import { View } from 'react-native';
-import { tw } from '../../../tailwind';
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
-type Props = {
+type Props = DefaultComponentProps & {
   children?: React.ReactNode;
   isLoading: boolean;
-}
+};
 
 export function Skeleton(props: Props) {
-  const { children, isLoading } = props;
+  const { children, isLoading, style } = props;
   const opacity = useSharedValue(1);
 
   const animatedStyle = useAnimatedStyle(
@@ -35,7 +36,7 @@ export function Skeleton(props: Props) {
   }
 
   return (
-    <Animated.View style={[tw`rounded-lg bg-gray-200`, animatedStyle]}>
+    <Animated.View style={[tw`rounded-lg bg-gray-200`, animatedStyle, style]}>
       <View style={tw`opacity-0`}>{children}</View>
     </Animated.View>
   );

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

@@ -7,16 +7,18 @@ import {
   View,
 } from 'react-native';
 
+import {
+  DefaultNameInputProps,
+  DefaultTextAreaInputProps,
+} from '@/components/atoms/TextInput/constants';
 import {
   colors,
   defaultInputContainerStyle,
   defaultInputTextStyle,
   disabledInputStyle,
   focusedInputStyle,
-} from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types';
-
-import { DefaultNameInputProps, DefaultTextAreaInputProps } from './constants';
+} from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
 export const TEXT_INPUT_MIN_HEIGHT = 100;
 export const TEXT_INPUT_LINE_HEIGHT = 21;

package/templates/apps/mobile/src/components/atoms/Typography/typography.component.tsx

@@ -1,7 +1,7 @@
-import React from 'react';
+import React, { JSX } from 'react';
 import { Text as RNText, TextProps } from 'react-native';
 
-import { tw } from '../../../tailwind';
+import { tw } from '@/tailwind';
 
 type Props = TextProps & {
   numberOfLines?: number;

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

@@ -10,11 +10,11 @@ import {
   ViewStyle,
 } from 'react-native';
 
-import { useNavigation } from '../../../hooks';
-import { ArrowLeftIcon } from '../../../icons';
-import { Screens } from '../../../routes';
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types/component.type';
+import { useNavigation } from '@/hooks';
+import { ArrowLeftIcon } from '@/icons';
+import { Screens } from '@/routes';
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
 type Props = DefaultComponentProps &
   PressableProps & {

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

@@ -2,8 +2,8 @@ import React from 'react';
 import { ViewProps } from 'react-native';
 import { SafeAreaView } from 'react-native-safe-area-context';
 
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types';
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
 type Props = DefaultComponentProps &
   ViewProps & {

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

@@ -1,10 +1,12 @@
 import { useFocusEffect } from '@react-navigation/core';
-import React, { ReactElement, useEffect } from 'react';
+import React, { ReactElement } from 'react';
 import {
   NativeScrollEvent,
   NativeSyntheticEvent,
   Platform,
+  RefreshControlProps,
   StatusBar,
+  StatusBarStyle,
   StyleProp,
   View,
   ViewStyle,
@@ -12,11 +14,12 @@ import {
 import { KeyboardAwareScrollView as RNKeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
 import { Edge, SafeAreaProviderProps, SafeAreaView } from 'react-native-safe-area-context';
 
-import CONFIG from '../../../config';
-import { tw } from '../../../tailwind';
-import { KeyboardAwareScrollView } from '../../atoms';
+import { KeyboardAwareScrollView } from '@/components';
+import CONFIG from '@/config';
+import { tw } from '@/tailwind';
 
 type Props = SafeAreaProviderProps & {
+  barStyle?: StatusBarStyle;
   scrollViewRef?: React.RefObject<RNKeyboardAwareScrollView>;
   containerStyle?: StyleProp<ViewStyle>;
   excludedEdges?: Edge[];
@@ -39,6 +42,7 @@ const safeAreaViewEdges: Edge[] = Platform.select({
 
 export function ScreenContainer(props: Props) {
   const {
+    barStyle = 'dark-content',
     children,
     containerStyle,
     excludedEdges = [],
@@ -57,17 +61,12 @@ export function ScreenContainer(props: Props) {
       ? safeAreaViewEdges.filter((edge) => !excludedEdges.includes(edge))
       : safeAreaViewEdges;
 
-  useEffect(() => {
-    if (CONFIG.IS_ANDROID) {
-      StatusBar.setBackgroundColor(statusBarColor);
-    }
-  }, [statusBarColor]);
-
   useFocusEffect(() => {
     StatusBar.setHidden(!shouldShowStatusBar);
     if (CONFIG.IS_ANDROID) {
       StatusBar.setBackgroundColor(statusBarColor);
       StatusBar.setTranslucent(!shouldBeTranslucent);
+      StatusBar.setBarStyle(barStyle);
     }
   });
 
@@ -79,11 +78,11 @@ export function ScreenContainer(props: Props) {
   ];
 
   return (
-    <SafeAreaView edges={edges} style={[tw`flex-1 bg-gray-50`, style]}>
+    <SafeAreaView edges={edges} style={[tw`flex-1 bg-white`, style]}>
       {hasScroll ? (
         <KeyboardAwareScrollView
           containerStyle={defaultContainerStyle}
-          refreshControl={refreshControl}
+          refreshControl={refreshControl as ReactElement<RefreshControlProps>}
           scrollViewRef={scrollViewRef}
           onScroll={onScroll}
         >

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native';
 
-import { GearIcon } from '../../../icons';
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types/component.type';
-import { Typography } from '../../atoms/Typography';
-import { BackButton } from '../BackButton';
+import { Typography } from '@/components';
+import { BackButton } from '@/components/molecules/BackButton';
+import { GearIcon } from '@/icons';
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
 type Props = DefaultComponentProps & {
   hasBackButton?: boolean;

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

@@ -1,4 +1,6 @@
-import { useLocalStorageState } from '../../../stores';
+import { JSX } from 'react';
+
+import { useLocalStorageState } from '@/stores';
 
 type Props = {
   children: JSX.Element;

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { LayoutChangeEvent } from 'react-native';
 
-import { useDebounce } from './useDebounce.hook';
+import { useDebounce } from '@/hooks/useDebounce.hook';
 
 export function useGetLayoutHeight(
   initialHeight = 0,

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { LayoutChangeEvent } from 'react-native';
 
-import { useDebounce } from './useDebounce.hook';
+import { useDebounce } from '@/hooks/useDebounce.hook';
 
 export function useGetLayoutWidth(
   initialWidth = 0,

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

@@ -1,7 +1,7 @@
 import { ParamListBase, useNavigation as RNUseNavigation } from '@react-navigation/native';
 import { StackNavigationProp } from '@react-navigation/stack';
 
-import { PrivateStackParams, PublicStackParams } from '../routes';
+import { PrivateStackParams, PublicStackParams } from '@/routes';
 
 export function useNavigation<T extends PublicStackParams | PrivateStackParams | ParamListBase>() {
   return RNUseNavigation<StackNavigationProp<T, keyof T>>();

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

@@ -1,8 +1,8 @@
 import React, { useRef } from 'react';
 import { TextInput } from 'react-native';
 
-export function useTextInputChangeFocus(): [React.MutableRefObject<TextInput>, () => void] {
-  const ref = useRef() as React.MutableRefObject<TextInput>;
+export function useTextInputChangeFocus(): [React.RefObject<TextInput>, () => void] {
+  const ref = useRef<any>(null) as React.RefObject<TextInput>;
 
   function changeFocus() {
     ref?.current?.focus();

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

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

package/templates/apps/mobile/src/main.tsx

@@ -1,5 +1,5 @@
 import { AppRegistry } from 'react-native';
 
-import App from './app';
+import App from '@/app';
 
 AppRegistry.registerComponent('AppsMobile', () => App);

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

@@ -3,13 +3,12 @@ import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { useEffect } from 'react';
 import { StatusBar } from 'react-native';
 
-import CONFIG from '../config';
-import { colors } from '../tailwind';
-
-import PrivateRoutes from './privateRoutes';
-import PublicRoutes from './publicRoutes';
-import { Routes } from './routes.enum';
-import { screenOptions } from './screen-options';
+import CONFIG from '@/config';
+import { Routes } from '@/routes';
+import PrivateRoutes from '@/routes/privateRoutes';
+import PublicRoutes from '@/routes/publicRoutes';
+import { screenOptions } from '@/routes/screen-options';
+import { colors } from '@/tailwind';
 
 const RootStack = createNativeStackNavigator();
 
@@ -36,6 +35,7 @@ export default function ApplicationRoutes() {
     if (CONFIG.IS_ANDROID) {
       StatusBar.setBackgroundColor('transparent');
       StatusBar.setTranslucent(true);
+      StatusBar.setBarStyle('dark-content');
     }
   }, []);
 

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

@@ -3,10 +3,9 @@ import { MaterialTopTabScreenProps } from '@react-navigation/material-top-tabs';
 import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
 import React from 'react';
 
-import { HomeScreen } from '../screens/HomeScreen/home.screen';
-
-import { screenOptions } from './screen-options';
-import { Screens } from './screens.enum';
+import { Screens } from '@/routes';
+import { screenOptions } from '@/routes/screen-options';
+import { HomeScreen } from '@/screens/HomeScreen/home.screen';
 
 const PrivateStack = createNativeStackNavigator<PrivateStackParams>();
 

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

@@ -2,10 +2,9 @@ import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import { createNativeStackNavigator, NativeStackScreenProps } from '@react-navigation/native-stack';
 import React from 'react';
 
-import { LandingScreen } from '../screens/LandingScreen/landing.screen';
-
-import { screenOptions } from './screen-options';
-import { Screens } from './screens.enum';
+import { Screens } from '@/routes';
+import { screenOptions } from '@/routes/screen-options';
+import { LandingScreen } from '@/screens/LandingScreen/landing.screen';
 
 const PublicStack = createNativeStackNavigator<PublicStackParams>();
 

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

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

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

@@ -1,31 +1,36 @@
 import React from 'react';
-
 import { View } from 'react-native';
+
 import {
   BottomSheet,
   Button,
+  Divider,
   OutlinedButton,
   ScreenContainer,
   ScreenHeader,
   Typography,
   useBottomSheet,
-} from '../../components';
-import { PublicScreenProps, Screens } from '../../routes';
-import { tw } from '../../tailwind';
-import { toast } from '../../utils';
+} from '@/components';
+import { ArrowLeftIcon, HomeIcon } from '@/icons';
+import { PublicScreenProps, Screens } from '@/routes';
+import { tw } from '@/tailwind';
+import { toast } from '@/utils';
 
 export function LandingScreen(props: PublicScreenProps<Screens.LANDING>) {
   const { expandSheet, sheetRef } = useBottomSheet();
 
   function toastHi() {
-    toast('Hi!')
+    toast('Hi!');
   }
 
   return (
     <ScreenContainer>
       <ScreenHeader title="Landing" onExtraActionPress={toastHi} />
+      <ArrowLeftIcon />
+      <Divider />
+      <HomeIcon />
       <View style={tw`mx-4`}>
-        <View row style={tw`gap-2`}>
+        <View style={tw`gap-2`}>
           <Button title="Show Bottom Sheet" onPress={expandSheet} />
           <OutlinedButton title="Login" />
         </View>

package/templates/apps/mobile/src/stores/local-storage.store.ts

@@ -1,7 +1,7 @@
 import { StateCreator, create } from 'zustand';
 import { PersistOptions, createJSONStorage, persist } from 'zustand/middleware';
 
-import { MmkvStorage } from './mmkvStorage';
+import { MmkvStorage } from '@/stores/mmkvStorage';
 
 const initialState = {
   _hasHydrated: false,

package/templates/apps/mobile/src/stores/mmkvStorage.ts

@@ -1,7 +1,7 @@
 import { MMKV } from 'react-native-mmkv';
 import { StateStorage } from 'zustand/middleware';
 
-import CONFIG from '../config';
+import CONFIG from '@/config';
 
 const storage = new MMKV({
   encryptionKey: CONFIG.STORAGE_KEY,

package/templates/apps/mobile/tsconfig.app.json

@@ -3,7 +3,11 @@
   "compilerOptions": {
     "outDir": "../../dist/out-tsc",
     "strict": true,
-    "types": ["node"]
+    "types": ["node"],
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
   },
   "files": ["../../node_modules/@nx/react-native/typings/svg.d.ts"],
   "exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.spec.tsx", "test-setup.ts"],

package/templates/clean-generated-outputs.sh

@@ -27,6 +27,6 @@ rm -rf "$app_rn_ios_build_path"
 echo "Deleting $app_rn_android_gradle_path..."
 rm -rf "$app_rn_android_gradle_path"
 
-npm install
+yarn install
 
 echo "Done!"

package/templates/apps/mobile/.env

@@ -1,3 +0,0 @@
-IS_LIVE=false
-STORAGE_KEY=MMKV-STORAGE-KEY
-API_BASE_URL=