nx-react-native-cli 1.0.20 → 2.0.0

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 { tw } from '../../../tailwind';
-import { Box } from '../Box';
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
-interface Props {
-  children: React.ReactNode;
+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,8 +36,8 @@ export function Skeleton(props: Props) {
   }
 
   return (
-    <Animated.View style={[tw`rounded-lg bg-gray-200`, animatedStyle]}>
-      <Box style={tw`opacity-0`}>{children}</Box>
+    <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

@@ -4,19 +4,21 @@ import {
   TextInputProps as RNTextInputProps,
   StyleProp,
   TextStyle,
+  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 { Box } from '../Box';
-
-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;
@@ -62,7 +64,7 @@ export function TextInput(props: TextInputProps) {
   }
 
   return (
-    <Box
+    <View
       style={[
         defaultInputContainerStyle,
         focusedInputStyle(isFocused),
@@ -85,7 +87,7 @@ export function TextInput(props: TextInputProps) {
         onFocus={handleOnFocus}
         {...extraProps}
       />
-    </Box>
+    </View>
   );
 }
 

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/atoms/index.ts

@@ -1,8 +1,9 @@
 export * from './BottomSheet';
-export * from './Box';
 export * from './Button';
 export * from './Divider';
+export * from './ExcludedEdges';
 export * from './InputLayout';
+export * from './KeyboardAwareScrollView';
 export * from './ListLoadingItem';
 export * from './Modal';
 export * from './ScreenLoader';

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

@@ -6,15 +6,15 @@ import {
   PressableProps,
   StyleProp,
   TouchableOpacity,
+  View,
   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 { Box } from '../../atoms';
+import { useNavigation } from '@/hooks';
+import { ArrowLeftIcon } from '@/icons';
+import { Screens } from '@/routes';
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types';
 
 type Props = DefaultComponentProps &
   PressableProps & {
@@ -50,9 +50,9 @@ export function BackButton(props: Props) {
       style={[tw`h-[48px] w-[48px]`, style]}
       onPress={handleOnPress}
     >
-      <Box style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
+      <View style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
         <ArrowLeftIcon style={tw`text-gray-950`} />
-      </Box>
+      </View>
     </TouchableOpacity>
   );
 }

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,23 +1,26 @@
 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,
 } from 'react-native';
-import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
-import Animated from 'react-native-reanimated';
+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 { Box } from '../../atoms';
+import { KeyboardAwareScrollView } from '@/components';
+import CONFIG from '@/config';
+import { tw } from '@/tailwind';
 
 type Props = SafeAreaProviderProps & {
-  scrollViewRef?: React.RefObject<KeyboardAwareScrollView>;
+  barStyle?: StatusBarStyle;
+  scrollViewRef?: React.RefObject<RNKeyboardAwareScrollView>;
   containerStyle?: StyleProp<ViewStyle>;
   excludedEdges?: Edge[];
   extraBottomPadding?: number;
@@ -37,10 +40,9 @@ const safeAreaViewEdges: Edge[] = Platform.select({
   ios: ['top', 'left', 'right', 'bottom'],
 });
 
-const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent(KeyboardAwareScrollView);
-
 export function ScreenContainer(props: Props) {
   const {
+    barStyle = 'dark-content',
     children,
     containerStyle,
     excludedEdges = [],
@@ -59,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);
     }
   });
 
@@ -81,21 +78,18 @@ export function ScreenContainer(props: Props) {
   ];
 
   return (
-    <SafeAreaView edges={edges} style={[tw`flex-1 bg-gray-50 dark:bg-gray-900`, style]}>
+    <SafeAreaView edges={edges} style={[tw`flex-1 bg-white`, style]}>
       {hasScroll ? (
-        <AnimatedKeyboardAwareScrollView
-          ref={scrollViewRef}
-          contentContainerStyle={defaultContainerStyle}
-          enableResetScrollToCoords={false}
-          keyboardShouldPersistTaps="handled"
-          refreshControl={refreshControl}
-          scrollEventThrottle={16}
+        <KeyboardAwareScrollView
+          containerStyle={defaultContainerStyle}
+          refreshControl={refreshControl as ReactElement<RefreshControlProps>}
+          scrollViewRef={scrollViewRef}
           onScroll={onScroll}
         >
           {children}
-        </AnimatedKeyboardAwareScrollView>
+        </KeyboardAwareScrollView>
       ) : (
-        <Box style={defaultContainerStyle}>{children}</Box>
+        <View style={defaultContainerStyle}>{children}</View>
       )}
     </SafeAreaView>
   );

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

@@ -1,12 +1,11 @@
 import React from 'react';
-import { StyleProp, TouchableOpacity, ViewStyle } from 'react-native';
+import { StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native';
 
-import { GearIcon } from '../../../icons';
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types/component.type';
-import { Box } from '../../atoms';
-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;
@@ -36,19 +35,19 @@ export function ScreenHeader(props: Props) {
       style={tw`z-10 h-[48px] w-[48px]`}
       onPress={onExtraActionPress}
     >
-      <Box style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
+      <View style={[tw`flex-1 items-center justify-center rounded-full`, style]}>
         {extraActionComponent ? (
           extraActionComponent
         ) : (
           <GearIcon height={25} style={tw`text-black-950`} width={25} />
         )}
-      </Box>
+      </View>
     </TouchableOpacity>
   );
 
   return (
-    <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`]}>
+    <View style={[tw`h-[64px] border border-transparent`, style]}>
+      <View style={[tw`flex-row items-center justify-between border border-transparent p-4 pt-2`]}>
         {hasBackButton && <BackButton style={tw`z-10`} onPress={onBackPress} />}
         <Typography
           style={[
@@ -59,7 +58,7 @@ export function ScreenHeader(props: Props) {
           {title}
         </Typography>
         {extraActionComponentDisplay}
-      </Box>
-    </Box>
+      </View>
+    </View>
   );
 }

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,36 +1,44 @@
 import React from 'react';
+import { View } from 'react-native';
 
 import {
   BottomSheet,
-  Box,
   Button,
+  Divider,
   OutlinedButton,
   ScreenContainer,
   ScreenHeader,
   Typography,
   useBottomSheet,
-} from '../../components';
-import { useToggleDarkMode } from '../../hooks';
-import { PublicScreenProps, Screens } from '../../routes';
-import { tw } from '../../tailwind';
+} 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 toggleDarkMode = useToggleDarkMode();
   const { expandSheet, sheetRef } = useBottomSheet();
 
+  function toastHi() {
+    toast('Hi!');
+  }
+
   return (
     <ScreenContainer>
-      <ScreenHeader title="Landing" onExtraActionPress={toggleDarkMode} />
-      <Box style={tw`mx-4`}>
-        <Box row style={tw`gap-2`}>
+      <ScreenHeader title="Landing" onExtraActionPress={toastHi} />
+      <ArrowLeftIcon />
+      <Divider />
+      <HomeIcon />
+      <View style={tw`mx-4`}>
+        <View style={tw`gap-2`}>
           <Button title="Show Bottom Sheet" onPress={expandSheet} />
           <OutlinedButton title="Login" />
-        </Box>
-      </Box>
+        </View>
+      </View>
       <BottomSheet sheetRef={sheetRef}>
-        <Box>
+        <View>
           <Typography>Bottom Sheet</Typography>
-        </Box>
+        </View>
       </BottomSheet>
     </ScreenContainer>
   );

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=

package/templates/apps/mobile/src/components/atoms/Box/box.component.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { View, ViewProps } from 'react-native';
-
-import { tw } from '../../../tailwind';
-import { DefaultComponentProps } from '../../../types';
-
-type Props = DefaultComponentProps &
-  ViewProps & {
-    row?: boolean;
-  };
-
-export function Box(props: Props) {
-  const { row, style, ...rest } = props;
-
-  return (
-    <View
-      style={[tw`bg-gray-50 dark:bg-gray-900`, row && tw`flex-row items-center`, style]}
-      {...rest}
-    />
-  );
-}

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

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