nx-react-native-cli 2.6.12 → 2.7.1

package/templates/shared/apps/mobile/run-ios.sh

@@ -0,0 +1,89 @@
+#!/bin/bash
+# Interactive iOS launcher - picks scheme and simulator
+
+if [[ "$OSTYPE" != "darwin"* ]]; then
+  echo "iOS builds only work on macOS"
+  exit 1
+fi
+
+SCRIPT_DIR="$(cd "$(dirname "$0")" && pwd)"
+PROJECT_DIR="$SCRIPT_DIR/ios"
+
+source "$SCRIPT_DIR/picker.sh"
+
+# --- Scheme selection ---
+SCHEMES=$(cd "$PROJECT_DIR" && xcodebuild -list -json 2>/dev/null | python3 -c "
+import sys, json
+data = json.load(sys.stdin)
+for s in data.get('project', {}).get('schemes', []):
+    print(s)
+")
+
+if [ -z "$SCHEMES" ]; then
+  echo "Could not read schemes from Xcode project"
+  exit 1
+fi
+
+SCHEME_ARRAY=()
+while IFS= read -r line; do
+  SCHEME_ARRAY+=("$line")
+done <<< "$SCHEMES"
+
+pick "Select a scheme:" "${SCHEME_ARRAY[@]}" --key "ios-scheme"
+SELECTED_SCHEME="${SCHEME_ARRAY[$PICKED_INDEX]}"
+
+# --- Simulator selection (booted first, then by name, then iOS version desc) ---
+SIMULATORS=$(xcrun simctl list devices available -j 2>/dev/null | python3 -c "
+import sys, json, re
+
+data = json.load(sys.stdin)
+devices_list = []
+
+for runtime, devices in data.get('devices', {}).items():
+    if 'iOS' not in runtime:
+        continue
+    ver_match = re.search(r'(\d+)[\-\.](\d+)', runtime)
+    if not ver_match:
+        continue
+    ver_major, ver_minor = int(ver_match.group(1)), int(ver_match.group(2))
+    ver = f'{ver_major}.{ver_minor}'
+    for d in devices:
+        is_booted = d['state'] == 'Booted'
+        devices_list.append((is_booted, d['name'], ver_major, ver_minor, ver))
+
+# Parse model number from name (e.g. 'iPhone 16 Pro Max' -> 16)
+def sort_key(x):
+    is_booted, name, ver_major, ver_minor, ver = x
+    is_iphone = name.startswith('iPhone')
+    model_match = re.search(r'(\d+)', name)
+    model_num = int(model_match.group(1)) if model_match else 0
+    # booted first, iPhone over iPad, highest model first, Pro Max > Pro > base, newest iOS first
+    return (not is_booted, not is_iphone, -model_num, name.count('Pro') == 0, 'Max' not in name, -ver_major, -ver_minor)
+
+devices_list.sort(key=sort_key)
+
+for is_booted, name, _, _, ver in devices_list:
+    prefix = '[Booted] ' if is_booted else ''
+    print(f'{prefix}{name} ({ver})')
+")
+
+if [ -z "$SIMULATORS" ]; then
+  echo "No iOS simulators found"
+  exit 1
+fi
+
+SIM_ARRAY=()
+while IFS= read -r line; do
+  SIM_ARRAY+=("$line")
+done <<< "$SIMULATORS"
+
+pick "Select a simulator:" "${SIM_ARRAY[@]}" --key "ios-simulator"
+SELECTED_SIM="${SIM_ARRAY[$PICKED_INDEX]}"
+# Strip [Booted] prefix to get "Name (version)"
+SIM_NAME=$(echo "$SELECTED_SIM" | sed 's/^\[Booted\] //')
+
+echo ""
+echo "Running: scheme=$SELECTED_SCHEME simulator=$SIM_NAME"
+echo ""
+
+cd "$SCRIPT_DIR" && npx react-native run-ios --scheme="$SELECTED_SCHEME" --simulator="$SIM_NAME"

package/templates/shared/apps/mobile/scripts/setup-ios-dev-scheme.rb

@@ -157,6 +157,24 @@ def upsert_info_plist_display_name(app_target, ios_dir, project_name)
   updated
 end
 
+def upsert_info_plist_encryption_flag(app_target, ios_dir, project_name)
+  paths = resolve_info_plist_paths(app_target, ios_dir, project_name)
+  updated = []
+
+  paths.each do |path|
+    next unless File.exist?(path)
+
+    plist = Xcodeproj::Plist.read_from_path(path) || {}
+    next if plist['ITSAppUsesNonExemptEncryption'] == false
+
+    plist['ITSAppUsesNonExemptEncryption'] = false
+    Xcodeproj::Plist.write_to_path(plist, path)
+    updated << "Info.plist ITSAppUsesNonExemptEncryption=false at #{path}"
+  end
+
+  updated
+end
+
 def update_scheme_configuration(doc, action_name, build_configuration)
   action = REXML::XPath.first(doc, "//#{action_name}")
   raise "Missing #{action_name} in source scheme." unless action
@@ -301,6 +319,81 @@ def upsert_firebase_environment_script_phase(app_target)
   phase_status
 end
 
+def upsert_podfile_node_require_and_permissions(podfile_path)
+  return :missing unless File.exist?(podfile_path)
+
+  content = File.read(podfile_path)
+  updated = content.dup
+  changes = []
+
+  # Step 1: Replace old inline require with node_require function if needed
+  unless updated.include?('def node_require(script)')
+    old_require_pattern = /# Resolve react_native_pods\.rb with node to allow for hoisting\nrequire Pod::Executable\.execute_command\('node', \['-p',\n\s*'require\.resolve\(\n\s*"react-native\/scripts\/react_native_pods\.rb",\n\s*\{paths: \[process\.argv\[1\]\]\},\n\s*\)', __dir__\]\)\.strip/m
+
+    node_require_block = <<~RUBY.chomp
+      def node_require(script)
+        # Resolve script with node to allow for hoisting
+        require Pod::Executable.execute_command('node', ['-p',
+          "require.resolve(
+            '\#{script}',
+            {paths: [process.argv[1]]},
+          )", __dir__]).strip
+      end
+
+      # Use it to require both react-native's and this package's scripts:
+      node_require('react-native/scripts/react_native_pods.rb')
+      node_require('react-native-permissions/scripts/setup.rb')
+    RUBY
+
+    if updated.match?(old_require_pattern)
+      updated.sub!(old_require_pattern, node_require_block)
+      changes << 'node_require function (replaced inline require)'
+    end
+  end
+
+  # Step 2: Add setup_permissions after prepare_react_native_project! if not present
+  unless updated.include?('setup_permissions')
+    permissions_block = <<~RUBY
+
+      # Uncomment the permissions you need
+      setup_permissions([
+        # 'AppTrackingTransparency',
+        # 'Bluetooth',
+        # 'Calendars',
+        # 'CalendarsWriteOnly',
+        # 'Camera',
+        # 'Contacts',
+        # 'FaceID',
+        # 'LocationAccuracy',
+        # 'LocationAlways',
+        # 'LocationWhenInUse',
+        # 'MediaLibrary',
+        # 'Microphone',
+        # 'Motion',
+        'Notifications',
+        # 'PhotoLibrary',
+        # 'PhotoLibraryAddOnly',
+        # 'Reminders',
+        # 'Siri',
+        # 'SpeechRecognition',
+        # 'StoreKit',
+      ])
+    RUBY
+
+    if updated.include?('prepare_react_native_project!')
+      updated.sub!(/prepare_react_native_project!\s*\n/) do |match|
+        "#{match}#{permissions_block}"
+      end
+      changes << 'setup_permissions block'
+    end
+  end
+
+  return :unchanged if updated == content
+
+  File.write(podfile_path, updated)
+  changes
+end
+
 ios_dir = File.join(Dir.pwd, 'ios')
 project_path = Dir.glob(File.join(ios_dir, '*.xcodeproj')).first
 raise 'Could not find an .xcodeproj under ios/.' unless project_path
@@ -330,6 +423,7 @@ changes.concat(upsert_product_bundle_identifier(app_target, base_bundle_identifi
 base_product_name = extract_base_product_name(app_target)
 changes.concat(upsert_product_name(app_target, base_product_name))
 changes.concat(upsert_info_plist_display_name(app_target, ios_dir, project_name))
+changes.concat(upsert_info_plist_encryption_flag(app_target, ios_dir, project_name))
 firebase_phase_status = upsert_firebase_environment_script_phase(app_target)
 changes << "Firebase plist run script #{firebase_phase_status}" unless firebase_phase_status == 'existing'
 
@@ -359,9 +453,15 @@ formatter.write(scheme_doc.root, output)
 output << "\n"
 File.write(dev_scheme_path, output)
 
-podfile_status = upsert_podfile_project_mapping(File.join(ios_dir, 'Podfile'), project_name)
+podfile_path = File.join(ios_dir, 'Podfile')
+podfile_status = upsert_podfile_project_mapping(podfile_path, project_name)
 changes << 'Podfile project mapping' if podfile_status == :updated
 
+node_require_status = upsert_podfile_node_require_and_permissions(podfile_path)
+if node_require_status.is_a?(Array)
+  node_require_status.each { |change| changes << "Podfile #{change}" }
+end
+
 puts 'Configured iOS build configurations and Dev scheme.'
 if changes.empty?
   puts 'No new build configurations were created (already configured).'

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

@@ -1,57 +1,21 @@
-import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
-import { QueryClient } from '@tanstack/react-query';
-import { AsyncStorage, PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
+import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client';
 import React from 'react';
 import { LogBox } from 'react-native';
 import { GestureHandlerRootView } from 'react-native-gesture-handler';
 import 'react-native-get-random-values';
 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';
 
+import { persistOptions, queryClient } from './query-client';
+
 import { StorageManager } from '@/components';
-import CONFIG from '@/config';
 import ApplicationRoutes from '@/routes';
 import { tw } from '@/tailwind';
 import 'react-native-url-polyfill/auto';
 
 LogBox.ignoreLogs(['VirtualizedLists', 'onAnimatedValueUpdate']);
 
-const CACHE_TIME = 0;
-const STALE_TIME = 0;
-
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      staleTime: STALE_TIME,
-    },
-  },
-});
-
-const storage = createMMKV({
-  encryptionKey: CONFIG.STORAGE_KEY,
-  id: 'react-query-persist',
-});
-
-export const MmkvStorage: AsyncStorage = {
-  getItem: (name) => {
-    const value = storage.getString(name);
-
-    return value ?? null;
-  },
-  removeItem: (name) => {
-    storage.remove(name);
-  },
-  setItem: (name, value) => storage.set(name, value),
-};
-
-const persister = createAsyncStoragePersister({
-  storage: MmkvStorage as AsyncStorage,
-});
-
-const persistOptions = { maxAge: CACHE_TIME, persister };
-
 function Application() {
   useDeviceContext(tw, {
     initialColorScheme: 'light',

package/templates/shared/apps/mobile/src/app/query-client.ts

@@ -0,0 +1,40 @@
+import { createAsyncStoragePersister } from '@tanstack/query-async-storage-persister';
+import { QueryClient } from '@tanstack/react-query';
+import { AsyncStorage } from '@tanstack/react-query-persist-client';
+import { createMMKV } from 'react-native-mmkv';
+
+import CONFIG from '@/config';
+
+const CACHE_TIME = 0;
+const STALE_TIME = 0;
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: STALE_TIME,
+    },
+  },
+});
+
+const storage = createMMKV({
+  encryptionKey: CONFIG.STORAGE_KEY,
+  id: 'react-query-persist',
+});
+
+export const MmkvStorage: AsyncStorage = {
+  getItem: (name) => {
+    const value = storage.getString(name);
+
+    return value ?? null;
+  },
+  removeItem: (name) => {
+    storage.remove(name);
+  },
+  setItem: (name, value) => storage.set(name, value),
+};
+
+const persister = createAsyncStoragePersister({
+  storage: MmkvStorage as AsyncStorage,
+});
+
+export const persistOptions = { maxAge: CACHE_TIME, persister };

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

@@ -67,6 +67,7 @@ export function KeyboardAwareScrollView(props: Props) {
       refreshControl={refreshControl}
       scrollEventThrottle={16}
       ScrollViewComponent={ScrollViewComponent}
+      showsVerticalScrollIndicator={false}
       style={style}
       onScroll={onScroll}
       {...rest}

package/templates/shared/apps/mobile/src/components/atoms/Modal/modal.component.tsx

@@ -1,7 +1,14 @@
 /* eslint-disable no-magic-numbers */
 import { BottomSheetModalProvider } from '@gorhom/bottom-sheet';
 import React, { useCallback, useState } from 'react';
-import { Keyboard, Pressable, Modal as RNBuiltInModal, StyleProp, ViewStyle } from 'react-native';
+import {
+  Keyboard,
+  Pressable,
+  Modal as RNBuiltInModal,
+  StyleProp,
+  View,
+  ViewStyle,
+} from 'react-native';
 import RNModal from 'react-native-modal';
 
 import CONFIG from '@/config';
@@ -35,7 +42,12 @@ function IOSModal(props: ModalProps) {
       onBackButtonPress={onBackButtonPress}
       onBackdropPress={onBackdropPress}
     >
-      <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
+      <>
+        <Pressable style={tw`absolute h-full w-full`} onPress={onBackdropPress}>
+          <View style={tw`h-full w-full bg-black/60`} />
+        </Pressable>
+        <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
+      </>
     </RNModal>
   );
 }
@@ -52,11 +64,12 @@ function AndroidModal(props: ModalProps) {
       visible={isVisible}
       onRequestClose={onBackButtonPress}
     >
-      <Pressable style={tw`flex-1 bg-black/60`} onPress={onBackdropPress}>
-        <Pressable style={tw`flex-1`}>
-          <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
+      <>
+        <Pressable style={tw`absolute h-full w-full`} onPress={onBackdropPress}>
+          <View style={tw`h-full w-full bg-black/60`} />
         </Pressable>
-      </Pressable>
+        <BottomSheetModalProvider>{children}</BottomSheetModalProvider>
+      </>
     </RNBuiltInModal>
   );
 }

