nx-react-native-cli 2.7.0 → 3.0.0

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,69 +1,38 @@
-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 { StorageManager } from '@/components';
-import CONFIG from '@/config';
+import { persistOptions, queryClient } from './query-client';
+
+import { AlertManager, StorageManager, ThemeManager, ToastManager } from '@/components';
 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 };
+LogBox.ignoreLogs([
+  'VirtualizedLists',
+  'onAnimatedValueUpdate',
+  'InteractionManager',
+  'This method is deprecated (as well as all React Native Firebase namespaced API)',
+]);
 
 function Application() {
-  useDeviceContext(tw, {
-    initialColorScheme: 'light',
-  });
-
   return (
     <GestureHandlerRootView style={tw`flex-1`}>
       <SafeAreaProvider>
         <KeyboardProvider navigationBarTranslucent statusBarTranslucent>
           <PersistQueryClientProvider client={queryClient} persistOptions={persistOptions}>
             <StorageManager>
-              <ApplicationRoutes />
+              <>
+                <ThemeManager />
+                <ApplicationRoutes />
+                <AlertManager />
+                <ToastManager />
+              </>
             </StorageManager>
           </PersistQueryClientProvider>
         </KeyboardProvider>

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/AlertManager/alert-manager.component.tsx

@@ -0,0 +1,134 @@
+import React, { useCallback, useImperativeHandle, useRef, useState } from 'react';
+import { Pressable, View } from 'react-native';
+import { SvgProps } from 'react-native-svg';
+
+import { AlertManagerRef, AlertOptions, AlertVariant } from './alert-manager.types';
+import { Alert } from './alert.service';
+
+import { Modal } from '@/components/atoms';
+import { Typography } from '@/components/atoms/Typography';
+import { AlertTriangleIcon, CheckCircleIcon, InfoIcon, XCircleIcon } from '@/icons';
+import { colors, tw } from '@/tailwind';
+
+type QueuedAlert = AlertOptions & {
+  variant: AlertVariant;
+};
+
+type VariantConfig = {
+  color: string;
+  icon: React.FC<SvgProps>;
+};
+
+const ICON_SIZE = 24;
+
+const VARIANT_CONFIG: Record<AlertVariant, VariantConfig> = {
+  error: { color: colors.error, icon: XCircleIcon },
+  info: { color: colors.secondary[500], icon: InfoIcon },
+  success: { color: colors.success, icon: CheckCircleIcon },
+  warning: { color: colors.primary[500], icon: AlertTriangleIcon },
+};
+
+export function AlertManager() {
+  const [queue, setQueue] = useState<QueuedAlert[]>([]);
+  const ref = useRef<AlertManagerRef>(null);
+
+  const currentAlert = queue[0];
+  const isVisible = !!currentAlert;
+
+  const handleDismiss = useCallback(() => {
+    setQueue((prev) => prev.slice(1));
+  }, []);
+
+  const handleActionPress = useCallback(
+    (onPress?: () => void) => {
+      handleDismiss();
+      onPress?.();
+    },
+    [handleDismiss],
+  );
+
+  useImperativeHandle(ref, () => ({
+    show: (variant: AlertVariant, options: AlertOptions) => {
+      setQueue((prev) => [...prev, { ...options, variant }]);
+    },
+  }));
+
+  React.useEffect(() => {
+    Alert.setRef({
+      show: (variant: AlertVariant, options: AlertOptions) => {
+        setQueue((prev) => [...prev, { ...options, variant }]);
+      },
+    });
+  }, []);
+
+  if (!currentAlert) {
+    return null;
+  }
+
+  const config = VARIANT_CONFIG[currentAlert.variant];
+  const IconComponent = config.icon;
+  const showIcon = !currentAlert.hideIcon;
+  const actions = currentAlert.actions?.length
+    ? currentAlert.actions
+    : [{ label: 'Ok', variant: 'default' as const }];
+
+  return (
+    <Modal isVisible={isVisible} onBackButtonPress={handleDismiss} onBackdropPress={handleDismiss}>
+      <View pointerEvents="box-none" style={tw`flex-1 items-center justify-center`}>
+        <View
+          style={tw`dark:border-divider dark:bg-sheet mx-8 w-[85%] rounded-2xl border border-gray-200 bg-white p-6`}
+        >
+          {/* Icon */}
+          {showIcon && (
+            <View
+              style={tw`dark:bg-surface mb-4 h-10 w-10 items-center justify-center rounded-full bg-gray-100`}
+            >
+              <IconComponent color={config.color} height={ICON_SIZE} width={ICON_SIZE} />
+            </View>
+          )}
+
+          {/* Title */}
+          <Typography style={tw`dark:text-foreground text-lg font-semibold text-gray-900`}>
+            {currentAlert.title}
+          </Typography>
+
+          {/* Message */}
+          {currentAlert.message ? (
+            <Typography style={tw`dark:text-subtitle mt-4 text-sm leading-relaxed text-gray-500`}>
+              {currentAlert.message}
+            </Typography>
+          ) : null}
+
+          {/* Action buttons */}
+          <View style={tw`mt-6 gap-3`}>
+            {actions.map((action) =>
+              action.variant === 'cancel' ? (
+                <Pressable
+                  key={action.label}
+                  style={tw`dark:border-divider dark:bg-surface items-center rounded-xl border border-gray-200 bg-gray-50 py-3.5`}
+                  onPress={() => handleActionPress(action.onPress)}
+                >
+                  <Typography
+                    style={tw`dark:text-foreground text-base font-semibold text-gray-700`}
+                  >
+                    {action.label}
+                  </Typography>
+                </Pressable>
+              ) : (
+                <Pressable
+                  key={action.label}
+                  style={tw`bg-primary-500 items-center rounded-xl py-3.5`}
+                  onPress={() => handleActionPress(action.onPress)}
+                >
+                  <Typography style={tw`text-base font-semibold text-white`}>
+                    {action.label}
+                  </Typography>
+                </Pressable>
+              ),
+            )}
+          </View>
+        </View>
+      </View>
+    </Modal>
+  );
+}

package/templates/shared/apps/mobile/src/components/atoms/AlertManager/alert-manager.types.ts

@@ -0,0 +1,18 @@
+export type AlertVariant = 'error' | 'info' | 'success' | 'warning';
+
+export type AlertAction = {
+  label: string;
+  onPress?: () => void;
+  variant?: 'cancel' | 'default';
+};
+
+export type AlertOptions = {
+  actions?: AlertAction[];
+  hideIcon?: boolean;
+  message?: string;
+  title: string;
+};
+
+export type AlertManagerRef = {
+  show: (variant: AlertVariant, options: AlertOptions) => void;
+};

package/templates/shared/apps/mobile/src/components/atoms/AlertManager/alert.service.ts

@@ -0,0 +1,27 @@
+import { AlertManagerRef, AlertOptions } from './alert-manager.types';
+
+class AlertService {
+  private static ref: AlertManagerRef | null = null;
+
+  static error(options: AlertOptions) {
+    AlertService.ref?.show('error', options);
+  }
+
+  static info(options: AlertOptions) {
+    AlertService.ref?.show('info', options);
+  }
+
+  static setRef(ref: AlertManagerRef) {
+    AlertService.ref = ref;
+  }
+
+  static success(options: AlertOptions) {
+    AlertService.ref?.show('success', options);
+  }
+
+  static warning(options: AlertOptions) {
+    AlertService.ref?.show('warning', options);
+  }
+}
+
+export { AlertService as Alert };

package/templates/shared/apps/mobile/src/components/atoms/AlertManager/index.ts

@@ -0,0 +1,3 @@
+export * from './alert-manager.component';
+export * from './alert-manager.types';
+export * from './alert.service';

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

@@ -24,6 +24,7 @@ export type BottomSheetProps = DefaultComponentProps & {
   enableDynamicSizing?: boolean;
   enablePanDownToClose?: boolean;
   handleComponent?: FC<BottomSheetHandleProps> | null;
+  hasScrollView?: boolean;
   onExpand?: () => void;
   sheetRef: RefObject<BottomSheetModal>;
   snapPoints?: string[];
@@ -83,6 +84,7 @@ export function BottomSheet(props: BottomSheetProps) {
     enableDynamicSizing = false,
     enablePanDownToClose = true,
     handleComponent = BottomSheetHandle,
+    hasScrollView = true,
     sheetRef,
     snapPoints = DEFAULT_SNAP_POINTS,
     style,
@@ -104,11 +106,11 @@ export function BottomSheet(props: BottomSheetProps) {
       ref={sheetRef}
       android_keyboardInputMode="adjustResize"
       backdropComponent={renderBackdrop}
-      backgroundStyle={[tw`bg-gray-50`, backgroundStyle]}
+      backgroundStyle={[tw`dark:bg-sheet bg-white`, backgroundStyle]}
       enableDynamicSizing={enableDynamicSizing}
       enablePanDownToClose={enablePanDownToClose}
       handleComponent={handleComponent}
-      handleIndicatorStyle={tw`bg-gray-50`}
+      handleIndicatorStyle={tw`dark:bg-divider bg-gray-300`}
       handleStyle={tw`rounded-tl-xl rounded-tr-xl`}
       keyboardBehavior="interactive"
       snapPoints={points}
@@ -120,12 +122,16 @@ export function BottomSheet(props: BottomSheetProps) {
         style,
       ]}
     >
-      <BottomSheetScrollView
-        contentContainerStyle={contentContainerStyle}
-        keyboardShouldPersistTaps="handled"
-      >
-        {children}
-      </BottomSheetScrollView>
+      {hasScrollView ? (
+        <BottomSheetScrollView
+          contentContainerStyle={contentContainerStyle}
+          keyboardShouldPersistTaps="handled"
+        >
+          {children}
+        </BottomSheetScrollView>
+      ) : (
+        children
+      )}
     </BottomSheetModal>
   );
 }

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

@@ -64,7 +64,7 @@ export function OutlinedButton(props: Props) {
   return (
     <Button
       {...rest}
-      buttonStyle={tw`border-primary-500 border-2 bg-white`}
+      buttonStyle={tw`border-primary-500 border-2 bg-transparent`}
       textStyle={tw`text-primary-500`}
     />
   );

package/templates/shared/apps/mobile/src/components/atoms/DateModalInput/date-modal-input.component.tsx

@@ -0,0 +1,69 @@
+import dayjs from 'dayjs';
+import React, { ReactNode, useState } from 'react';
+import { StyleProp, TouchableOpacity, ViewStyle } from 'react-native';
+
+import { DatePicker } from '@/components/atoms/DatePicker';
+import { Typography } from '@/components/atoms/Typography';
+import { defaultInputContainerStyle, defaultInputTextStyle, tw } from '@/tailwind';
+
+const DEFAULT_FORMAT = 'MMMM D, YYYY';
+
+type Props = {
+  error?: string;
+  format?: string;
+  maximumDate?: Date;
+  minimumDate?: Date;
+  onChange: (date: Date) => void;
+  placeholder?: string;
+  renderRight?: (value: Date) => ReactNode;
+  value: Date | undefined;
+};
+
+export function DateModalInput(props: Props) {
+  const {
+    error,
+    format = DEFAULT_FORMAT,
+    maximumDate,
+    minimumDate,
+    onChange,
+    placeholder = 'Select a date',
+    renderRight,
+    value,
+  } = props;
+  const [showDatePicker, setShowDatePicker] = useState(false);
+
+  const containerStyle: StyleProp<ViewStyle> = [
+    defaultInputContainerStyle,
+    tw`dark:border-divider dark:bg-surface items-center`,
+    error && tw`border-red-500`,
+  ];
+
+  return (
+    <>
+      <TouchableOpacity
+        activeOpacity={0.7}
+        style={containerStyle}
+        onPress={() => setShowDatePicker(true)}
+      >
+        <Typography
+          style={[defaultInputTextStyle, tw`dark:text-foreground`, !value && tw`text-placeholder`]}
+        >
+          {value ? dayjs(value).format(format) : placeholder}
+        </Typography>
+        {value && renderRight?.(value)}
+      </TouchableOpacity>
+      <DatePicker
+        date={value || new Date()}
+        isVisible={showDatePicker}
+        maximumDate={maximumDate}
+        minimumDate={minimumDate}
+        mode="date"
+        onCancel={() => setShowDatePicker(false)}
+        onConfirm={(selectedDate) => {
+          setShowDatePicker(false);
+          onChange(selectedDate);
+        }}
+      />
+    </>
+  );
+}

package/templates/shared/apps/mobile/src/components/atoms/DateModalInput/index.ts

@@ -0,0 +1 @@
+export * from './date-modal-input.component';

package/templates/shared/apps/mobile/src/components/atoms/DatePicker/date-picker.component.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { TouchableHighlight } from 'react-native';
+import DateTimePickerModal, {
+  ReactNativeModalDateTimePickerProps,
+} from 'react-native-modal-datetime-picker';
+
+import { Typography } from '@/components/atoms/Typography';
+import { useLocalStorageStore } from '@/stores';
+import { colors, tw } from '@/tailwind';
+
+type Props = Omit<ReactNativeModalDateTimePickerProps, 'onCancel' | 'onConfirm'> & {
+  onCancel: () => void;
+  onConfirm: (date: Date) => void;
+};
+
+export function DatePicker(props: Props) {
+  const { onCancel, onConfirm, ...rest } = props;
+  const colorScheme = useLocalStorageStore((s) => s.colorScheme);
+  const isDark = colorScheme === 'dark';
+
+  return (
+    <DateTimePickerModal
+      backdropStyleIOS={tw`bg-black/40`}
+      buttonTextColorIOS={colors.primary[500]}
+      customCancelButtonIOS={({ onPress }) => (
+        <TouchableHighlight
+          style={tw`dark:bg-surface mt-2 items-center rounded-2xl bg-white py-4`}
+          underlayColor={isDark ? colors.background : colors.gray[100]}
+          onPress={onPress}
+        >
+          <Typography style={tw`dark:text-subtitle text-base font-semibold text-gray-500`}>
+            Cancel
+          </Typography>
+        </TouchableHighlight>
+      )}
+      isDarkModeEnabled={isDark}
+      modalStyleIOS={tw`rounded-2xl pb-4`}
+      pickerContainerStyleIOS={tw`dark:bg-sheet items-center justify-center bg-white`}
+      onCancel={onCancel}
+      onConfirm={onConfirm}
+      {...rest}
+    />
+  );
+}

package/templates/shared/apps/mobile/src/components/atoms/DatePicker/index.ts

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