nx-react-native-cli 2.3.0 → 2.4.0

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

@@ -0,0 +1,159 @@
+apply plugin: "com.android.application"
+apply plugin: "org.jetbrains.kotlin.android"
+apply plugin: "com.facebook.react"
+
+/**
+ * This is the configuration block to customize your React Native Android app.
+ * By default you don't need to apply any configuration, just uncomment the lines you need.
+ */
+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")
+
+    /* Variants */
+    //   The list of variants to that are debuggable. For those we're going to
+    //   skip the bundling of the JS bundle and the assets. By default is just 'debug'.
+    //   If you add flavors like lite, prod, etc. you'll have to list your debuggableVariants.
+    // debuggableVariants = ["liteDebug", "prodDebug"]
+
+    /* Bundling */
+    //   A list containing the node command and its flags. Default is just 'node'.
+    // nodeExecutableAndArgs = ["node"]
+    //
+    //   The command to run when bundling. By default is 'bundle'
+    // bundleCommand = "ram-bundle"
+    //
+    //   The path to the CLI configuration file. Default is empty.
+    // bundleConfig = file(../rn-cli.config.js)
+    //
+    //   The name of the generated asset file containing your JS bundle
+    // bundleAssetName = "MyApplication.android.bundle"
+    //
+    //   The entry file for bundle generation. Default is 'index.android.js' or 'index.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
+    // extraPackagerArgs = []
+
+    /* Hermes Commands */
+    //   The hermes compiler command to run. By default it is '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"]
+
+     /* Autolinking */
+    autolinkLibrariesWithApp()
+}
+
+/**
+ * Set this to true to Run Proguard on Release builds to minify the Java bytecode.
+ */
+def enableProguardInReleaseBuilds = false
+
+/**
+ * The preferred build flavor of JavaScriptCore (JSC)
+ *
+ * For example, to use the international variant, you can use:
+ * `def jscFlavor = 'org.webkit:android-jsc-intl:+'`
+ *
+ * The international variant includes ICU i18n library and necessary data
+ * allowing to use e.g. `Date.toLocaleString` and `String.localeCompare` that
+ * give correct results when using with locales other than en-US. Note that
+ * this variant is about 6MiB larger per architecture than default.
+ */
+def jscFlavor = 'org.webkit:android-jsc:+'
+
+android {
+    ndkVersion rootProject.ext.ndkVersion
+    buildToolsVersion rootProject.ext.buildToolsVersion
+    compileSdk rootProject.ext.compileSdkVersion
+    namespace "com.mobile"
+    flavorDimensions "default"
+
+    defaultConfig {
+        applicationId "com.mobile"
+        minSdkVersion rootProject.ext.minSdkVersion
+        targetSdkVersion rootProject.ext.targetSdkVersion
+        versionCode 1
+        versionName "1.0"
+        
+        testBuildType System.getProperty('testBuildType', 'debug')
+        testInstrumentationRunner 'androidx.test.runner.AndroidJUnitRunner'
+        
+    }
+    signingConfigs {
+        debug {
+            storeFile file('dev.keystore')
+            storePassword 'development'
+            keyAlias 'dev'
+            keyPassword 'development'
+            v1SigningEnabled true
+            v2SigningEnabled true
+        }
+        dev {
+            storeFile file('dev.keystore')
+            storePassword 'development'
+            keyAlias 'dev'
+            keyPassword 'development'
+            v1SigningEnabled true
+            v2SigningEnabled true
+        }
+        production {
+            storeFile file('production.keystore')
+            storePassword System.getenv("STORE_PASSWORD")
+            keyAlias System.getenv("KEY_ALIAS")
+            keyPassword System.getenv("KEY_PASSWORD")
+            v1SigningEnabled true
+            v2SigningEnabled true
+        }
+    }
+
+    productFlavors {
+        dev {
+            minSdkVersion rootProject.ext.minSdkVersion
+            applicationId "com.mobile"
+            applicationIdSuffix ".dev"
+            targetSdkVersion rootProject.ext.targetSdkVersion
+            resValue "string", "build_config_package", "com.mobile.dev"
+            signingConfig signingConfigs.dev
+        }
+        production {
+            minSdkVersion rootProject.ext.minSdkVersion
+            applicationId "com.mobile"
+            targetSdkVersion rootProject.ext.targetSdkVersion
+            resValue "string", "build_config_package", "com.mobile"
+            signingConfig signingConfigs.production
+        }
+    }
+
+    buildTypes {
+        debug {
+        }
+        release {
+            // Caution! In production, you need to generate your own keystore file.
+            // see https://reactnative.dev/docs/signed-apk-android.
+            minifyEnabled enableProguardInReleaseBuilds
+            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
+        }
+    }
+}
+
+dependencies {
+    // The version of react-native is set by the React Native Gradle Plugin
+    implementation("com.facebook.react:react-android")
+
+    if (hermesEnabled.toBoolean()) {
+        implementation("com.facebook.react:hermes-android")
+    } else {
+        implementation jscFlavor
+    }
+}

