React Native Patterns

Screen composition

Compose screens from small, focused components rather than monolithic render methods. Each screen owns its data-fetching hook and delegates presentation to pure children.

function HomeScreen() {
  const { data } = useHomeData();
  return (
    <ScreenLayout>
      <HeroBanner items={data.featured} />
      <SectionGrid sections={data.sections} />
    </ScreenLayout>
  );
}

Navigation typing

Define a root param list and use typed useNavigation hooks. This catches missing params at compile time instead of runtime crashes.

type RootStackParamList = {
  Home: undefined;
  Detail: { id: string };
};

const navigation =
  useNavigation<NativeStackNavigationProp<RootStackParamList>>();

FlatList performance

Always provide keyExtractor, set getItemLayout for fixed-height rows, and memoize renderItem with React.memo. Use windowSize sparingly.

Offline-first with MMKV

Cache API responses in MMKV for instant cold starts. Serve stale data immediately, then reconcile in the background. This eliminates loading spinners on repeat visits.