mobile-native-bestpractices

Mobile Native Best Practices

Production-grade React Native/Expo guide focused on real-device performance, native UX, and maintainability.

When to Use

• React Native screen/component files (.tsx, .jsx)
• Expo configuration (app.json, app.config.ts)
• Navigation setup (React Navigation stacks, tabs)
• Native module integration (expo-* packages)
• Hooks, context providers, StyleSheet, push/voice/sensor code

1. Architecture

Folder Structure

src/
  screens/          # Full-page components (1 per route)
  components/       # Reusable UI (stateless when possible)
  hooks/            # Custom hooks (data fetching, behavior, sensors)
  context/          # React Context providers (thin — delegate to hooks)
  lib/
    api.ts          # HTTP client (single entry point)
    config.ts       # App config + AsyncStorage persistence
    domain/         # Pure business logic (zero React imports)
  navigation/       # Type-safe route definitions
  types/            # Shared TypeScript contracts

Principles

• Screens orchestrate: compose hooks + components, never own business logic
• Hooks own data: fetching, caching, state transforms live in hooks
• Domain is pure: lib/domain/ = plain TypeScript, no React
• Context is thin: providers wire hooks, never implement logic

Anti-pattern	Fix
Business logic in screens	Extract to lib/domain/
API calls inside components	Extract to lib/api.ts + hook
Fat context providers	Split by update frequency
Types inlined in components	Centralize in types/

2. Performance

Render Optimization

Re-renders cross the JS-native bridge. Every one matters on real devices.

const ProcessCard = React.memo(({ process }: Props) => { /* ... */ });

const handlePress = useCallback(() => {
  navigation.navigate('Detail', { id: item.id });
}, [item.id]);

const sortedItems = useMemo(
  () => items.sort((a, b) => b.updatedAt - a.updatedAt),
  [items]
);