Cursor rule

1---
2description: React Native mobile development patterns for POS System kitchen and server applications
3globs: **/*.tsx,**/*.ts,**/*.jsx,**/*.js,**/mobile/**,**/react-native/**
4---
5 
6# 📱 React Native Mobile Development Patterns
7 
8## 🎯 Project Overview - Mobile POS Applications
9 
10### GitHub Milestones Integration
11Based on [GitHub Milestones](https://github.com/madebyaris/poinf-of-sales/milestones), we're developing:
12 
131. **Kitchen Staff Mobile App (iOS & Android)** - Tablet and TV display optimization
142. **Server Group Mobile App (iOS & Android)** - Smartphone and tablet flexibility
15 
16## 🏗️ Cross-Platform Architecture
17 
18### Project Structure for React Native Apps
19```
20mobile/
21├── kitchen-app/                 # Kitchen Staff Mobile App
22│   ├── src/
23│   │   ├── components/
24│   │   │   ├── kitchen/         # Kitchen-specific components
25│   │   │   ├── ui/              # Shared UI components
26│   │   │   └── common/          # Cross-app components
27│   │   ├── screens/
28│   │   │   ├── KitchenDisplay/  # Main kitchen interface
29│   │   │   ├── OrderDetails/    # Individual order management
30│   │   │   └── Settings/        # App configuration
31│   │   ├── services/
32│   │   │   ├── api/             # API integration
33│   │   │   ├── sync/            # Real-time synchronization
34│   │   │   └── offline/         # Offline mode handling
35│   │   └── utils/
36│   ├── android/                 # Android-specific code
37│   ├── ios/                     # iOS-specific code
38│   └── package.json
39├── server-app/                  # Server Group Mobile App
40│   ├── src/
41│   │   ├── components/
42│   │   │   ├── pos/             # POS interface components
43│   │   │   ├── payment/         # Mobile payment processing
44│   │   │   └── tables/          # Table management
45│   │   ├── screens/
46│   │   │   ├── OrderEntry/      # Mobile order creation
47│   │   │   ├── TableView/       # Table management interface
48│   │   │   └── PaymentFlow/     # Mobile payment processing
49│   │   └── services/
50│   └── package.json
51└── shared/                      # Shared code between apps
52    ├── components/              # Reusable UI components
53    ├── types/                   # TypeScript definitions
54    ├── api/                     # API client
55    └── utils/                   # Utility functions
56```
57 
58## 🍳 Kitchen Staff Mobile App Patterns
59 
60### Tablet & TV Display Optimization
61```typescript
62// Kitchen app main component with device optimization
63import React, { useEffect, useState } from 'react'
64import { Dimensions, Platform } from 'react-native'
65import DeviceInfo from 'react-native-device-info'
66import Orientation from 'react-native-orientation-locker'
67 
68interface DeviceConfig {
69  type: 'smartphone' | 'tablet' | 'tv'
70  screenSize: 'small' | 'medium' | 'large' | 'extra-large'
71  touchTargetSize: number
72  fontSize: number
73  spacing: number
74}
75 
76export const KitchenApp: React.FC = () => {
77  const [deviceConfig, setDeviceConfig] = useState<DeviceConfig>()
78  const [orders, setOrders] = useState<KitchenOrder[]>([])
79 
80  useEffect(() => {
81    initializeDeviceOptimization()
82    setupRealTimeSync()
83    enableOfflineMode()
84  }, [])
85 
86  // ✅ CORRECT: Device-specific optimization
87  const initializeDeviceOptimization = async () => {
88    const { width, height } = Dimensions.get('window')
89    const isTablet = await DeviceInfo.isTablet()
90    const deviceType = await DeviceInfo.getDeviceType()
91 
92    // Determine device configuration
93    let config: DeviceConfig
94 
95    if (deviceType === 'tv' || width > 1200) {
96      // Large screen TV display
97      config = {
98        type: 'tv',
99        screenSize: 'extra-large',
100        touchTargetSize: 60, // Extra large for wall-mounted displays
101        fontSize: 24,
102        spacing: 32
103      }
104      
105      // TV-specific optimizations
106      Orientation.lockToLandscape()
107      await setupTVDisplayMode()
108      
109    } else if (isTablet || width > 768) {
110      // Tablet optimization
111      config = {
112        type: 'tablet',
113        screenSize: 'large',
114        touchTargetSize: 50, // Standard tablet touch targets
115        fontSize: 18,
116        spacing: 24
117      }
118      
119      // Tablet-specific optimizations
120      Orientation.lockToLandscape()
121      await setupTabletMode()
122      
123    } else {
124      // Smartphone fallback (not primary use case for kitchen)
125      config = {
126        type: 'smartphone',
127        screenSize: 'medium',
128        touchTargetSize: 44,
129        fontSize: 16,
130        spacing: 16
131      }
132    }
133 
134    setDeviceConfig(config)
135  }
136 
137  // TV display mode configuration
138  const setupTVDisplayMode = async () => {
139    // Enable full-screen mode
140    if (Platform.OS === 'android') {
141      // Hide navigation bar for TV displays
142      await DeviceInfo.getSystemName() // Android TV detection
143    }
144    
145    // High contrast mode for distance viewing
146    const tvSettings = {
147      contrast: 'high',
148      colorScheme: 'high-visibility',
149      animations: 'reduced', // Minimize distractions
150      autoRefresh: 3000 // 3-second refresh for TV displays
151    }
152    
153    await applyDisplaySettings(tvSettings)
154  }
155 
156  // Tablet mode configuration
157  const setupTabletMode = async () => {
158    // Enable gesture navigation
159    const tabletSettings = {
160      swipeGestures: true,
161      hapticFeedback: true,
162      multiTouch: false, // Prevent accidental gestures
163      autoRefresh: 5000 // 5-second refresh for tablets
164    }
165    
166    await applyDisplaySettings(tabletSettings)
167  }
168 
169  return (
170    <KitchenDisplayLayout 
171      deviceConfig={deviceConfig}
172      orders={orders}
173      onOrderUpdate={handleOrderUpdate}
174    />
175  )
176}
177```
178 
179### Real-Time Order Synchronization
180```typescript
181// Real-time sync service for kitchen app
182import { io, Socket } from 'socket.io-client'
183import AsyncStorage from '@react-native-async-storage/async-storage'
184import NetInfo from '@react-native-netinfo/netinfo'
185 
186class KitchenSyncService {
187  private socket: Socket | null = null
188  private offlineQueue: OfflineOperation[] = []
189  private isOnline: boolean = true
190 
191  async initialize(): Promise<void> {
192    // Monitor network connectivity
193    NetInfo.addEventListener(state => {
194      this.isOnline = state.isConnected ?? false
195      
196      if (this.isOnline && this.offlineQueue.length > 0) {
197        this.processOfflineQueue()
198      }
199    })
200 
201    // Initialize WebSocket connection
202    await this.connectWebSocket()
203  }
204 
205  // ✅ CORRECT: WebSocket connection with reconnection logic
206  private async connectWebSocket(): Promise<void> {
207    const token = await AsyncStorage.getItem('auth_token')
208    
209    this.socket = io('ws://localhost:8080', {
210      auth: { token },
211      transports: ['websocket'],
212      reconnection: true,
213      reconnectionAttempts: 5,
214      reconnectionDelay: 1000,
215    })
216 
217    // Kitchen-specific event listeners
218    this.socket.on('order-created', this.handleNewOrder)
219    this.socket.on('order-updated', this.handleOrderUpdate)
220    this.socket.on('item-status-changed', this.handleItemStatusChange)
221    
222    // Connection management
223    this.socket.on('connect', () => {
224      console.log('✅ Kitchen app connected to server')
225      this.processOfflineQueue()
226    })
227    
228    this.socket.on('disconnect', () => {
229      console.log('❌ Kitchen app disconnected from server')
230    })
231  }
232 
233  // Handle new orders with sound notifications
234  private handleNewOrder = (order: KitchenOrder) => {
235    // Play new order sound (800Hz beep)
236    this.soundService.playNewOrderSound()
237    
238    // Add to kitchen display
239    this.orderManager.addOrder(order)
240    
241    // Show notification
242    this.notificationService.showNewOrderNotification(order)
243  }
244 
245  // Update item status with optimistic updates
246  async updateItemStatus(orderId: string, itemId: string, status: ItemStatus): Promise<void> {
247    // Optimistic update for immediate UI feedback
248    this.orderManager.updateItemStatusOptimistic(orderId, itemId, status)
249    
250    if (this.isOnline) {
251      try {
252        await this.apiClient.updateItemStatus(orderId, itemId, status)
253        
254        // Play status change sound
255        if (status === 'ready') {
256          this.soundService.playItemReadySound() // 1200Hz
257        } else if (status === 'served') {
258          this.soundService.playItemServedSound() // 1400Hz
259        }
260        
261      } catch (error) {
262        // Revert optimistic update on error
263        this.orderManager.revertItemStatusUpdate(orderId, itemId)
264        
265        // Queue for offline processing
266        this.queueOfflineOperation({
267          type: 'update-item-status',
268          orderId,
269          itemId,
270          status,
271          timestamp: Date.now()
272        })
273      }
274    } else {
275      // Queue for offline processing
276      this.queueOfflineOperation({
277        type: 'update-item-status',
278        orderId,
279        itemId,
280        status,
281        timestamp: Date.now()
282      })
283    }
284  }
285 
286  // Offline operation queuing
287  private queueOfflineOperation(operation: OfflineOperation): void {
288    this.offlineQueue.push(operation)
289    AsyncStorage.setItem('offline_queue', JSON.stringify(this.offlineQueue))
290  }
291 
292  // Process queued operations when back online
293  private async processOfflineQueue(): Promise<void> {
294    if (this.offlineQueue.length === 0) return
295 
296    console.log(`📤 Processing ${this.offlineQueue.length} offline operations`)
297 
298    for (const operation of this.offlineQueue) {
299      try {
300        await this.executeOfflineOperation(operation)
301      } catch (error) {
302        console.error('Failed to process offline operation:', error)
303      }
304    }
305 
306    // Clear processed queue
307    this.offlineQueue = []
308    await AsyncStorage.removeItem('offline_queue')
309  }
310}
311```
312 
313## 👨‍💼 Server Group Mobile App Patterns
314 
315### Adaptive UI for Smartphones & Tablets
316```typescript
317// Server app with adaptive UI based on device size
318import React, { useEffect, useState } from 'react'
319import { useDeviceOrientation } from '@react-native-community/hooks'
320 
321export const ServerApp: React.FC = () => {
322  const [layoutMode, setLayoutMode] = useState<'smartphone' | 'tablet'>()
323  const orientation = useDeviceOrientation()
324 
325  useEffect(() => {
326    determineLayoutMode()
327  }, [orientation])
328 
329  // ✅ CORRECT: Adaptive layout based on device capabilities
330  const determineLayoutMode = async () => {
331    const { width, height } = Dimensions.get('window')
332    const isTablet = await DeviceInfo.isTablet()
333    
334    // Determine layout mode
335    if (isTablet || width > 768) {
336      setLayoutMode('tablet')
337      await setupTabletLayout()
338    } else {
339      setLayoutMode('smartphone')
340      await setupSmartphoneLayout()
341    }
342  }
343 
344  // Tablet layout: Multi-column with side navigation
345  const setupTabletLayout = async () => {
346    const tabletConfig = {
347      layout: 'multi-column',
348      navigation: 'side',
349      touchTargets: 50,
350      splitView: true, // Menu + cart simultaneously
351      gestures: {
352        swipe: true,
353        pinch: false,
354        longPress: true
355      }
356    }
357    
358    await applyLayoutConfig(tabletConfig)
359  }
360 
361  // Smartphone layout: Single column with bottom navigation
362  const setupSmartphoneLayout = async () => {
363    const smartphoneConfig = {
364      layout: 'single-column',
365      navigation: 'bottom',
366      touchTargets: 44,
367      reachability: true, // One-handed operation
368      gestures: {
369        swipe: true,
370        pullToRefresh: true,
371        quickActions: ['add-item', 'view-cart', 'checkout']
372      }
373    }
374    
375    await applyLayoutConfig(smartphoneConfig)
376  }
377 
378  return (
379    <ServerLayout 
380      mode={layoutMode}
381      orientation={orientation}
382    />
383  )
384}
385```
386 
387### Mobile Payment Integration
388```typescript
389// Mobile payment processing with card reader integration
390import { StripeTerminal } from '@stripe/stripe-terminal-react-native'
391import { NfcManager, NfcTech } from 'react-native-nfc-manager'
392 
393class MobilePaymentProcessor {
394  private stripeTerminal: StripeTerminal
395  private cardReaderConnected: boolean = false
396 
397  async initialize(): Promise<void> {
398    // Initialize Stripe Terminal for card readers
399    await this.stripeTerminal.initialize({
400      fetchConnectionToken: this.fetchConnectionToken
401    })
402 
403    // Initialize NFC for contactless payments
404    await NfcManager.start()
405    
406    // Discover and connect to card readers
407    await this.discoverCardReaders()
408  }
409 
410  // ✅ CORRECT: Card reader integration
411  async processCardPayment(amount: number): Promise<PaymentResult> {
412    if (!this.cardReaderConnected) {
413      throw new Error('Card reader not connected')
414    }
415 
416    try {
417      // Create payment intent
418      const paymentIntent = await this.createPaymentIntent(amount)
419      
420      // Collect payment method
421      const result = await this.stripeTerminal.collectPaymentMethod(paymentIntent)
422      
423      // Process payment
424      const confirmation = await this.stripeTerminal.processPayment(result.paymentIntent)
425      
426      return {
427        success: true,
428        transactionId: confirmation.paymentIntent.id,
429        amount,
430        method: 'card',
431        timestamp: new Date().toISOString()
432      }
433      
434    } catch (error) {
435      return {
436        success: false,
437        error: error.message,
438        amount,
439        method: 'card'
440      }
441    }
442  }
443 
444  // NFC/Contactless payment processing
445  async processContactlessPayment(amount: number): Promise<PaymentResult> {
446    try {
447      // Request NFC technology
448      await NfcManager.requestTechnology(NfcTech.Ndef)
449      
450      // Read NFC tag/card
451      const tag = await NfcManager.getTag()
452      
453      // Process contactless payment
454      const result = await this.processNfcPayment(tag, amount)
455      
456      return result
457      
458    } catch (error) {
459      return {
460        success: false,
461        error: 'Contactless payment failed',
462        amount,
463        method: 'contactless'
464      }
465    } finally {
466      NfcManager.cancelTechnologyRequest()
467    }
468  }
469 
470  // Mobile wallet integration (Apple Pay, Google Pay)
471  async processMobileWallet(amount: number): Promise<PaymentResult> {
472    const { ApplePay, GooglePay } = await import('react-native-payments')
473    
474    const paymentRequest = {
475      id: 'pos-payment',
476      displayItems: [{
477        label: 'Order Total',
478        amount: { currency: 'USD', value: amount.toString() }
479      }],
480      total: {
481        label: 'Total',
482        amount: { currency: 'USD', value: amount.toString() }
483      },
484      methodData: [{
485        supportedMethods: ['apple-pay', 'google-pay'],
486        data: {
487          merchantIdentifier: 'merchant.pos.system',
488          supportedNetworks: ['visa', 'mastercard', 'amex']
489        }
490      }]
491    }
492 
493    try {
494      const paymentResponse = Platform.OS === 'ios' 
495        ? await ApplePay.show(paymentRequest)
496        : await GooglePay.show(paymentRequest)
497      
498      return {
499        success: true,
500        transactionId: paymentResponse.transactionIdentifier,
501        amount,
502        method: 'mobile_wallet',
503        timestamp: new Date().toISOString()
504      }
505      
506    } catch (error) {
507      return {
508        success: false,
509        error: 'Mobile wallet payment cancelled',
510        amount,
511        method: 'mobile_wallet'
512      }
513    }
514  }
515}
516```
517 
518## 🔄 Cross-Platform Synchronization
519 
520### Shared State Management
521```typescript
522// Shared state management between web and mobile
523import { create } from 'zustand'
524import { persist } from 'zustand/middleware'
525import AsyncStorage from '@react-native-async-storage/async-storage'
526 
527interface PosState {
528  orders: Order[]
529  currentUser: User | null
530  isOnline: boolean
531  lastSync: number
532  
533  // Actions
534  addOrder: (order: Order) => void
535  updateOrder: (orderId: string, updates: Partial<Order>) => void
536  syncWithServer: () => Promise<void>
537  setOnlineStatus: (status: boolean) => void
538}
539 
540// ✅ CORRECT: Zustand store with persistence
541export const usePosStore = create<PosState>()(
542  persist(
543    (set, get) => ({
544      orders: [],
545      currentUser: null,
546      isOnline: true,
547      lastSync: 0,
548 
549      addOrder: (order) => 
550        set((state) => ({ 
551          orders: [...state.orders, order] 
552        })),
553 
554      updateOrder: (orderId, updates) =>
555        set((state) => ({
556          orders: state.orders.map(order =>
557            order.id === orderId ? { ...order, ...updates } : order
558          )
559        })),
560 
561      syncWithServer: async () => {
562        const { orders, lastSync } = get()
563        
564        try {
565          // Sync orders modified since last sync
566          const modifiedOrders = orders.filter(order => 
567            order.updated_at > lastSync
568          )
569          
570          if (modifiedOrders.length > 0) {
571            await apiClient.syncOrders(modifiedOrders)
572          }
573          
574          // Fetch server updates
575          const serverUpdates = await apiClient.getOrderUpdates(lastSync)
576          
577          set({
578            orders: mergeOrderUpdates(orders, serverUpdates),
579            lastSync: Date.now()
580          })
581          
582        } catch (error) {
583          console.error('Sync failed:', error)
584        }
585      },
586 
587      setOnlineStatus: (status) => 
588        set({ isOnline: status })
589    }),
590    {
591      name: 'pos-storage',
592      storage: {
593        getItem: (name) => AsyncStorage.getItem(name),
594        setItem: (name, value) => AsyncStorage.setItem(name, value),
595        removeItem: (name) => AsyncStorage.removeItem(name)
596      }
597    }
598  )
599)
600```
601 
602## 🎨 UI Component Patterns
603 
604### Touch-Optimized Components
605```typescript
606// Touch-optimized button component for mobile
607import React from 'react'
608import { TouchableOpacity, Text, StyleSheet, ViewStyle, TextStyle } from 'react-native'
609import { useHapticFeedback } from 'react-native-haptic-feedback'
610 
611interface TouchButtonProps {
612  title: string
613  onPress: () => void
614  variant?: 'primary' | 'secondary' | 'danger'
615  size?: 'small' | 'medium' | 'large'
616  disabled?: boolean
617  hapticFeedback?: boolean
618}
619 
620// ✅ CORRECT: Touch-optimized component with haptic feedback
621export const TouchButton: React.FC<TouchButtonProps> = ({
622  title,
623  onPress,
624  variant = 'primary',
625  size = 'medium',
626  disabled = false,
627  hapticFeedback = true
628}) => {
629  const triggerHaptic = useHapticFeedback()
630 
631  const handlePress = () => {
632    if (hapticFeedback) {
633      triggerHaptic('impactLight')
634    }
635    onPress()
636  }
637 
638  const buttonStyle: ViewStyle = {
639    ...styles.base,
640    ...styles[variant],
641    ...styles[size],
642    opacity: disabled ? 0.6 : 1
643  }
644 
645  return (
646    <TouchableOpacity
647      style={buttonStyle}
648      onPress={handlePress}
649      disabled={disabled}
650      activeOpacity={0.7}
651      hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }} // Larger touch area
652    >
653      <Text style={[styles.text, styles[`${variant}Text`]]}>{title}</Text>
654    </TouchableOpacity>
655  )
656}
657 
658const styles = StyleSheet.create({
659  base: {
660    borderRadius: 8,
661    alignItems: 'center',
662    justifyContent: 'center',
663    minHeight: 44, // iOS minimum touch target
664  },
665  
666  // Size variants
667  small: {
668    paddingHorizontal: 16,
669    paddingVertical: 8,
670    minHeight: 44,
671  },
672  medium: {
673    paddingHorizontal: 24,
674    paddingVertical: 12,
675    minHeight: 50, // Tablet-optimized
676  },
677  large: {
678    paddingHorizontal: 32,
679    paddingVertical: 16,
680    minHeight: 60, // TV display optimized
681  },
682  
683  // Variant styles
684  primary: {
685    backgroundColor: '#007AFF',
686  },
687  secondary: {
688    backgroundColor: '#F2F2F7',
689    borderWidth: 1,
690    borderColor: '#C7C7CC',
691  },
692  danger: {
693    backgroundColor: '#FF3B30',
694  },
695  
696  // Text styles
697  text: {
698    fontSize: 16,
699    fontWeight: '600',
700  },
701  primaryText: {
702    color: '#FFFFFF',
703  },
704  secondaryText: {
705    color: '#007AFF',
706  },
707  dangerText: {
708    color: '#FFFFFF',
709  },
710})
711```
712 
713## 🚀 Performance Optimization
714 
715### Memory Management for Long-Running Apps
716```typescript
717// Memory optimization for kitchen displays that run 24/7
718class MobilePerformanceManager {
719  private memoryWarningListener: any
720  private backgroundTimer: NodeJS.Timeout | null = null
721 
722  initialize(): void {
723    // Monitor memory warnings
724    this.memoryWarningListener = DeviceEventEmitter.addListener(
725      'memoryWarning',
726      this.handleMemoryWarning
727    )
728 
729    // Setup background optimization
730    AppState.addEventListener('change', this.handleAppStateChange)
731  }
732 
733  // ✅ CORRECT: Memory management for long-running apps
734  private handleMemoryWarning = (): void => {
735    console.log('⚠️ Memory warning received - optimizing...')
736    
737    // Clear non-essential caches
738    ImageCache.clear()
739    
740    // Limit order history in memory
741    OrderManager.limitHistoryItems(25)
742    
743    // Force garbage collection (if available)
744    if (global.gc) {
745      global.gc()
746    }
747    
748    // Reduce image quality temporarily
749    ImageManager.setQuality('low')
750  }
751 
752  private handleAppStateChange = (nextAppState: string): void => {
753    if (nextAppState === 'background') {
754      // Reduce background activity
755      this.enablePowerSaveMode()
756    } else if (nextAppState === 'active') {
757      // Resume normal operation
758      this.disablePowerSaveMode()
759    }
760  }
761 
762  private enablePowerSaveMode(): void {
763    // Reduce polling frequency
764    SyncManager.setPollingInterval(30000) // 30s instead of 5s
765    
766    // Pause animations
767    AnimationManager.pauseNonCriticalAnimations()
768    
769    // Reduce network activity
770    NetworkManager.enableBatchMode()
771  }
772 
773  private disablePowerSaveMode(): void {
774    // Resume normal polling
775    SyncManager.setPollingInterval(5000)
776    
777    // Resume animations
778    AnimationManager.resumeAnimations()
779    
780    // Resume normal network activity
781    NetworkManager.disableBatchMode()
782  }
783 
784  cleanup(): void {
785    if (this.memoryWarningListener) {
786      this.memoryWarningListener.remove()
787    }
788    
789    if (this.backgroundTimer) {
790      clearInterval(this.backgroundTimer)
791    }
792  }
793}
794```
795 
796## 📱 Development & Deployment
797 
798### Build Configuration
799```javascript
800// metro.config.js - Optimized for POS mobile apps
801const { getDefaultConfig } = require('expo/metro-config')
802 
803const config = getDefaultConfig(__dirname)
804 
805// Optimize for POS system requirements
806config.resolver.platforms = ['native', 'ios', 'android', 'web']
807 
808// Enable shared code between kitchen and server apps
809config.resolver.alias = {
810  '@shared': './shared',
811  '@kitchen': './kitchen-app/src',
812  '@server': './server-app/src'
813}
814 
815// Optimize bundle size for tablet deployment
816config.transformer.minifierConfig = {
817  keep_fnames: true, // Keep function names for debugging
818  mangle: {
819    keep_fnames: true
820  }
821}
822 
823module.exports = config
824```
825 
826### Deployment Scripts
827```bash
828#!/bin/bash
829# deploy-mobile-apps.sh - Deploy both kitchen and server apps
830
831echo &quot;🚀 Deploying POS Mobile Applications...&quot;
832 
833# Build kitchen app
834echo &quot;📱 Building Kitchen Staff App...&quot;
835cd kitchen-app
836npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle
837npx react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/main.jsbundle
838 
839# Build server app  
840echo &quot;👨‍💼 Building Server Group App...&quot;
841cd ../server-app
842npx react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle
843npx react-native bundle --platform ios --dev false --entry-file index.js --bundle-output ios/main.jsbundle
844
845echo &quot;✅ Mobile apps built successfully!&quot;
846echo &quot;📋 Next steps:&quot;
847echo &quot;  1. Test on target devices (tablets for kitchen, phones/tablets for servers)&quot;
848echo &quot;  2. Deploy to app stores or internal distribution&quot;
849echo &quot;  3. Configure device management for restaurant deployment&quot;
850```
851 
852This comprehensive React Native pattern guide ensures your mobile POS applications are optimized for restaurant environments, with proper device-specific optimizations, offline capabilities, and seamless integration with the existing web-based POS system.