expo

expo Best Practices

This document outlines the definitive standards for Expo development. Adhere to these guidelines to ensure consistency, performance, and maintainability across our projects.

1. Code Organization and Structure

Maintain a clean, scalable project structure.

• Root Structure:
  • assets/: Static assets (images, fonts).
  • src/: All application logic.
    • src/components/: Reusable UI components.
    • src/screens/: Top-level components representing distinct app views.
    • src/navigation/: Navigation configuration (if not using Expo Router's app/).
    • src/hooks/: Custom React Hooks.
    • src/utils/: Utility functions, constants.
    • src/services/: API clients, data fetching logic.
• Naming Conventions:
  • Files/Folders: kebab-case for directories, PascalCase for components, camelCase for hooks/utils.
  • Components: PascalCase (e.g., Button.tsx, HomeScreen.tsx).
  • Variables/Functions: camelCase (e.g., userName, fetchData).
  • Constants: UPPER_SNAKE_CASE for global constants.

2. Component Best Practices

Prioritize functional components, TypeScript, and clear styling.

• Functional Components with Hooks: Always use functional components. ❌ BAD:

  class MyComponent extends React.Component { /* ... */ }
  

  ✅ GOOD:

  const MyComponent: React.FC = () => { /* ... */ };
  

• TypeScript for Type Safety: All new code must be in TypeScript. ❌ BAD:

  function greet(name) { return `Hello, ${name}`; }
  

  ✅ GOOD:

  const greet = (name: string): string => `Hello, ${name}`;
  

• Styling with StyleSheet: Centralize styles for readability and performance. ❌ BAD:

  <Text style={{ fontSize: 16, color: 'blue' }}>Hello</Text>
  

  ✅ GOOD:

  import { StyleSheet, Text } from 'react-native';
  const MyComponent = () => <Text style={styles.text}>Hello</Text>;
  const styles = StyleSheet.create({ text: { fontSize: 16, color: 'blue' } });