package/templates/21.2.2/apps/mobile/android/app/src/dev/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+    <string name="app_name">Mobile - Dev</string>
+</resources>

package/templates/21.2.2/apps/mobile/android/app/src/main/java/com/mobile/MainActivity.kt

@@ -0,0 +1,28 @@
+package com.mobile
+
+import com.facebook.react.ReactActivity
+import com.facebook.react.ReactActivityDelegate
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.fabricEnabled
+import com.facebook.react.defaults.DefaultReactActivityDelegate
+import android.os.Bundle;
+
+class MainActivity : ReactActivity() {
+
+  /**
+   * Returns the name of the main component registered from JavaScript. This is used to schedule
+   * rendering of the component.
+   */
+  override fun getMainComponentName(): String = "Mobile"
+
+  //react-native-screens override
+  override fun onCreate(savedInstanceState: Bundle?) {
+    super.onCreate(null);
+  }
+
+  /**
+   * Returns the instance of the [ReactActivityDelegate]. We use [DefaultReactActivityDelegate]
+   * which allows you to enable New Architecture with a single boolean flags [fabricEnabled]
+   */
+  override fun createReactActivityDelegate(): ReactActivityDelegate =
+      DefaultReactActivityDelegate(this, mainComponentName, fabricEnabled)
+}

package/templates/21.2.2/apps/mobile/android/app/src/main/java/com/mobile/MainApplication.kt

@@ -0,0 +1,44 @@
+package com.mobile
+
+import android.app.Application
+import com.facebook.react.PackageList
+import com.facebook.react.ReactApplication
+import com.facebook.react.ReactHost
+import com.facebook.react.ReactNativeHost
+import com.facebook.react.ReactPackage
+import com.facebook.react.defaults.DefaultNewArchitectureEntryPoint.load
+import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
+import com.facebook.react.defaults.DefaultReactNativeHost
+import com.facebook.react.soloader.OpenSourceMergedSoMapping
+import com.facebook.soloader.SoLoader
+
+class MainApplication : Application(), ReactApplication {
+
+  override val reactNativeHost: ReactNativeHost =
+      object : DefaultReactNativeHost(this) {
+        override fun getPackages(): List<ReactPackage> {
+          // Packages that cannot be autolinked yet can be added manually here, for example:
+          // packages.add(new MyReactNativePackage());
+          return PackageList(this).packages
+      }
+
+        override fun getJSMainModuleName(): String = "src/main"
+
+        override fun getUseDeveloperSupport(): Boolean = BuildConfig.DEBUG
+
+        override val isNewArchEnabled: Boolean = BuildConfig.IS_NEW_ARCHITECTURE_ENABLED
+        override val isHermesEnabled: Boolean = BuildConfig.IS_HERMES_ENABLED
+      }
+
+  override val reactHost: ReactHost
+    get() = getDefaultReactHost(applicationContext, reactNativeHost)
+
+  override fun onCreate() {
+    super.onCreate()
+    SoLoader.init(this, OpenSourceMergedSoMapping)
+    if (BuildConfig.IS_NEW_ARCHITECTURE_ENABLED) {
+      // If you opted-in for the New Architecture, we load the native entry point for this app.
+      load()
+    }
+  }
+}

package/templates/21.2.2/apps/mobile/android/app/src/production/res/values/strings.xml

@@ -0,0 +1,3 @@
+<resources>
+<string name="app_name">Mobile</string>
+</resources>

package/templates/21.2.2/apps/mobile/android/settings.gradle

@@ -0,0 +1,6 @@
+pluginManagement { includeBuild("../../../node_modules/@react-native/gradle-plugin") }
+plugins { id("com.facebook.react.settings") }
+extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autolinkLibrariesFromCommand() }
+rootProject.name = 'Mobile'
+include ':app'
+includeBuild('../../../node_modules/@react-native/gradle-plugin')

package/templates/21.2.2/apps/mobile/ios/Mobile/AppDelegate.mm