package/templates/shared/apps/mobile/src/components/atoms/Typography/typography.component.tsx

@@ -16,7 +16,7 @@ export function Typography(props: Props): JSX.Element {
   return (
     <RNText
       {...shouldTruncateTextProps}
-      style={[tw`text-black-950 font-sans text-base font-normal`, style]}
+      style={[tw`font-sans text-base font-normal text-black`, style]}
       {...extraProps}
     />
   );

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

@@ -81,7 +81,7 @@ export function ScreenContainer(props: Props) {
           <KeyboardAwareScrollView
             containerStyle={defaultContainerStyle}
             refreshControl={refreshControl as ReactElement<RefreshControlProps>}
-            scrollViewRef={scrollViewRef}
+            scrollViewRef={scrollViewRef as React.RefObject<RNScrollView>}
             onScroll={onScroll}
           >
             {children}
@@ -104,7 +104,7 @@ export function ScreenContainer(props: Props) {
         <KeyboardAwareScrollView
           containerStyle={defaultContainerStyle}
           refreshControl={refreshControl as ReactElement<RefreshControlProps>}
-          scrollViewRef={scrollViewRef}
+          scrollViewRef={scrollViewRef as React.RefObject<RNScrollView>}
           onScroll={onScroll}
         >
           {children}

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

@@ -39,7 +39,7 @@ export function ScreenHeader(props: Props) {
         {extraActionComponent ? (
           extraActionComponent
         ) : (
-          <GearIcon height={25} style={tw`text-black-950`} width={25} />
+          <GearIcon height={25} style={tw`text-black`} width={25} />
         )}
       </View>
     </TouchableOpacity>

package/templates/shared/apps/mobile/src/routes/index.tsx

@@ -2,6 +2,7 @@ import { DefaultTheme, NavigationContainer, Theme } from '@react-navigation/nati
 import { createNativeStackNavigator } from '@react-navigation/native-stack';
 import React, { useEffect } from 'react';
 import { StatusBar } from 'react-native';
+import BootSplash from 'react-native-bootsplash';
 
 import CONFIG from '@/config';
 import { Routes } from '@/routes';
@@ -50,7 +51,12 @@ export default function ApplicationRoutes() {
   );
 
   return (
-    <NavigationContainer theme={navigationTheme}>
+    <NavigationContainer
+      theme={navigationTheme}
+      onReady={() => {
+        BootSplash.hide();
+      }}
+    >
       <RootStack.Navigator initialRouteName={initialRouteName} screenOptions={screenOptions}>
         {screens}
       </RootStack.Navigator>

package/templates/shared/clean-generated-outputs.sh

@@ -34,6 +34,10 @@ rm -rf "$app_rn_node_modules_path"
 echo "Deleting $app_rn_ios_pods_path..."
 rm -rf "$app_rn_ios_pods_path"
 
+app_rn_ios_pods_checksum="apps/$app_rn_name/ios/.pods-checksum"
+echo "Deleting $app_rn_ios_pods_checksum..."
+rm -f "$app_rn_ios_pods_checksum"
+
 echo "Deleting $app_rn_ios_build_path..."
 rm -rf "$app_rn_ios_build_path"