nx-react-native-cli 2.2.1 → 2.3.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nx-react-native-cli",
-  "version": "2.2.1",
+  "version": "2.3.1",
   "description": "A react native starter (with NX) cli script",
   "type": "module",
   "files": [
@@ -24,11 +24,11 @@
     "start": "./src/index.js",
     "build": "rm -rf lib && esbuild src/index.js --format=cjs --platform=node --bundle --outfile=lib/index.cjs --minify --analyze",
     "prepublishOnly": "npm run build",
-    "example": "rm -rf example && npm run relink && npx nxrn create example",
-    "example-fresh": "rm -rf example && npm run relink && npx nxrn create example-fresh --fresh",
+    "example": "rm -rf example && npm run relink && npx nx-react-native-cli create example com.jeemercado.example",
+    "example-fresh": "rm -rf example && npm run relink && npx nx-react-native-cli create example-fresh --fresh",
     "generate-diff": "./generate-diff.sh",
     "show-diff": "npx diff2html -s side --sc --hc --cs light -i file -o preview -F diff.html -- diff.diff && open diff.html",
-    "relink": "npm unlink nxrn && npm run prepublishOnly && npm link",
+    "relink": "npm unlink nx-react-native-cli && npm run prepublishOnly && npm link",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "author": {
@@ -37,14 +37,14 @@
   },
   "license": "MIT",
   "dependencies": {
-    "chalk": "^5.3.0",
-    "commander": "^12.1.0",
-    "inquirer": "^10.0.2",
-    "ora": "^8.0.1",
-    "prettier": "^3.3.3"
+    "chalk": "5.3.0",
+    "commander": "12.1.0",
+    "inquirer": "10.0.2",
+    "ora": "8.0.1",
+    "prettier": "3.3.3"
   },
   "devDependencies": {
-    "diff2html-cli": "^5.2.15",
-    "esbuild": "^0.23.0"
+    "diff2html-cli": "5.2.15",
+    "esbuild": "0.23.0"
   }
 }

package/templates/.eslintrc.json

@@ -110,14 +110,7 @@
             "alphabetize": {
               "order": "asc"
             },
-            "groups": [
-              "builtin",
-              "external",
-              "internal",
-              "parent",
-              "sibling",
-              "index"
-            ],
+            "groups": ["builtin", "external", "internal", "parent", "sibling", "index"],
             "newlines-between": "always"
           }
         ],
@@ -144,6 +137,7 @@
         "no-duplicate-imports": "error",
         "no-empty-function": "warn",
         "no-extra-boolean-cast": "warn",