@@ -0,0 +1,53 @@
+#import "AppDelegate.h"
+
+#import <React/RCTBundleURLProvider.h>
+#import <ReactAppDependencyProvider/RCTAppDependencyProvider.h>
+
+#import <RCTDefaultReactNativeFactoryDelegate.h>
+#import <RCTReactNativeFactory.h>
+
+@interface ReactNativeDelegate : RCTDefaultReactNativeFactoryDelegate
+@end
+
+@implementation ReactNativeDelegate
+
+- (NSURL *)sourceURLForBridge:(RCTBridge *)bridge {
+  return [self bundleURL];
+}
+
+- (NSURL *)bundleURL {
+#if DEBUG
+  return [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"src/main"];
+#else
+  return [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];
+#endif
+}
+
+@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:@"Mobile" 
+                                  inWindow:self.window 
+                           launchOptions:launchOptions];
+  
+  return YES;
+}
+
+@end

package/templates/21.2.2/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/21.2.2/apps/mobile/metro.config.js

@@ -0,0 +1,42 @@
+const path = require('path');
+const { withNxMetro } = require('@nx/react-native');
+const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
+
+const defaultConfig = getDefaultConfig(__dirname);
+const { assetExts, sourceExts } = defaultConfig.resolver;
+
+/**
+ * Metro configuration
+ * https://reactnative.dev/docs/metro
+ *
+ * @type {import('metro-config').MetroConfig}
+ */
+const customConfig = {
+  cacheVersion: 'mobile',
+  transformer: {
+    babelTransformerPath: require.resolve('react-native-svg-transformer'),
+    getTransformOptions: async () => ({
+      transform: {
+        experimentalImportSupport: false,
+        inlineRequires: true,
+      },
+    }),
+  },
+  resolver: {
+    extraNodeModules: {
+      '@': path.resolve(__dirname, 'src'),
+    },
+    assetExts: assetExts.filter((ext) => ext !== 'svg'),
+    sourceExts: [...sourceExts, 'cjs', 'mjs', 'svg'],
+  },
+};
+
+module.exports = withNxMetro(mergeConfig(defaultConfig, customConfig), {
+  // Change this to true to see debugging info.
+  // Useful if you have issues resolving modules
+  debug: false,
+  // all the file extensions used for imports other than 'ts', 'tsx', 'js', 'jsx', 'json'
+  extensions: [],
+  // Specify folders to watch, in addition to Nx defaults (workspace libraries and node_modules)
+  watchFolders: [],
+});

package/templates/21.2.2/apps/mobile/project.json

@@ -0,0 +1,107 @@
+{
+  "name": "mobile",
+  "$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",
+      "options": {
+        "script": "check-env:mobile"
+      }
+    },
+    "start": {
+      "executor": "@nx/react-native:start",
+      "dependsOn": ["check-env", "ensure-symlink", "pod-install"],
+      "options": {
+        "port": 8081,
+        "resetCache": true,
+        "client-logs": true
+      }
+    },
+    "serve": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "nx start mobile"
+      }
+    },
+    "run-ios": {
+      "executor": "@nx/react-native:run-ios",
+      "dependsOn": ["ensure-symlink", "pod-install"],
+      "options": {}
+    },
+    "bundle-ios": {
+      "executor": "@nx/react-native:bundle",
+      "dependsOn": ["ensure-symlink"],
+      "outputs": ["{options.bundleOutput}"],
+      "options": {
+        "entryFile": "src/main.tsx",
+        "platform": "ios",
+        "bundleOutput": "dist/apps/mobile/ios/main.jsbundle"
+      }
+    },
+    "run-android": {
+      "executor": "@nx/react-native:run-android",
+      "dependsOn": ["ensure-symlink"],
+      "options": {
+        "mode": "debug",
+        "tasks": "installDevDebug"
+      }
+    },
+    "build-android": {
+      "executor": "@nx/react-native:build-android",
+      "outputs": [
+        "{projectRoot}/android/app/build/outputs/bundle",
+        "{projectRoot}/android/app/build/outputs/apk"
+      ],
+      "dependsOn": ["ensure-symlink"],
+      "options": {}
+    },
+    "build-ios": {
+      "executor": "@nx/react-native:build-ios",
+      "outputs": ["{projectRoot}/ios/build/Build"],
+      "dependsOn": ["ensure-symlink", "pod-install"],
+      "options": {}
+    },
+    "pod-install": {
+      "executor": "nx:run-script",
+      "options": {
+        "script": "bundle:pod-install"
+      }
+    },
+    "bundle-android": {
+      "executor": "@nx/react-native:bundle",
+      "dependsOn": ["ensure-symlink"],
+      "outputs": ["{options.bundleOutput}"],
+      "options": {
+        "entryFile": "src/main.tsx",
+        "platform": "android",
+        "bundleOutput": "dist/apps/mobile/android/main.jsbundle"
+      }
+    },
+    "sync-deps": {
+      "executor": "@nx/react-native:sync-deps",
+      "options": {}
+    },
+    "ensure-symlink": {
+      "executor": "@nx/react-native:ensure-symlink",
+      "options": {}
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"],
+      "options": {
+        "lintFilePatterns": ["apps/mobile/**/*.{ts,tsx,js,jsx}"]
+      }
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "apps/mobile/jest.config.ts"
+      }
+    }
+  }
+}

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

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

