React Native 0.87 - Quick Reference

Versions Requises (2026)

Architecture Feature-Based

src/
├── app/              # Expo Router (file-based routing)
│   ├── (auth)/       # Auth group
│   ├── (tabs)/       # Main tabs group
│   └── _layout.tsx   # Root layout
├── components/       # ui/, forms/, shared/
├── features/         # Modules métier (auth, profile, settings...)
│   └── [feature]/
│       ├── components/
│       ├── hooks/
│       ├── store/
│       └── types/
├── hooks/            # Custom hooks globaux
├── services/         # API, storage
├── stores/           # Zustand stores globaux
├── navigation/       # Config navigation (si non-Expo)
├── theme/            # Colors, spacing, typography
└── types/            # Types globaux

New Architecture (activée par défaut RN 0.85)

Activation bare RN 0.85 :

# Android
echo 'newArchEnabled=true' >> android/gradle.properties
# iOS
cd ios && RCT_NEW_ARCH_ENABLED=1 pod install

Expo SDK 56+ active la New Architecture par défaut — aucune config requise.

Gesture Handler 3.0 — Breaking Changes

npm install react-native-gesture-handler@^3.0.0

// ✅ RNGH 3.0 — GestureHandlerRootView obligatoire
import { GestureHandlerRootView } from 'react-native-gesture-handler';

export default function App() {
  return (
    <GestureHandlerRootView style={{ flex: 1 }}>
      {/* ... */}
    </GestureHandlerRootView>
  );
}

// ✅ Nouvelle API Gesture (remplace PanGestureHandler/TapGestureHandler composants)
import { Gesture, GestureDetector } from 'react-native-gesture-handler';

const tap = Gesture.Tap().onEnd(() => console.log('tapped'));

Source : RNGH 3.0 Migration Guide

Navigation — Expo Router vs React Navigation 7

// React Navigation 7 — setup bare (non-Expo)
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator<RootStackParamList>();

export function AppNavigator() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Reanimated 4 + Bridgeless Mode

Reanimated 4 (^4.0.0) utilise Worklets 2 — animations sur le UI thread via JSI, zéro Bridge, 60 fps garanti.

const animatedStyle = useAnimatedStyle(() => {
  'worklet';
  return { transform: [{ translateX: offset.value }] };
});

Bridgeless Mode (RN 0.85, nouveaux projets) : supprime le legacy bridge (JSI only).

# android/gradle.properties
bridgelessEnabled=true

RN 0.86 / 0.87 et Expo SDK 57

Expo SDK 57 embarque RN 0.86 (0.86.3) ; RN bare = 0.87 (0.87.1 latest, 0.88 en RC). Ne pas mélanger : un projet Expo suit la version RN de son SDK.

Breaking changes RN 0.87 : API TypeScript stricte par défaut (imports profonds react-native/Libraries/* interdits, opt-out jusqu'à 0.88) ; InteractionManager retiré (utiliser requestIdleCallback) ; ImageBackground déprécié (View + Image absolu) ; props Modal.animated et StatusBar backgroundColor/translucent retirées ; Node 22.13+, Kotlin 2.0+ ; AGP 9 supporté (android.builtInKotlin=false et android.newDsl=false pour garder l'ancien comportement) ; Swift Package Manager iOS expérimental (opt-in, CocoaPods reste le défaut).

Sources : RN 0.87, Expo SDK 57

Checklist Rapide

• RN 0.87 (bare) ou 0.86 (Expo SDK 57+), Node 22.13+
• New Architecture activée (Fabric + TurboModules)
• Gesture Handler 3.0+ (@^3.0.0, pas 2.x)
• Reanimated 4 (^4.0.0) + Worklets 2
• TanStack Query v5 (gcTime pas cacheTime)
• Zustand v5 (API useShallow, createStore)
• TypeScript strict + Codegen spec pour modules natifs
• Tests >= 80% coverage (Jest + Detox E2E)

Documentation Complète

• architecture.md — Patterns feature-based, Clean Architecture
• coding-standards.md — TypeScript, conventions, hooks patterns
• tooling.md — Expo CLI, EAS, RNGH 3.0, Reanimated 4
• new-architecture.md — JSI, TurboModules, Fabric, Bridgeless
• navigation.md — Expo Router, React Navigation 7
• state-management.md — TanStack Query v5, Zustand v5
• performance.md — Optimisations, profiling, Hermes
• testing.md — Jest, Detox, stratégies TDD
• security.md — Stockage sécurisé, auth, deeplinks
• quality-tools.md — ESLint, TypeScript, audit
• project-context.md — Template de contexte projet