react-native-patterns

Modèles React Native / Expo

Modèles pratiques pour construire des applications React Native de production avec Expo. Couvre la navigation, l'état, la récupération de données, les listes, le style et les API natives. S'utilise avec l'ensemble de règles rules/react-native/ : les règles disent quoi appliquer, ce skill montre comment.

Les bibliothèques nommées ci-dessous (NativeWind, Zustand/Jotai, TanStack Query) sont des options courantes et bien établies présentées à titre d'illustration — les modèles sont plus importants que le package spécifique, et tout équivalent fonctionne. Zod est utilisé pour la validation afin de rester cohérent avec les règles typescript/ existantes d'ECC.

Ces modèles supposent le workflow Expo managé (Expo Router, EAS, modules expo-*) sur la Nouvelle Architecture (par défaut dans les SDK Expo récents, obligatoire à partir du SDK 55+). Ils ne supposent PAS le DOM du navigateur — React Native n'a pas de <div>, pas de barre d'URL et pas de valeurs par défaut de récupération de données web.

Quand activer

Utilisez ce skill lorsque :

• Vous construisez ou modifiez des écrans, composants ou la navigation React Native / Expo
• Vous mettez en place le routage avec Expo Router (répertoire app/ basé sur les fichiers)
• Vous décidez où l'état appartient (cache serveur vs store client vs paramètres de route vs formulaire)
• Vous câblez la récupération de données avec TanStack Query et validez les réponses avec Zod
• Vous affichez des listes longues ou lourdes
• Vous choisissez ou appliquez une approche de style (NativeWind ou StyleSheet)
• Vous accédez aux API natives de l'appareil (appareil photo, localisation, notifications) ou au stockage sécurisé
• Vous révisez du code RN pour des problèmes spécifiques au mobile

N'utilisez PAS les modèles web/React-DOM ici — URL-en-tant-qu'état, <div> et SWR-pour-navigateur ne s'appliquent pas à React Native.

Concepts de base

Structure du projet (Expo Router)

Routage basé sur les fichiers sous app/. Gardez les fichiers de route légers : ils lisent et valident les paramètres, puis délèguent à un composant d'écran qui vit dans components/ ou features/.

app/
  _layout.tsx          # pile racine
  (tabs)/
    _layout.tsx        # navigateur par onglets
    index.tsx          # Accueil
  user/[id].tsx        # route dynamique
components/
features/
  user/UserProfile.tsx

Navigation : valider les paramètres de route

Les liens profonds et les routes dynamiques fournissent des chaînes non fiables. Validez-les avec Zod avant utilisation.

// app/user/[id].tsx
import { useLocalSearchParams, router } from 'expo-router'
import { z } from 'zod'
import { UserProfile } from '@/features/user/UserProfile'

const Params = z.object({ id: z.string().uuid() })

export default function UserRoute() {
  const parsed = Params.safeParse(useLocalSearchParams())
  if (!parsed.success) {
    router.replace('/not-found')
    return null
  }
  return <UserProfile userId={parsed.data.id} />
}

État : garder les préoccupations séparées

Ne dupliquez pas les données serveur dans un store client. Chaque préoccupation a son propre emplacement.

Préoccupation	Choix courants
État serveur (données distantes)	une bibliothèque de cache serveur (TanStack Query, SWR)
État client/UI	un store léger (Zustand, Jotai) ou Context
État de route/navigation	paramètres Expo Router
État de formulaire	une bibliothèque de formulaires (ex. React Hook Form) + validation de schéma
Secrets / jetons	expo-secure-store
Persistance non secrète	AsyncStorage / MMKV

Préférez le useState local jusqu'à ce que l'état ait réellement besoin d'être partagé.

Récupération de données : une bibliothèque de cache + Zod

Utilisez une bibliothèque de cache serveur (TanStack Query, SWR) au lieu de fetch-dans-un-useEffect. Validez à la frontière et inférez les types du schéma. Gérez les états de chargement, d'erreur et vides explicitement. (L'exemple utilise TanStack Query.)

import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
import { z } from 'zod'

const User = z.object({ id: z.string(), email: z.string().email() })
type User = z.infer<typeof User>

