react-native-patterns

Modèles React Native / Expo

Modèles pratiques pour construire des applications React Native prêtes pour la 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 mentionnées ci-dessous (NativeWind, Zustand/Jotai, TanStack Query) sont des options courantes et bien établies, illustrées à titre d'exemple — les modèles importent plus que le package spécifique, et tout équivalent convient. Zod est utilisé pour la validation afin de rester cohérent avec les règles typescript/ existantes de l'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 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 quand :

• Vous construisez ou éditez 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ù va l'état (cache serveur vs store client vs paramètres de route vs formulaire)
• Vous connectez 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-comme-é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 d'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 : séparer les préoccupations

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 formulaire (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 vraiment 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-useEffect. Validez à la frontière et inférez les types du schéma. Gérez les états de chargement, d'erreur et de vide 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 faire un map d'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 une et restez cohérent. Ne construisez jamais d'objets de style en ligne dans le 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 SDK Expo et les abonnements à l'intérieur de hooks use*, pas dans le 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 l'état, pas seulement les coordonnées — pour que l'UI puisse distinguer "encore en chargement"
  // de "permission 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 les résultats obsolètes après démontage
  }, [])

  return state
}

Stockage sécurisé pour les jetons

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

await SecureStore.setItemAsync('auth_token', token)   // Keychain / 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 conseils 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-modèles

// 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>
// JUSTE : 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) }, [])
// JUSTE : 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)
// JUSTE : expo-secure-store

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

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

// FAUX : secret réel livré dans le bundle
const STRIPE_SECRET = 'sk_live_...'
// JUSTE : garder les appels privilégiés côté serveur ; livrer uniquement les clés publiques protégées par des règles backend

Meilleures 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 de vide — jamais juste un spinner sans alternative.
• Virtualisez les listes ; mémoïsez renderItem ; fournissez un keyExtractor stable.
• Utilisez react-native-reanimated pour les animations (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é, la police dynamique et les rôles/étiquettes d'accessibilité dès le début.
• Confirmez la compatibilité avec la Nouvelle Architecture pour chaque dépendance native avant la publication.

Compétences 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 contrôle de sécurité générale qui complète les conseils sur le bundle RN et les secrets ci-dessus.