nx-react-native-cli 1.0.16 → 1.0.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nx-react-native-cli",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "A react native starter (with NX) cli script",
   "type": "module",
   "files": [
@@ -17,6 +17,9 @@
     "build": "rm -rf lib && esbuild src/index.js --format=cjs --platform=node --bundle --outfile=lib/index.cjs --minify --analyze",
     "prepublish": "npm run build",
     "example": "npx nxrn create example",
+    "example-fresh": "npx nxrn 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 prepublish && npm link",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -33,6 +36,7 @@
     "prettier": "^3.3.3"
   },
   "devDependencies": {
+    "diff2html-cli": "^5.2.15",
     "esbuild": "^0.23.0"
   }
 }

package/templates/.eslintrc.json

@@ -264,6 +264,7 @@
       "extends": ["plugin:@nx/typescript"],
       "rules": {
         "@typescript-eslint/consistent-type-definitions": "off",
+        "@typescript-eslint/no-inferrable-types": "off",
         "@typescript-eslint/no-explicit-any": "off",
         "@typescript-eslint/no-use-before-define": "off",
         "@typescript-eslint/no-unused-vars": [

package/templates/.nvmrc

@@ -1 +1 @@
-v18.17.0
+v20.9.0

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

@@ -1,4 +1,5 @@
 apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
 apply plugin: "com.facebook.react"
 
 /**
@@ -9,12 +10,12 @@ react {
     /* Folders */
     //   The root of your project, i.e. where "package.json" lives. Default is '..'
     // root = file("../")
-    //   The folder where the react-native NPM package is. Default is ../node_modules/react-native
-    // reactNativeDir = file("../node_modules/react-native")
-    //   The folder where the react-native Codegen package is. Default is ../node_modules/@react-native/codegen
-    // codegenDir = file("../node_modules/@react-native/codegen")
-    //   The cli.js file which is the React Native CLI entrypoint. Default is ../node_modules/react-native/cli.js
-    // cliFile = file("../node_modules/react-native/cli.js")
+    //   The folder where the react-native NPM package is. Default is ../../../../node_modules/react-native
+    reactNativeDir = file("../../../../node_modules/react-native")
+    //   The folder where the react-native Codegen package is. Default is ../../../../node_modules/@react-native/codegen
+    codegenDir = file("../../../../node_modules/@react-native/codegen")
+    //   The cli.js file which is the React Native CLI entrypoint. Default is ../../../../node_modules/react-native/cli.js
+    cliFile = file("../../../../node_modules/react-native/cli.js")
 
     /* Variants */
     //   The list of variants to that are debuggable. For those we're going to
@@ -36,7 +37,7 @@ react {
     // bundleAssetName = "MyApplication.android.bundle"
     //
     //   The entry file for bundle generation. Default is 'index.android.js' or 'index.js'
-    // entryFile = file("../js/MyApplication.android.js")
+    entryFile = file("../../src/main.tsx")
     //
     //   A list of extra flags to pass to the 'bundle' commands.
     //   See https://github.com/react-native-community/cli/blob/main/docs/commands.md#bundle
@@ -44,11 +45,10 @@ react {
 
     /* Hermes Commands */
     //   The hermes compiler command to run. By default it is 'hermesc'
-    // hermesCommand = "$rootDir/my-custom-hermesc/bin/hermesc"
+    // hermesCommand = "../../../../node_modules/react-native/sdks/hermesc/%OS-BIN%/hermesc"
     //
     //   The list of flags to pass to the Hermes compiler. By default is "-O", "-output-source-map"
     // hermesFlags = ["-O", "-output-source-map"]
-    entryFile = file("../../src/main.tsx")
 }
 
 /**
@@ -71,7 +71,8 @@ def jscFlavor = 'org.webkit:android-jsc:+'
 
 android {
     ndkVersion rootProject.ext.ndkVersion
-    compileSdkVersion rootProject.ext.compileSdkVersion
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
     namespace "com.appsmobile"
     flavorDimensions "default"
 
@@ -139,27 +140,14 @@ android {
             // see https://reactnative.dev/docs/signed-apk-android.
             minifyEnabled enableProguardInReleaseBuilds
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
-            
-            proguardFile "${rootProject.projectDir}/../node_modules/detox/android/detox/proguard-rules-app.pro"
-            
         }
     }
 }
 
 dependencies {
-    
-    androidTestImplementation('com.wix:detox:+')
-    implementation 'androidx.appcompat:appcompat:1.1.0'
-    
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
 
-    debugImplementation("com.facebook.flipper:flipper:${FLIPPER_VERSION}")
-    debugImplementation("com.facebook.flipper:flipper-network-plugin:${FLIPPER_VERSION}") {
-        exclude group:'com.squareup.okhttp3', module:'okhttp'
-    }
-
-    debugImplementation("com.facebook.flipper:flipper-fresco-plugin:${FLIPPER_VERSION}")
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")
     } else {
@@ -167,4 +155,4 @@ dependencies {
     }
 }
 
-apply from: file("../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)
+apply from: file("../../../../node_modules/@react-native-community/cli-platform-android/native_modules.gradle"); applyNativeModulesAppBuildGradle(project)

package/templates/apps/mobile/android/app/proguard-rules.pro

@@ -0,0 +1,20 @@
+# Add project specific ProGuard rules here.
+# By default, the flags in this file are appended to flags specified
+# in /usr/local/Cellar/android-sdk/24.3.3/tools/proguard/proguard-android.txt
+# You can edit the include path and order by changing the proguardFiles
+# directive in build.gradle.
+#
+# For more details, see
+#   http://developer.android.com/guide/developing/tools/proguard.html
+
+# Add any project specific keep options here:
+
+-keep public class com.dylanvann.fastimage.* {*;}
+-keep public class com.dylanvann.fastimage.** {*;}
+-keep public class * implements com.bumptech.glide.module.GlideModule
+-keep public class * extends com.bumptech.glide.module.AppGlideModule
+-keep public enum com.bumptech.glide.load.ImageHeaderParser$** {
+  **[] $VALUES;
+  public *;
+}
+-keep class com.shopify.reactnative.skia.** { *; }

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

@@ -1,15 +1,11 @@
-// Top-level build file where you can add configuration options common to all sub-projects/modules.
-
 buildscript {
     ext {
-        buildToolsVersion = "33.0.0"
-        minSdkVersion = 24
+        buildToolsVersion = "34.0.0"
+        minSdkVersion = 23
         compileSdkVersion = 34
         targetSdkVersion = 34
-        kotlinVersion = "1.8.20"
-
-        // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP.
-        ndkVersion = "23.1.7779620"
+        ndkVersion = "26.1.10909125"
+        kotlinVersion = "1.9.22"
     }
     repositories {
         google()
@@ -18,17 +14,8 @@ buildscript {
     dependencies {
         classpath("com.android.tools.build:gradle")
         classpath("com.facebook.react:react-native-gradle-plugin")
-        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlinVersion")
+        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin")
     }
 }
 
-allprojects {
-    repositories {
-        
-        maven {
-            // https://wix.github.io/Detox/docs/introduction/project-setup
-            url("$rootDir/../node_modules/detox/Detox-android")
-        }
-        
-    }
-}
+apply plugin: "com.facebook.react.rootproject"

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

@@ -1,6 +1,7 @@
 {
-  "presets": ["module:metro-react-native-babel-preset"],
+  "presets": ["module:@react-native/babel-preset"],
   "plugins": [
+    "babel-plugin-transform-flow-enums",
     [
       "module:react-native-dotenv",
       {

package/templates/apps/mobile/export-node-binary.sh

@@ -0,0 +1,6 @@
+#!/bin/bash
+
+cat << EOF > ./ios/.xcode.env.local
+export NODE_BINARY=$(which node)
+export ENTRY_FILE="\${PROJECT_DIR}/../src/main.tsx"
+EOF

package/templates/apps/mobile/jest.config.ts

@@ -0,0 +1,12 @@
+module.exports = {
+    displayName: 'mobile',
+    preset: 'react-native',
+    resolver: '@nx/jest/plugins/resolver',
+    moduleFileExtensions: ['ts', 'js', 'html', 'tsx', 'jsx'],
+    setupFilesAfterEnv: ['<rootDir>/test-setup.ts'],
+    moduleNameMapper: {
+      '\\.svg$': '@nx/react-native/plugins/jest/svg-mock',
+    },
+    coverageDirectory: '../../coverage/apps/mobile',
+  };
+  

package/templates/apps/mobile/package.json

@@ -10,11 +10,13 @@
     "ensure-symlink": "npx nx ensure-symlink mobile",
     "sync-deps": "npx nx sync-deps mobile",
     "pod-install": "npx nx pod-install mobile",
-    "bundle:pod-install": "cd ios && bundle install && bundle exec pod install --repo-update",
+    "export-node-binary": "./export-node-binary.sh",
+    "bundle:pod-install": "cd ios && bundle install && bundle exec pod install --repo-update && npm run export-node-binary",
     "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",
+    "touch-xcode": "cd ios && touch .xcode.env",
     "check-env:mobile": "cd ../.. && npm run check-env:mobile",
     "setup-fastlane": "rbenv local && bundle install && bundle update",
     "deploy-android:dev": "bundle exec fastlane android dev --env development",
@@ -34,6 +36,7 @@
     "@react-navigation/native": "*",
     "@react-navigation/routers": "*",
     "@react-navigation/stack": "*",
+    "@shopify/react-native-skia": "*",
     "@tanstack/query-async-storage-persister": "*",
     "@tanstack/query-core": "*",
     "@tanstack/query-sync-storage-persister": "*",
@@ -47,12 +50,14 @@
     "jotai-optics": "*",
     "jotai": "*",
     "lodash": "*",
+    "lottie-react-native": "*",
     "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": "*",
     "react-native-keyboard-aware-scroll-view": "*",
     "react-native-mmkv": "*",
     "react-native-modal-datetime-picker": "*",

package/templates/apps/mobile/project.json

@@ -3,6 +3,8 @@
   "$schema": "../../node_modules/nx/schemas/project-schema.json",
   "sourceRoot": "apps/mobile/src",
   "projectType": "application",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project mobile --web",
   "targets": {
     "check-env": {
       "executor": "nx:run-script",
@@ -100,6 +102,5 @@
         "jestConfig": "apps/mobile/jest.config.ts"
       }
     }
-  },
-  "tags": []
+  }
 }

package/templates/apps/mobile/react-native.config.js

@@ -0,0 +1,7 @@
+module.exports = {
+  project: {
+    ios: {},
+    android: {},
+  },
+  assets: ['./src/assets/fonts'],
+};

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

@@ -8,6 +8,8 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import 'react-native-get-random-values';
 import { SafeAreaProvider } from 'react-native-safe-area-context';
 import { enableFreeze } from 'react-native-screens';
+import { useDeviceContext } from 'twrnc';
+
 import 'react-native-url-polyfill/auto';
 
 import { StorageManager } from '../components';
@@ -35,7 +37,11 @@ const persister = createAsyncStoragePersister({
 
 const persistOptions = { maxAge: CACHE_TIME, persister };
 
-function Application(): JSX.Element {
+function Application() {
+  useDeviceContext(tw, {
+    initialColorScheme: 'light',
+  });
+
   return (
     <GestureHandlerRootView style={tw`flex-1`}>
       <SafeAreaProvider>

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

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/ban-ts-comment */
+/* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable no-magic-numbers */
 import {
   BottomSheetBackdropProps,
@@ -6,7 +8,7 @@ import {
   BottomSheetModal,
   BottomSheetScrollView,
 } from '@gorhom/bottom-sheet';
-import React, { FC, ReactNode, RefObject, useCallback, useMemo, useRef } from 'react';
+import React, { FC, RefObject, useCallback, useMemo, useRef, useState } from 'react';
 import { Keyboard, StyleProp, ViewStyle } from 'react-native';
 import { TouchableWithoutFeedback } from 'react-native-gesture-handler';
 import Animated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated';
@@ -16,7 +18,7 @@ import { DefaultComponentProps } from '../../../types';
 
 export type BottomSheetProps = DefaultComponentProps & {
   backgroundStyle?: StyleProp<Omit<ViewStyle, 'left' | 'right' | 'position' | 'top' | 'bottom'>>;
-  children?: ReactNode;
+  children?: React.ReactNode;
   contentContainerStyle?: StyleProp<ViewStyle>;
   enableDismissOnPressBackdrop?: boolean;
   enableDynamicSizing?: boolean;
@@ -100,6 +102,7 @@ export function BottomSheet(props: BottomSheetProps) {
   return (
     <BottomSheetModal
       ref={sheetRef}
+      android_keyboardInputMode="adjustResize"
       backdropComponent={renderBackdrop}
       backgroundStyle={[tw`bg-gray-50`, backgroundStyle]}
       enableDynamicSizing={enableDynamicSizing}
@@ -125,21 +128,20 @@ export function BottomSheet(props: BottomSheetProps) {
 }
 
 export function useBottomSheet() {
+  const [isVisible, setIsVisible] = useState<boolean>(false);
   const sheetRef = useRef<BottomSheetModal>(null);
 
   const expandSheet = useCallback(() => {
     Keyboard.dismiss();
     sheetRef.current?.present();
+    setIsVisible(true);
   }, []);
 
   const closeSheet = useCallback(() => {
     Keyboard.dismiss();
     sheetRef.current?.close();
+    setIsVisible(false);
   }, []);
 
-  return {
-    closeSheet,
-    expandSheet,
-    sheetRef,
-  };
+  return { closeSheet, expandSheet, isVisible, sheetRef };
 }

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

@@ -0,0 +1,21 @@
+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

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

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

@@ -5,16 +5,17 @@ import {
   TextStyle,
   TouchableOpacity,
   TouchableOpacityProps,
-  View,
   ViewStyle,
 } from 'react-native';
 
 import { colors, disabledInputStyle, tw } from '../../../tailwind';
 import { DefaultComponentProps } from '../../../types/component.type';
-import { Text } from '../Text';
+import { Box } from '../Box';
+import { Typography } from '../Typography';
 
 type Props = DefaultComponentProps &
   TouchableOpacityProps & {
+    activityIndicatorColor?: string;
     buttonStyle?: StyleProp<ViewStyle>;
     children?: React.ReactNode;
     isLoading?: boolean;
@@ -24,9 +25,10 @@ type Props = DefaultComponentProps &
 
 const ACTIVE_OPACITY = 0.5;
 
-export function Button(props: Props): JSX.Element {
+export function Button(props: Props) {
   const {
     activeOpacity = ACTIVE_OPACITY,
+    activityIndicatorColor = colors.white,
     buttonStyle,
     children,
     isDisabled = false,
@@ -37,19 +39,33 @@ export function Button(props: Props): JSX.Element {
     ...rest
   } = props;
   const disabled = isDisabled || isLoading;
-  const display = children ?? <Text style={[tw`font-medium text-white`, textStyle]}>{title}</Text>;
+  const display = children ?? (
+    <Typography style={[tw`font-medium text-white`, textStyle]}>{title}</Typography>
+  );
 
   return (
     <TouchableOpacity activeOpacity={activeOpacity} disabled={disabled} style={[style]} {...rest}>
-      <View
+      <Box
         style={[
-          tw`bg-primary-700 items-center justify-center rounded-xl p-4`,
+          tw`bg-primary-700 items-center justify-center rounded-xl p-3`,
           buttonStyle,
           disabledInputStyle(disabled),
         ]}
       >
-        {isLoading ? <ActivityIndicator color={colors.white} /> : display}
-      </View>
+        {isLoading ? <ActivityIndicator color={activityIndicatorColor} /> : display}
+      </Box>
     </TouchableOpacity>
   );
 }
+
+export function OutlinedButton(props: Props) {
+  const { ...rest } = props;
+
+  return (
+    <Button
+      {...rest}
+      buttonStyle={tw`border-primary-700 border-2 bg-white`}
+      textStyle={tw`text-primary-700`}
+    />
+  );
+}

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

@@ -1,2 +1 @@
 export * from './button.component';
-export * from './outlined-button.component';

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';
 
 type Props = DefaultComponentProps & {};
 
 export function Divider(props: Props) {
   const { style } = props;
 
-  return <View style={[tw`h-[1px] w-full bg-gray-200`, style]}></View>;
+  return <Box style={[tw`h-[1px] w-full bg-gray-200`, style]}></Box>;
 }

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

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