nx-react-native-cli 2.1.3 → 2.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nx-react-native-cli",
-  "version": "2.1.3",
+  "version": "2.2.0",
   "description": "A react native starter (with NX) cli script",
   "type": "module",
   "files": [

package/templates/apps/mobile/Gemfile

@@ -10,5 +10,11 @@ gem 'activesupport', '>= 6.1.7.5', '!= 7.1.0'
 gem 'xcodeproj', '< 1.26.0'
 gem 'concurrent-ruby', '< 1.3.4'
 
+# Ruby 3.4.0 has removed some libraries from the standard library.
+gem 'bigdecimal'
+gem 'logger'
+gem 'benchmark'
+gem 'mutex_m'
+
 plugins_path = File.join(File.dirname(__FILE__), './fastlane', 'Pluginfile')
-eval_gemfile(plugins_path) if File.exist?(plugins_path)
+eval_gemfile(plugins_path) if File.exist?(plugins_path)

package/templates/apps/mobile/android/gradle/wrapper/gradle-wrapper.properties

@@ -1,6 +1,6 @@
 distributionBase=GRADLE_USER_HOME
 distributionPath=wrapper/dists
-distributionUrl=https\://services.gradle.org/distributions/gradle-8.12-all.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-8.13-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

package/templates/apps/mobile/android/gradle.properties

@@ -10,7 +10,7 @@
 # Specifies the JVM arguments used for the daemon process.
 # The setting is particularly useful for tweaking memory settings.
 # Default value: -Xmx512m -XX:MaxMetaspaceSize=256m
-org.gradle.jvmargs=-Xmx2048m -XX:MaxMetaspaceSize=512m
+org.gradle.jvmargs=-Xmx4g -XX:MaxMetaspaceSize=4g
 
 # When configured, Gradle will run in incubating parallel mode.
 # This option should only be used with decoupled projects. More details, visit

package/templates/apps/mobile/fastlane/Fastfile

@@ -290,7 +290,7 @@ platform :android do
     desc "Build Android (Production Server)"
     lane :prod do 
         begin
-            flavor = 'prod'
+            flavor = 'production'
             setup_android()
             # TODO: COMMENT IF FIREBASE PROD IS LINKED TO GOOGLE PLAY
             android_build_apk(flavor)

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

@@ -3,26 +3,19 @@
 #import <React/RCTBundleURLProvider.h>
 #import <ReactAppDependencyProvider/RCTAppDependencyProvider.h>
 
-@implementation AppDelegate
+#import <RCTDefaultReactNativeFactoryDelegate.h>
+#import <RCTReactNativeFactory.h>
 
-- (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 = @{};
+@interface ReactNativeDelegate : RCTDefaultReactNativeFactoryDelegate
+@end
 
-  return [super application:application didFinishLaunchingWithOptions:launchOptions];
-}
+@implementation ReactNativeDelegate
 
-- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge
-{
+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
   return [self bundleURL];
 }
 
-- (NSURL *)bundleURL
-{
+- (NSURL *)bundleURL {
 #if DEBUG
   return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"src/main"];
 #else
@@ -31,3 +24,30 @@
 }
 
 @end
+
+@interface AppDelegate ()
+@property (nonatomic, strong) ReactNativeDelegate *reactNativeDelegate;
+@property (nonatomic, strong) RCTReactNativeFactory *reactNativeFactory;
+@end
+
+@implementation AppDelegate
+
+- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
+{
+  ReactNativeDelegate *delegate = [ReactNativeDelegate new];
+  RCTReactNativeFactory *factory = [[RCTReactNativeFactory alloc] initWithDelegate:delegate];
+  delegate.dependencyProvider = [RCTAppDependencyProvider new];
+  
+  self.reactNativeDelegate = delegate;
+  self.reactNativeFactory = factory;
+  
+  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
+  
+  [factory startReactNativeWithModuleName:@"AppsMobile" 
+                                  inWindow:self.window 
+                           launchOptions:launchOptions];
+  
+  return YES;
+}
+
+@end

package/templates/apps/mobile/package.json

@@ -5,7 +5,7 @@
   "scripts": {
     "android:connect": "adb reverse tcp:8081 tcp:8081",
     "start": "npx nx start mobile --skip-nx-cache",
-    "run-ios": "npx nx run-ios mobile --skip-nx-cache --scheme=Dev --simulator='iPhone 13 (A96A9251-28D7-48B1-8F6A-20B6CCB8810B)'",
+    "run-ios": "npx nx run-ios mobile --skip-nx-cache --scheme=Dev --simulator='iPhone 16'",
     "run-android": "npx nx run-android mobile --skip-nx-cache",
     "ensure-symlink": "npx nx ensure-symlink mobile",
     "sync-deps": "npx nx sync-deps mobile",
@@ -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 -a Xcode ios/AppsMobile.xcworkspace",
+    "xcode": "xed -b ios",
     "touch-xcode": "cd ios && touch .xcode.env",
     "check-env:mobile": "cd ../.. && npm run check-env:mobile",
     "setup-fastlane": "rbenv local && bundle install && bundle update",

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

@@ -7,7 +7,6 @@ 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';
@@ -18,8 +17,6 @@ import 'react-native-url-polyfill/auto';
 
 LogBox.ignoreLogs(['VirtualizedLists', 'onAnimatedValueUpdate']);
 
-enableFreeze(true);
-
 const CACHE_TIME = 0;
 const STALE_TIME = 0;
 

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

@@ -47,7 +47,7 @@ export function Button(props: Props) {
     <TouchableOpacity activeOpacity={activeOpacity} disabled={disabled} style={[style]} {...rest}>
       <View
         style={[
-          tw`bg-primary-700 items-center justify-center rounded-xl p-3`,
+          tw`bg-primary-500 items-center justify-center rounded-xl px-6 py-2`,
           buttonStyle,
           disabledInputStyle(disabled),
         ]}
@@ -64,8 +64,8 @@ export function OutlinedButton(props: Props) {
   return (
     <Button
       {...rest}
-      buttonStyle={tw`border-primary-700 border-2 bg-white`}
-      textStyle={tw`text-primary-700`}
+      buttonStyle={tw`border-primary-500 border-2 bg-white`}
+      textStyle={tw`text-primary-500`}
     />
   );
 }

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

@@ -1,3 +1,4 @@
+/* eslint-disable no-magic-numbers */
 import React from 'react';
 import {
   NativeScrollEvent,
@@ -14,7 +15,7 @@ import { DefaultComponentProps } from '@/types';
 
 type Props = DefaultComponentProps & {
   children?: React.ReactNode;
-  scrollViewRef?: React.RefObject<RNKeyboardAwareScrollView>;
+  scrollViewRef?: React.RefObject<RNKeyboardAwareScrollView | null>;
   containerStyle?: StyleProp<ViewStyle>;
   extraBottomPadding?: number;
   refreshControl?: React.ReactElement<RefreshControlProps> | undefined;
@@ -39,7 +40,6 @@ export function KeyboardAwareScrollView(props: Props) {
   const defaultContainerStyle = [
     defaultStyle,
     containerStyle,
-    // eslint-disable-next-line no-magic-numbers
     extraBottomPadding && tw`pb-[${extraBottomPadding + 50}px]`,
   ];
 

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

@@ -1,55 +1,47 @@
 import React from 'react';
-import { View } from 'react-native';
+import { Dimensions, View } from 'react-native';
 
 import { Skeleton } from '@/components/atoms/Skeleton';
 import { tw } from '@/tailwind';
 import { DefaultComponentProps } from '@/types';
 
+const SPACING = 2;
+const screenWidth = Dimensions.get('window').width;
+
 type Props = DefaultComponentProps & {
+  count: number;
   isLoading: boolean;
 };
 
 export function ListLoadingItemComponent(props: Props) {
-  const { isLoading, style } = props;
+  const { count, isLoading, style } = props;
+  const itemWidth = (screenWidth - (count + 1) * SPACING) / count;
 
   return (
     <View style={[style]}>
       <View style={[tw`gap-2`, style]}>
-        <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[100px] w-full`} />}
-        </Skeleton>
-        <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[100px] w-full`} />}
-        </Skeleton>
-        <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[100px] w-full`} />}
-        </Skeleton>
+        {Array.from({ length: count }).map((_, index) => (
+          <Skeleton key={index} isLoading={isLoading}>
+            {isLoading && <View style={tw`h-[${itemWidth}px] w-full`} />}
+          </Skeleton>
+        ))}
       </View>
     </View>
   );
 }
 
 export function ListLoadingHorizontalItemComponent(props: Props) {
-  const { isLoading, style } = props;
+  const { count, isLoading, style } = props;
+  const itemWidth = (screenWidth - (count + 1) * SPACING) / count;
 
   return (
     <View style={[style]}>
       <View style={[tw`flex-row gap-2`, style]}>
-        <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
-        </Skeleton>
-        <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
-        </Skeleton>
-        <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
-        </Skeleton>
-        <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
-        </Skeleton>
-        <Skeleton isLoading={isLoading}>
-          {isLoading && <View style={tw`h-[200px] w-[100px]`} />}
-        </Skeleton>
+        {Array.from({ length: count }).map((_, index) => (
+          <Skeleton key={index} isLoading={isLoading}>
+            {isLoading && <View style={tw`h-[${itemWidth}px] w-[${itemWidth}px]`} />}
+          </Skeleton>
+        ))}
       </View>
     </View>
   );

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

@@ -20,7 +20,7 @@ import { tw } from '@/tailwind';
 
 type Props = SafeAreaProviderProps & {
   barStyle?: StatusBarStyle;
-  scrollViewRef?: React.RefObject<RNKeyboardAwareScrollView>;
+  scrollViewRef?: React.RefObject<RNKeyboardAwareScrollView | null>;
   containerStyle?: StyleProp<ViewStyle>;
   excludedEdges?: Edge[];
   extraBottomPadding?: number;
@@ -29,6 +29,7 @@ type Props = SafeAreaProviderProps & {
   shouldShowStatusBar?: boolean;
   shouldBeTranslucent?: boolean;
   statusBarColor?: string;
+  useSafeAreaView?: boolean;
   onScroll?: (event: NativeSyntheticEvent<NativeScrollEvent>) => void;
 };
 
@@ -55,12 +56,8 @@ export function ScreenContainer(props: Props) {
     shouldShowStatusBar = true,
     statusBarColor = 'transparent',
     style,
+    useSafeAreaView = true,
   } = props;
-  const edges =
-    excludedEdges.length > 0
-      ? safeAreaViewEdges.filter((edge) => !excludedEdges.includes(edge))
-      : safeAreaViewEdges;
-
   useFocusEffect(() => {
     StatusBar.setHidden(!shouldShowStatusBar);
     if (CONFIG.IS_ANDROID) {
@@ -77,6 +74,30 @@ export function ScreenContainer(props: Props) {
     extraBottomPadding && tw`pb-[${extraBottomPadding + 50}px]`,
   ];
 
+  if (!useSafeAreaView) {
+    return (
+      <View style={[tw`flex-1 bg-white`, style]}>
+        {hasScroll ? (
+          <KeyboardAwareScrollView
+            containerStyle={defaultContainerStyle}
+            refreshControl={refreshControl as ReactElement<RefreshControlProps>}
+            scrollViewRef={scrollViewRef}
+            onScroll={onScroll}
+          >
+            {children}
+          </KeyboardAwareScrollView>
+        ) : (
+          <View style={defaultContainerStyle}>{children}</View>
+        )}
+      </View>
+    );
+  }
+
+  const edges =
+    excludedEdges.length > 0
+      ? safeAreaViewEdges.filter((edge) => !excludedEdges.includes(edge))
+      : safeAreaViewEdges;
+
   return (
     <SafeAreaView edges={edges} style={[tw`flex-1 bg-white`, style]}>
       {hasScroll ? (