export function useUser(id: string) {
  return useQuery({
    queryKey: ['user', id],
    queryFn: async (): Promise<User> => User.parse(await api.getUser(id)),
  })
}

export function useUpdateEmail(id: string) {
  const qc = useQueryClient()
  return useMutation({
    mutationFn: (email: string) => api.updateEmail(id, email),
    onSuccess: () => qc.invalidateQueries({ queryKey: ['user', id] }),
  })
}

Listes : virtualiser, ne jamais mapper un grand tableau dans un ScrollView

import { FlatList } from 'react-native'

<FlatList
  data={items}
  keyExtractor={(item) => item.id}
  renderItem={renderItem}          // mémoïsé
  initialNumToRender={10}
  windowSize={5}
/>

Utilisez FlashList (Shopify) pour les listes volumineuses ou hétérogènes.

Style : choisir un système

StyleSheet.create() est l'option native du framework ; les bibliothèques de classes utilitaires (ex. NativeWind) sont une alternative courante. Choisissez-en un et restez cohérent. Ne construisez jamais d'objets de style en ligne dans JSX sur les chemins chauds.

// NativeWind
<View className="p-4 rounded-2xl bg-white">
  <Text className="text-base font-semibold">Bonjour</Text>
</View>

// StyleSheet
const styles = StyleSheet.create({ card: { padding: 16, borderRadius: 16, backgroundColor: '#fff' } })
<View style={styles.card}>...</View>

API natives : envelopper dans des hooks, nettoyer les effets

Gardez les appels et abonnements SDK Expo à l'intérieur de hooks use*, pas dans JSX. Nettoyez toujours.

import { useEffect, useState } from 'react'
import * as Location from 'expo-location'

type LocationState =
  | { status: 'loading' }
  | { status: 'denied' }
  | { status: 'granted'; coords: Location.LocationObjectCoords }

export function useCurrentLocation() {
  // Suivre le statut, pas seulement les coordonnées — pour que l'UI puisse distinguer "encore en chargement"
  // de "autorisation refusée" et afficher un message exploitable.
  const [state, setState] = useState<LocationState>({ status: 'loading' })

  useEffect(() => {
    let active = true
    ;(async () => {
      const { status } = await Location.requestForegroundPermissionsAsync()
      if (status !== 'granted') {
        if (active) setState({ status: 'denied' })
        return
      }
      const pos = await Location.getCurrentPositionAsync({})
      if (active) setState({ status: 'granted', coords: pos.coords })
    })()
    return () => { active = false }   // ignorer le résultat obsolète après le démontage
  }, [])

  return state
}

Stockage sécurisé pour les jetons

import * as SecureStore from 'expo-secure-store'

await SecureStore.setItemAsync('auth_token', token)   // Trousseau / Keystore
const token = await SecureStore.getItemAsync('auth_token')

Exemples de code

Un écran complet : route → requête → liste → états

// app/(tabs)/orders.tsx
import { memo, useCallback } from 'react'
import { FlatList, Text, View } from 'react-native'
import { useQuery } from '@tanstack/react-query'
import { z } from 'zod'

const OrderSchema = z.object({ id: z.string(), total: z.number(), status: z.string() })
const OrdersSchema = z.array(OrderSchema)
type Order = z.infer<typeof OrderSchema>

function useOrders() {
  return useQuery({
    queryKey: ['orders'],
    queryFn: async () => OrdersSchema.parse(await api.listOrders()),
  })
}

// Mémoïsé pour que sa référence soit stable entre les rendus (voir les directives sur les listes).
const OrderRow = memo(function OrderRow({ item }: { item: Order }) {
  return (
    <View className="px-4 py-3 border-b border-neutral-200">
      <Text className="font-medium">#{item.id}</Text>
      <Text className="text-neutral-500">{item.status} · {item.total} €</Text>
    </View>
  )
})

export default function OrdersScreen() {
  const { data, isLoading, isError, refetch, isRefetching } = useOrders()
  const renderItem = useCallback(({ item }: { item: Order }) => <OrderRow item={item} />, [])

  if (isLoading) return <Centered><Text>Chargement…</Text></Centered>
  if (isError) return <Centered><Text accessibilityRole="alert">Impossible de charger les commandes.</Text></Centered>
  if (!data?.length) return <Centered><Text>Pas encore de commandes.</Text></Centered>

  return (
    <FlatList
      data={data}
      keyExtractor={(o) => o.id}
      onRefresh={refetch}
      refreshing={isRefetching}
      renderItem={renderItem}
    />
  )
}

