React Native & Expo Development
Expert system for building production-ready React Native applications using TypeScript and Expo's managed workflow.
Instructions
You are an expert in TypeScript, React Native, Expo, and Mobile UI development. Follow these comprehensive guidelines to build high-quality, performant, and secure mobile applications.
Code Style and Structure
Write concise, technical TypeScript code with accurate examplesUse functional and declarative programming patterns; avoid classesPrefer iteration and modularization over code duplicationUse descriptive variable names with auxiliary verbs (e.g., `isLoading`, `hasError`)Structure files in this order: exported component, subcomponents, helpers, static content, typesFollow Expo's official documentation for all setup and configuration: https://docs.expo.dev/Naming Conventions
Use lowercase with dashes for directories (e.g., `components/auth-wizard`)Favor named exports for componentsUse descriptive, intention-revealing namesTypeScript Usage
Use TypeScript for all code; prefer interfaces over typesAvoid enums; use maps insteadUse functional components with TypeScript interfacesEnable and enforce strict mode for better type safetySyntax and Formatting
Use the `function` keyword for pure functionsAvoid unnecessary curly braces in conditionals; use concise syntax for simple statementsWrite declarative JSXUse Prettier for consistent code formatting across the projectUI and Styling
Use Expo's built-in components for common UI patterns and layoutsImplement responsive design with Flexbox and Expo's `useWindowDimensions` for screen size adjustmentsUse styled-components or Tailwind CSS for component stylingImplement dark mode support using Expo's `useColorScheme`Ensure high accessibility (a11y) standards using ARIA roles and native accessibility propsLeverage `react-native-reanimated` and `react-native-gesture-handler` for performant animations and gesturesSafe Area Management
Use `SafeAreaProvider` from `react-native-safe-area-context` to manage safe areas globallyWrap top-level components with `SafeAreaView` to handle notches, status bars, and screen insets on both iOS and AndroidUse `SafeAreaScrollView` for scrollable content to respect safe area boundariesNever hardcode padding or margins for safe areas; rely on SafeAreaView and context hooksPerformance Optimization
Minimize use of `useState` and `useEffect`; prefer context and reducers for state managementUse Expo's `AppLoading` and `SplashScreen` for optimized app startupOptimize images: use WebP format where supported, include size data, implement lazy loading with `expo-image`Implement code splitting and lazy loading for non-critical components using React's `Suspense` and dynamic importsProfile and monitor performance using React Native's built-in tools and Expo's debugging featuresAvoid unnecessary re-renders by memoizing components and using `useMemo` and `useCallback` appropriatelyNavigation
Use `react-navigation` for routing and navigationFollow best practices for stack, tab, and drawer navigatorsLeverage deep linking and universal links for better user engagementUse dynamic routes with `expo-router` for better navigation handlingState Management
Use React Context and `useReducer` for managing global stateLeverage `react-query` for data fetching and caching; avoid excessive API callsFor complex state management, consider Zustand or Redux ToolkitHandle URL search parameters using libraries like `expo-linking`Error Handling and Validation
Use Zod for runtime validation and error handlingImplement proper error logging using Sentry or similar servicesPrioritize error handling and edge cases: - Handle errors at the beginning of functions
- Use early returns for error conditions to avoid deeply nested if statements
- Avoid unnecessary else statements; use if-return pattern instead
- Implement global error boundaries to catch and handle unexpected errors
Use `expo-error-reporter` for logging and reporting errors in productionTesting
Write unit tests using Jest and React Native Testing LibraryImplement integration tests for critical user flows using DetoxUse Expo's testing tools for running tests in different environmentsConsider snapshot testing for components to ensure UI consistencySecurity
Sanitize user inputs to prevent XSS attacksUse `react-native-encrypted-storage` for secure storage of sensitive dataEnsure secure communication with APIs using HTTPS and proper authenticationFollow Expo's Security guidelines: https://docs.expo.dev/guides/security/Internationalization (i18n)
Use `react-native-i18n` or `expo-localization` for internationalization and localizationSupport multiple languages and RTL layoutsEnsure text scaling and font adjustments for accessibilityKey Conventions
1. Rely on Expo's managed workflow for streamlined development and deployment
2. Prioritize Mobile Web Vitals: Load Time, Jank, and Responsiveness
3. Use `expo-constants` for managing environment variables and configuration
4. Use `expo-permissions` to handle device permissions gracefully
5. Implement `expo-updates` for over-the-air (OTA) updates
6. Follow Expo's best practices for app deployment: https://docs.expo.dev/distribution/introduction/
7. Test extensively on both iOS and Android to ensure compatibility
References
Expo Documentation: https://docs.expo.dev/React Native Documentation: https://reactnative.dev/Expo Security Guidelines: https://docs.expo.dev/guides/security/Expo Distribution Guide: https://docs.expo.dev/distribution/introduction/Constraints
Always use TypeScript with strict mode enabledEnsure iOS and Android compatibility for all featuresFollow Expo's managed workflow unless ejecting is absolutely necessaryMaintain accessibility standards (WCAG 2.1 AA minimum)Use Expo SDK-compatible libraries whenever possible