+        "sonarjs/no-use-of-empty-return-value": "off",
         "no-extra-semi": "warn",
         "no-magic-numbers": [
           "error",

package/templates/.nvmrc

@@ -1 +1 @@
-v20.9.0
+v22.14.0

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

@@ -1,11 +1,11 @@
 buildscript {
     ext {
-        buildToolsVersion = "35.0.0"
+        buildToolsVersion = "36.0.0"
         minSdkVersion = 24
-        compileSdkVersion = 35
-        targetSdkVersion = 35
+        compileSdkVersion = 36
+        targetSdkVersion = 36
         ndkVersion = "27.1.12297006"
-        kotlinVersion = "2.0.21"
+        kotlinVersion = "2.1.20"
     }
     repositories {
         google()

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.13-bin.zip
+distributionUrl=https\://services.gradle.org/distributions/gradle-9.0.0-bin.zip
 networkTimeout=10000
 validateDistributionUrl=true
 zipStoreBase=GRADLE_USER_HOME

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

@@ -42,3 +42,7 @@ hermesEnabled=true
 
 VisionCamera_enableCodeScanner=true
 
+# Use this property to enable edge-to-edge display support.
+# This allows your app to draw behind system bars for an immersive UI.
+# Note: Only works with ReactActivity and should not be used with custom Activity.
+edgeToEdgeEnabled=false

package/templates/apps/mobile/android/gradlew

@@ -1,7 +1,7 @@
 #!/bin/sh
 
 #
-# Copyright © 2015-2021 the original authors.
+# Copyright © 2015 the original authors.
 #
 # Licensed under the Apache License, Version 2.0 (the "License");
 # you may not use this file except in compliance with the License.
@@ -114,7 +114,7 @@ case "$( uname )" in                #(
   NONSTOP* )        nonstop=true ;;
 esac
 
-CLASSPATH=$APP_HOME/gradle/wrapper/gradle-wrapper.jar
+CLASSPATH="\\\"\\\""
 
 
 # Determine the Java command to use to start the JVM.
@@ -205,7 +205,7 @@ fi
 DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 
 # Collect all arguments for the java command:
-#   * DEFAULT_JVM_OPTS, JAVA_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
+#   * DEFAULT_JVM_OPTS, JAVA_OPTS, and optsEnvironmentVar are not allowed to contain shell fragments,
 #     and any embedded shellness will be escaped.
 #   * For example: A user cannot expect ${Hostname} to be expanded, as it is an environment variable and will be
 #     treated as '${Hostname}' itself on the command line.
@@ -213,7 +213,7 @@ DEFAULT_JVM_OPTS='"-Xmx64m" "-Xms64m"'
 set -- \
         "-Dorg.gradle.appname=$APP_BASE_NAME" \
         -classpath "$CLASSPATH" \
-        org.gradle.wrapper.GradleWrapperMain \
+        -jar "$APP_HOME/gradle/wrapper/gradle-wrapper.jar" \
         "$@"
 
 # Stop when "xargs" is not available.

package/templates/apps/mobile/android/gradlew.bat

@@ -1,3 +1,8 @@
+@REM Copyright (c) Meta Platforms, Inc. and affiliates.
+@REM
+@REM This source code is licensed under the MIT license found in the
+@REM LICENSE file in the root directory of this source tree.
+
 @rem
 @rem Copyright 2015 the original author or authors.
 @rem
@@ -70,11 +75,11 @@ goto fail
 :execute
 @rem Setup the command line
 
-set CLASSPATH=%APP_HOME%\gradle\wrapper\gradle-wrapper.jar
+set CLASSPATH=
 
 
 @rem Execute Gradle
-"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" org.gradle.wrapper.GradleWrapperMain %*
+"%JAVA_EXE%" %DEFAULT_JVM_OPTS% %JAVA_OPTS% %GRADLE_OPTS% "-Dorg.gradle.appname=%APP_BASE_NAME%" -classpath "%CLASSPATH%" -jar "%APP_HOME%\gradle\wrapper\gradle-wrapper.jar" %*
 
 :end
 @rem End local scope for the variables with windows NT shell

package/templates/apps/mobile/babel.config.json

@@ -33,6 +33,6 @@
         }
       }
     ],
-    "react-native-reanimated/plugin"
+    "react-native-worklets/plugin"
   ]
 }

package/templates/apps/mobile/package.json

@@ -49,17 +49,17 @@
     "jotai-optics": "*",
     "jotai": "*",
     "lodash": "*",
-    "lottie-react-native": "*",
     "metro-config": "*",
     "react-hook-form": "*",
     "react-native-dotenv": "*",
     "react-native-gesture-handler": "*",
     "react-native-get-random-values": "*",
     "react-native-haptic-feedback": "*",
-    "react-native-keyboard-aware-scroll-view": "*",
+    "react-native-keyboard-controller": "*",
     "react-native-mmkv": "*",
     "react-native-modal-datetime-picker": "*",
     "react-native-modal": "*",
+    "react-native-nitro-modules": "*",
     "react-native-pager-view": "*",
     "react-native-reanimated": "*",
     "react-native-safe-area-context": "*",
@@ -69,6 +69,7 @@
     "react-native-svg": "*",
     "react-native-turbo-image": "*",
     "react-native-url-polyfill": "*",
+    "react-native-worklets": "*",
     "react-native": "*",
     "react": "*",
     "tailwindcss": "*",

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

@@ -5,7 +5,8 @@ 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 { KeyboardProvider } from 'react-native-keyboard-controller';
+import { createMMKV } from 'react-native-mmkv';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { useDeviceContext } from 'twrnc';
 
@@ -28,7 +29,7 @@ const queryClient = new QueryClient({
   },
 });
 
