Skip to content

React Native Expo Best Practice

To create a new Cursor Rule:

  1. Enter the name as react-native-expo
  2. Copy & paste the file content from below

For more information, visit the Project rules.

---
description: React Native Expo Best Practice
globs: **/*.jsx, **/*.tsx
alwaysApply: false
---

# React Native Expo Best Practice

- Use functional components with hooks for better state management and reusability
- Leverage Expo SDK features and APIs to simplify development and reduce native module dependencies
- Implement proper navigation using React Navigation for a consistent user experience
- Utilize Expo's asset system for efficient management of images and fonts
- Implement robust error handling and crash reporting using Expo's tools for better app stability
- Integrate Expo's push notification system for engaging user experiences

## TypeScript coding standards and type safety guidelines

- Use strict null checks to prevent null or undefined errors
- Prefer interfaces over types for better extensibility and reusability
- Implement type guards and assertions for runtime type checking
- Utilize proper type inference to reduce unnecessary type annotations

## React Native Expo Styling best practices

- Use StyleSheet for consistent and performant styling
- Implement responsive design using flexbox and percentage-based dimensions
- Utilize Expo's vector icons for scalable and customizable icons
- Follow React Native's styling best practices for optimal performance

## React Native Expo Security best practices

- Use Expo's SecureStore for storing sensitive data securely
- Implement proper authentication and authorization mechanisms
- Utilize HTTPS for all network requests to prevent man-in-the-middle attacks
- Follow React Native's security guidelines for protecting against common vulnerabilities

## React Native Expo Offline support best practices

- Implement proper offline support using Expo's offline capabilities
- Use AsyncStorage for local data storage and caching
- Implement a robust network status detection and handling system
- Optimize app performance for offline scenarios

## React Native Expo Performance optimization best practices

- Follow React Native's performance best practices for smooth app experiences
- Utilize memoization and useCallback to optimize component rendering
- Implement proper list virtualization using FlatList for large datasets
- Use React.memo and PureComponent for efficient component updates

## React Native Expo Deployment best practices

- Utilize Expo's OTA (Over-The-Air) updates for quick and seamless deployments
- Implement proper version control and release management
- Use Expo's build services for easy app store submissions
- Follow Expo's guidelines for app store optimization and metadata