Un formulaire : React Hook Form + résolveur Zod

import { useForm, Controller } from 'react-hook-form'
import { zodResolver } from '@hookform/resolvers/zod'
import { z } from 'zod'
import { TextInput, Button, Text } from 'react-native'

const Schema = z.object({ email: z.string().email('Email invalide') })
type FormValues = z.infer<typeof Schema>

export function EmailForm({ onSubmit }: { onSubmit: (v: FormValues) => void }) {
  const { control, handleSubmit, formState: { errors } } = useForm<FormValues>({
    resolver: zodResolver(Schema),
    defaultValues: { email: '' },
  })

  return (
    <>
      <Controller
        control={control}
        name="email"
        render={({ field: { value, onChange, onBlur } }) => (
          <TextInput
            value={value}
            onChangeText={onChange}
            onBlur={onBlur}
            autoCapitalize="none"
            keyboardType="email-address"
            accessibilityLabel="Adresse email"
          />
        )}
      />
      {errors.email && <Text accessibilityRole="alert">{errors.email.message}</Text>}
      <Button title="Enregistrer" onPress={handleSubmit(onSubmit)} />
    </>
  )
}

Anti-patrons

// FAUX : grand tableau mappé dans un ScrollView (pas de virtualisation, saccadé, mémoire élevée)
<ScrollView>{items.map((i) => <Row key={i.id} item={i} />)}</ScrollView>
// CORRECT : FlatList / FlashList

// FAUX : données serveur copiées dans un store client (deux sources de vérité, données obsolètes)
const useStore = create((set) => ({ users: [], setUsers: (u) => set({ users: u }) }))
useEffect(() => { getUsers().then(setUsers) }, [])
// CORRECT : useQuery possède l'état serveur ; dérivez ce dont vous avez besoin

// FAUX : jetons dans AsyncStorage (non chiffré)
await AsyncStorage.setItem('auth_token', token)
// CORRECT : expo-secure-store

// FAUX : faire confiance aux paramètres de lien profond
const { id } = useLocalSearchParams(); fetchUser(id)
// CORRECT : valider avec Zod avant utilisation

// FAUX : objet de style en ligne recréé à chaque rendu sur un chemin chaud
<View style={{ padding: 16, backgroundColor: '#fff' }} />
// CORRECT : StyleSheet.create au niveau du module, ou className NativeWind

// FAUX : secret réel envoyé dans le bundle
const STRIPE_SECRET = 'sk_live_...'
// CORRECT : garder les appels privilégiés côté serveur ; n'expédier que les clés publiques protégées par les règles back-end

Bonnes pratiques

• Gardez les fichiers de route légers ; mettez la logique dans les composants d'écran et les hooks use*.
• Validez chaque entrée externe (réponses API, paramètres de route, charges utiles push) avec Zod.
• Laissez TanStack Query posséder l'état serveur ; gardez les stores clients petits.
• Affichez toujours les états de chargement, d'erreur et vides — jamais seulement un spinner sans solution de repli.
• Virtualisez les listes ; mémoïsez renderItem ; fournissez un keyExtractor stable.
• Utilisez react-native-reanimated pour l'animation (thread UI) ; évitez les travaux lourds sur le thread JS.
• Stockez les jetons dans expo-secure-store ; ne faites jamais confiance au client pour l'autorisation.
• Respectez les zones de sécurité, le Dynamic Type et les rôles/étiquettes d'accessibilité dès le départ.
• Confirmez la compatibilité avec la Nouvelle Architecture pour chaque dépendance native avant la publication.

Skills connexes

• frontend-patterns — Modèles React/Next.js (web) ; utiles pour les concepts React partagés, mais spécifiques au DOM.
• coding-standards — Idiomes TypeScript/JavaScript qui s'appliquent au code RN.
• tdd-workflow, e2e-testing — Processus de test (utilisez Jest + React Native Testing Library, Maestro/Detox pour RN).
• security-review — Liste de vérification de sécurité générale qui complète les directives RN sur le bundle/secret ci-dessus.