-const storage = new MMKV({
+const storage = createMMKV({
   encryptionKey: CONFIG.STORAGE_KEY,
   id: 'react-query-persist',
 });
@@ -39,7 +40,9 @@ export const MmkvStorage: AsyncStorage = {
 
     return value ?? null;
   },
-  removeItem: (name) => storage.delete(name),
+  removeItem: (name) => {
+    storage.remove(name);
+  },
   setItem: (name, value) => storage.set(name, value),
 };
 
@@ -57,11 +60,13 @@ function Application() {
   return (
     <GestureHandlerRootView style={tw`flex-1`}>
       <SafeAreaProvider>
-        <PersistQueryClientProvider client={queryClient} persistOptions={persistOptions}>
-          <StorageManager>
-            <ApplicationRoutes />
-          </StorageManager>
-        </PersistQueryClientProvider>
+        <KeyboardProvider>
+          <PersistQueryClientProvider client={queryClient} persistOptions={persistOptions}>
+            <StorageManager>
+              <ApplicationRoutes />
+            </StorageManager>
+          </PersistQueryClientProvider>
+        </KeyboardProvider>
       </SafeAreaProvider>
     </GestureHandlerRootView>
   );

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

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

package/templates/apps/mobile/src/components/atoms/KeyboardAccessory/keyboard-accessory.component.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { InputAccessoryView, Keyboard, View } from 'react-native';
+
+import { Button } from '@/components/atoms/Button';
+import { KeyboardHideIcon } from '@/icons';
+import { tw } from '@/tailwind';
+import { DefaultComponentProps } from '@/types/component.type';
+
+type Props = DefaultComponentProps & {
+  nativeID: string;
+};
+
+export function KeyboardAccessory(props: Props) {
+  const { nativeID } = props;
+
+  return (
+    <InputAccessoryView nativeID={nativeID}>
+      <View style={tw`flex-row items-center justify-end bg-[#313132] px-2`}>
+        <Button buttonStyle={tw`my-2 rounded-lg bg-[#717172]`} onPress={() => Keyboard.dismiss()}>
+          <KeyboardHideIcon style={tw`text-white`} />
+        </Button>
+      </View>
+    </InputAccessoryView>
+  );
+}

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

@@ -7,15 +7,15 @@ import {
   StyleProp,
   ViewStyle,
 } from 'react-native';
-import { KeyboardAwareScrollView as RNKeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view';
-import Animated from 'react-native-reanimated';
+import { ScrollView as RNScrollView } from 'react-native-gesture-handler';
+import { KeyboardAwareScrollView as RNKeyboardAwareScrollView } from 'react-native-keyboard-controller';
 
 import { tw } from '@/tailwind';
 import { DefaultComponentProps } from '@/types';
 
 type Props = DefaultComponentProps & {
   children?: React.ReactNode;
-  scrollViewRef?: React.RefObject<RNKeyboardAwareScrollView | null>;
+  scrollViewRef?: React.RefObject<RNScrollView | null>;
   containerStyle?: StyleProp<ViewStyle>;
   extraBottomPadding?: number;
   refreshControl?: React.ReactElement<RefreshControlProps> | undefined;
@@ -24,8 +24,6 @@ type Props = DefaultComponentProps & {
 
 const defaultStyle = tw`grow`;
 
-const AnimatedKeyboardAwareScrollView = Animated.createAnimatedComponent(RNKeyboardAwareScrollView);
-
 export function KeyboardAwareScrollView(props: Props) {
   const {
     children,
@@ -44,17 +42,18 @@ export function KeyboardAwareScrollView(props: Props) {
   ];
 
   return (
-    <AnimatedKeyboardAwareScrollView
+    <RNKeyboardAwareScrollView
       ref={scrollViewRef}
+      bottomOffset={100}
       contentContainerStyle={[defaultContainerStyle, containerStyle]}
-      enableResetScrollToCoords={false}
       keyboardShouldPersistTaps="handled"
       refreshControl={refreshControl}
       scrollEventThrottle={16}
+      ScrollViewComponent={RNScrollView}
       style={style}
       onScroll={onScroll}
     >
       {children}
-    </AnimatedKeyboardAwareScrollView>
+    </RNKeyboardAwareScrollView>
   );
 }

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

@@ -1,53 +1,87 @@
 import { BottomSheetTextInput as RNBottomSheetTextInput } from '@gorhom/bottom-sheet';
 import React, { useState } from 'react';
 import {
+  NativeSyntheticEvent,
+  Pressable,
   TextInput as RNTextInput,
   TextInputProps as RNTextInputProps,
   StyleProp,
+  TextInputFocusEventData,
   TextStyle,
   View,
 } from 'react-native';
 
-import { DefaultNameInputProps } from '@/components/atoms/TextInput/constants';
+import { DefaultNameInputProps } from './constants';
+
+import { CrossIcon } from '@/icons';
 import {
   colors,
   defaultInputContainerStyle,
   defaultInputTextStyle,
   disabledInputStyle,
   focusedInputStyle,
+  tw,
 } from '@/tailwind';
-import { DefaultComponentProps } from '@/types';
+import { DefaultComponentProps } from '@/types/component.type';
 
 export type BottomSheetTextInputProps = DefaultComponentProps &
   RNTextInputProps & {
     textInputRef?: React.RefObject<RNTextInput>;
     textStyle?: StyleProp<TextStyle>;
+    showClearButton?: boolean;
+    onClearButtonPress?: () => void;
   };
 
 export function BottomSheetTextInput(props: BottomSheetTextInputProps) {
   const {
     isDisabled = false,
     multiline = false,
+    onBlur,
     onChangeText,
+    onClearButtonPress,
+    onFocus,
     placeholder,
+    showClearButton = true,
     style,
     textInputRef,
     textStyle,
     value,
     ...extraProps
   } = props;
+  const [isClearButtonVisible, setIsClearButtonVisible] = useState<boolean>(false);
   const [isFocused, setFocused] = useState<boolean>(false);
 
   function handleOnChangeText(text: string) {
     onChangeText?.(text);
+
+    if (showClearButton) {
+      setIsClearButtonVisible(text.length > 0);
+    }
+  }
+
+  function handleOnClearPress() {
+    handleOnChangeText?.('');
+    onClearButtonPress?.();
   }
 
-  function handleOnFocus() {
+  function handleOnFocus(e: NativeSyntheticEvent<TextInputFocusEventData>) {
     setFocused(true);
+
+    const shouldShowClearButton = showClearButton && value?.length;
+    if (shouldShowClearButton) {
+      setIsClearButtonVisible(true);
+    }
+    onFocus?.(e);
   }
 
-  function handleOnBlur() {
+  function handleOnBlur(e: NativeSyntheticEvent<TextInputFocusEventData>) {
     setFocused(false);
+
+    const shouldShowClearButton = showClearButton && value?.length;
+    if (shouldShowClearButton) {
+      setIsClearButtonVisible(false);
+    }
+    onBlur?.(e);
   }
 
   return (
@@ -65,15 +99,25 @@ export function BottomSheetTextInput(props: BottomSheetTextInputProps) {
         editable={!isDisabled}
         multiline={multiline}
         placeholder={placeholder}
-        placeholderTextColor={colors.gray[600]}
-        selectionColor={colors.primary[400]}
+        placeholderTextColor={colors.gray[500]}
+        selectionColor={colors.primary}
         style={[defaultInputTextStyle, textStyle]}
         value={value}
-        onBlur={handleOnBlur}
+        onBlur={(e) => handleOnBlur(e as NativeSyntheticEvent<TextInputFocusEventData>)}
         onChangeText={handleOnChangeText}
-        onFocus={handleOnFocus}
+        onFocus={(e) => handleOnFocus(e as NativeSyntheticEvent<TextInputFocusEventData>)}
         {...extraProps}
       />
+      {isClearButtonVisible && (
+        <Pressable
+          hitSlop={30}
+          style={tw`items-center justify-center`}
+          testID="clear-button"
+          onPress={handleOnClearPress}
+        >
+          <CrossIcon />
+        </Pressable>
+      )}
     </View>
   );
 }

package/templates/apps/mobile/src/components/atoms/TextInput/constants.ts

@@ -1,46 +1,52 @@
 import { TextInputProps } from 'react-native';
 
-export const TEXT_INPUT_MIN_HEIGHT = 100;
+export const TEXT_INPUT_MIN_HEIGHT = 56;
 export const TEXT_INPUT_LINE_HEIGHT = 21;
 
 export const DefaultPhonePadInputProps: TextInputProps = {
   autoCapitalize: 'none',
-  autoCorrect: false,
+  autoCorrect: true,
+  keyboardAppearance: 'dark',
   keyboardType: 'phone-pad',
   numberOfLines: 1,
 };
 
 export const DefaultNumberPadInputProps: TextInputProps = {
   autoCapitalize: 'none',
-  autoCorrect: false,
+  autoCorrect: true,
+  keyboardAppearance: 'dark',
   keyboardType: 'number-pad',
   numberOfLines: 1,
 };
 
 export const DefaultNumericInputProps: TextInputProps = {
   autoCapitalize: 'none',
-  autoCorrect: false,
+  autoCorrect: true,
+  keyboardAppearance: 'dark',
   keyboardType: 'numeric',
   numberOfLines: 1,
 };
 
 export const DefaultNameInputProps: TextInputProps = {
   autoCapitalize: 'words',
-  autoCorrect: false,
+  autoCorrect: true,
+  keyboardAppearance: 'dark',
   keyboardType: 'default',
   numberOfLines: 1,
 };
 
 export const DefaultEmailInputProps: TextInputProps = {
   autoCapitalize: 'none',
-  autoCorrect: false,
+  autoCorrect: true,
+  keyboardAppearance: 'dark',
   keyboardType: 'email-address',
   numberOfLines: 1,
 };
 
 export const DefaultTextAreaInputProps: TextInputProps = {
   autoCapitalize: 'sentences',
-  autoCorrect: false,
+  autoCorrect: true,
+  keyboardAppearance: 'dark',
   keyboardType: 'default',
   numberOfLines: 3,
 };

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

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { useEffect, useState } from 'react';
 import {
   TextInput as RNTextInput,
   TextInputProps as RNTextInputProps,
@@ -6,22 +6,22 @@ import {
   TextStyle,
 } from 'react-native';
 
-import { TextInput } from '@/components/atoms/TextInput';
-import {
-  DefaultTextAreaInputProps,
-  TEXT_INPUT_MIN_HEIGHT,
-} from '@/components/atoms/TextInput/constants';
-import { getTextInputHeightAdjustment } from '@/components/atoms/TextInput/util';
-import { DefaultComponentProps } from '@/types';
+import { DefaultTextAreaInputProps, TEXT_INPUT_MIN_HEIGHT } from './constants';
+import { TextInput } from './text-input.component';
+import { getTextInputHeightAdjustment } from './util';
+
+import { DefaultComponentProps } from '@/types/component.type';
 
 export type TextInputAreaProps = DefaultComponentProps &
   RNTextInputProps & {
     textInputRef?: React.RefObject<RNTextInput>;
     textStyle?: StyleProp<TextStyle>;
+    autoAdjustHeight?: boolean;
   };
 
 export function TextInputArea(props: TextInputAreaProps) {
   const {
+    autoAdjustHeight = false,
     numberOfLines = DefaultTextAreaInputProps.numberOfLines as number,
     onChangeText,
     textStyle,
@@ -33,25 +33,26 @@ export function TextInputArea(props: TextInputAreaProps) {
   function handleOnChangeText(text: string) {
     onChangeText?.(text);
   }
+
   useEffect(() => {
-    if (!value) {
+    if (!value || !autoAdjustHeight) {
       return;
     }
 
-    const newLines = value.split(/\r\n|\r|\n/).length;
+    const newLines = value.split(/[\r\n]+/).length;
 
     if (numberOfNewLines !== newLines) {
       setNumberOfNewLines(newLines);
     }
-
-    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [value]);
 
   return (
     <TextInput
+      testID="text-input-area"
       {...DefaultTextAreaInputProps}
       multiline
       numberOfLines={numberOfLines}
+      showClearButton={false}
       textStyle={[
         textStyle,
         {