package/templates/21.2.2/apps/mobile/test-setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-native/extend-expect';

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

@@ -0,0 +1,34 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": ["node", "jest"],
+    "strict": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  },
+  "files": ["../../node_modules/@nx/react-native/typings/svg.d.ts"],
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.spec.tsx",
+    "**/testHelpers",
+    "**/__mocks__",
+    "**/__fixtures__",
+    "**/node_modules",
+    "**/Pods",
+    "test-setup.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/test-setup.ts"
+  ],
+  "include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.js", "src/**/*.jsx"]
+}

package/templates/shared/apps/mobile/.env.template

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

package/templates/{apps → shared/apps}/mobile/src/components/atoms/KeyboardAccessory/keyboard-accessory.component.tsx

@@ -2,9 +2,9 @@ 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';
-import { KeyboardHideIcon } from '@/icons';
 
 type Props = DefaultComponentProps & {
   nativeID: string;
@@ -16,7 +16,7 @@ export function KeyboardAccessory(props: Props) {
   return (
     <InputAccessoryView nativeID={nativeID}>
       <View style={tw`flex-row items-center justify-end bg-[#313132] px-2`}>
-        <Button onPress={() => Keyboard.dismiss()} buttonStyle={tw`my-2 rounded-lg bg-[#717172]`}>
+        <Button buttonStyle={tw`my-2 rounded-lg bg-[#717172]`} onPress={() => Keyboard.dismiss()}>
           <KeyboardHideIcon style={tw`text-white`} />
         </Button>
       </View>

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

@@ -11,6 +11,8 @@ import {
   View,
 } from 'react-native';
 
+import { DefaultNameInputProps } from './constants';
+
 import { CrossIcon } from '@/icons';
 import {
   colors,
@@ -21,7 +23,6 @@ import {
   tw,
 } from '@/tailwind';
 import { DefaultComponentProps } from '@/types/component.type';
-import { DefaultNameInputProps } from './constants';
 
 export type BottomSheetTextInputProps = DefaultComponentProps &
   RNTextInputProps & {
@@ -35,16 +36,16 @@ export function BottomSheetTextInput(props: BottomSheetTextInputProps) {
   const {
     isDisabled = false,
     multiline = false,
+    onBlur,
     onChangeText,
+    onClearButtonPress,
+    onFocus,
     placeholder,
+    showClearButton = true,
     style,
     textInputRef,
     textStyle,
     value,
-    showClearButton = true,
-    onClearButtonPress,
-    onFocus,
-    onBlur,
     ...extraProps
   } = props;
   const [isClearButtonVisible, setIsClearButtonVisible] = useState<boolean>(false);
@@ -102,16 +103,16 @@ export function BottomSheetTextInput(props: BottomSheetTextInputProps) {
         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}
-          testID="clear-button"
           style={tw`items-center justify-center`}
+          testID="clear-button"
           onPress={handleOnClearPress}
         >
           <CrossIcon />

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

@@ -1,4 +1,3 @@
-import { DefaultComponentProps } from '@/types/component.type';
 import { useEffect, useState } from 'react';
 import {
   TextInput as RNTextInput,
@@ -6,10 +5,13 @@ import {
   StyleProp,
   TextStyle,
 } from 'react-native';
+
 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>;
@@ -50,6 +52,7 @@ export function TextInputArea(props: TextInputAreaProps) {
       {...DefaultTextAreaInputProps}
       multiline
       numberOfLines={numberOfLines}
+      showClearButton={false}
       textStyle={[
         textStyle,
         {
@@ -59,7 +62,6 @@ export function TextInputArea(props: TextInputAreaProps) {
         },
       ]}
       value={value}
-      showClearButton={false}
       onChangeText={handleOnChangeText}
       {...extraProps}
     />