Top 30 questions d'entretien React Native : guide complet 2026

// React (Web) - utilise des éléments HTML
function WebComponent() {
  return (
    <div className="container">
      <span>Texte web</span>
      <button onClick={handleClick}>Cliquer</button>
    </div>
  )
}

// React Native - utilise des composants natifs
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native'

function NativeComponent() {
  return (
    <View style={styles.container}>
      <Text>Texte natif</Text>
      <TouchableOpacity onPress={handlePress}>
        <Text>Appuyer</Text>
      </TouchableOpacity>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16
  }
})

// Ancienne architecture : communication asynchrone via Bridge
// Le Bridge sérialise les messages en JSON entre JS et Native

// Nouvelle architecture (Fabric + TurboModules)
// JSI permet des appels synchrones directs aux modules natifs

// Exemple d'utilisation de TurboModule
import { TurboModuleRegistry } from 'react-native'

// Accès synchrone au module natif
const DeviceInfo = TurboModuleRegistry.get('DeviceInfo')
const deviceName = DeviceInfo.getDeviceName() // Appel synchrone

// Avec Fabric, le rendu est plus fluide
// Les composants peuvent être créés de manière synchrone
// Réduisant les "jank" lors des animations

const { getDefaultConfig } = require('expo/metro-config')

const config = getDefaultConfig(__dirname)

// Configuration personnalisée
config.resolver.assetExts.push('db') // Ajouter des extensions
config.resolver.sourceExts.push('cjs') // Support CommonJS

// Transformer configuration
config.transformer.babelTransformerPath = require.resolve(
  'react-native-svg-transformer'
)

// Optimisations pour la production
config.transformer.minifierConfig = {
  keep_classnames: true,
  keep_fnames: true,
  mangle: {
    keep_classnames: true,
    keep_fnames: true
  }
}

module.exports = config

// ❌ Styles inline - recréés à chaque rendu
function BadExample() {
  return (
    <View style={{ flex: 1, padding: 16, backgroundColor: '#fff' }}>
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>Titre</Text>
    </View>
  )
}

// ✅ StyleSheet.create - optimisé et validé
const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
    backgroundColor: '#fff'
  },
  title: {
    fontSize: 18,
    fontWeight: 'bold'
  },
  // Composition de styles
  row: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 8
  }
})

function GoodExample() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>Titre</Text>
      {/* Combinaison de styles */}
      <View style={[styles.row, { marginTop: 10 }]}>
        <Text>Contenu</Text>
      </View>
    </View>
  )
}

// StyleSheet.absoluteFillObject pour le positionnement absolu
const overlayStyles = StyleSheet.create({
  overlay: {
    ...StyleSheet.absoluteFillObject,
    backgroundColor: 'rgba(0,0,0,0.5)'
  }
})

// Différences clés avec le web
const styles = StyleSheet.create({
  container: {
    // flexDirection: 'column' par défaut (vs 'row' sur le web)
    // alignItems: 'stretch' par défaut
    flex: 1
  },

  // Flexbox React Native
  row: {
    flexDirection: 'row',    // Horizontal
    justifyContent: 'space-between', // Axe principal
    alignItems: 'center',    // Axe secondaire
    flexWrap: 'wrap',        // Retour à la ligne
    gap: 8                   // Supporté depuis RN 0.71
  },

  // Flex grow/shrink
  flexItem: {
    flex: 1,        // Équivalent à flex: 1 1 0
    flexGrow: 1,    // Grandir pour remplir
    flexShrink: 0,  // Ne pas rétrécir
    flexBasis: 100  // Taille de base
  },

  // Positionnement absolu
  absolute: {
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0
  }
})

// Exemple pratique : carte avec image et contenu
function Card() {
  return (
    <View style={cardStyles.container}>
      <Image source={{ uri: imageUrl }} style={cardStyles.image} />
      <View style={cardStyles.content}>
        <Text style={cardStyles.title}>Titre</Text>
        <Text style={cardStyles.description}>Description</Text>
      </View>
    </View>
  )
}

const cardStyles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    borderRadius: 8,
    overflow: 'hidden'
  },
  image: {
    width: 100,
    height: 100
  },
  content: {
    flex: 1, // Prend l'espace restant
    padding: 12,
    justifyContent: 'center'
  },
  title: {
    fontSize: 16,
    fontWeight: '600'
  },
  description: {
    fontSize: 14,
    color: '#666'
  }
})

// Installation des dépendances
// npm install @react-navigation/native @react-navigation/native-stack
// npm install react-native-screens react-native-safe-area-context

import { NavigationContainer } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'

// Typage TypeScript pour les paramètres de navigation
type RootStackParamList = {
  Home: undefined
  Profile: { userId: string }
  Settings: { section?: string }
}

const Stack = createNativeStackNavigator<RootStackParamList>()
const Tab = createBottomTabNavigator()

// Navigation par onglets
function TabNavigator() {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarIcon: ({ focused, color, size }) => {
          // Icône dynamique selon l'onglet
          const iconName = route.name === 'Home' ? 'home' : 'settings'
          return <Icon name={iconName} size={size} color={color} />
        },
        tabBarActiveTintColor: '#007AFF',
        tabBarInactiveTintColor: 'gray'
      })}
    >
      <Tab.Screen name="Home" component={HomeScreen} />
      <Tab.Screen name="Settings" component={SettingsScreen} />
    </Tab.Navigator>
  )
}

// Navigation en pile
function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator
        initialRouteName="Home"
        screenOptions={{
          headerStyle: { backgroundColor: '#007AFF' },
          headerTintColor: '#fff',
          animation: 'slide_from_right' // Animation native
        }}
      >
        <Stack.Screen
          name="Home"
          component={TabNavigator}
          options={{ headerShown: false }}
        />
        <Stack.Screen
          name="Profile"
          component={ProfileScreen}
          options={({ route }) => ({
            title: `Profil ${route.params.userId}`
          })}
        />
      </Stack.Navigator>
    </NavigationContainer>
  )
}

import { FlatList, RefreshControl } from 'react-native'

function ProductList() {
  const [products, setProducts] = useState([])
  const [refreshing, setRefreshing] = useState(false)
  const [loading, setLoading] = useState(false)

  // Chargement initial
  const fetchProducts = async (page = 1) => {
    const response = await api.getProducts(page)
    return response.data
  }

  // Pull-to-refresh
  const onRefresh = useCallback(async () => {
    setRefreshing(true)
    const data = await fetchProducts(1)
    setProducts(data)
    setRefreshing(false)
  }, [])

  // Pagination infinie
  const loadMore = useCallback(async () => {
    if (loading) return
    setLoading(true)
    const nextPage = Math.ceil(products.length / 20) + 1
    const data = await fetchProducts(nextPage)
    setProducts(prev => [...prev, ...data])
    setLoading(false)
  }, [products.length, loading])

  // Rendu d'un élément
  const renderItem = useCallback(({ item }) => (
    <ProductCard product={item} />
  ), [])

  // Extraction de la clé
  const keyExtractor = useCallback((item) => item.id.toString(), [])

  // Séparateur entre éléments
  const ItemSeparator = useCallback(() => (
    <View style={{ height: 12 }} />
  ), [])

  return (
    <FlatList
      data={products}
      renderItem={renderItem}
      keyExtractor={keyExtractor}
      ItemSeparatorComponent={ItemSeparator}
      // Optimisations de performance
      removeClippedSubviews={true}
      maxToRenderPerBatch={10}
      updateCellsBatchingPeriod={50}
      windowSize={5}
      // Pull-to-refresh
      refreshControl={
        <RefreshControl
          refreshing={refreshing}
          onRefresh={onRefresh}
          tintColor="#007AFF"
        />
      }
      // Pagination infinie
      onEndReached={loadMore}
      onEndReachedThreshold={0.5}
      ListFooterComponent={loading ? <ActivityIndicator /> : null}
      // Liste vide
      ListEmptyComponent={<EmptyState message="Aucun produit" />}
    />
  )
}

import {
  TouchableOpacity,
  TouchableHighlight,
  Pressable,
  StyleSheet
} from 'react-native'

function InteractionExamples() {
  return (
    <View style={styles.container}>
      {/* TouchableOpacity : réduit l'opacité au toucher */}
      <TouchableOpacity
        activeOpacity={0.7}
        onPress={() => console.log('Pressed')}
        style={styles.button}
      >
        <Text>TouchableOpacity</Text>
      </TouchableOpacity>

      {/* TouchableHighlight : ajoute une couleur de fond */}
      <TouchableHighlight
        underlayColor="#ddd"
        onPress={() => console.log('Pressed')}
        style={styles.button}
      >
        <Text>TouchableHighlight</Text>
      </TouchableHighlight>

      {/* Pressable : API moderne avec plus de contrôle */}
      <Pressable
        onPress={() => console.log('Pressed')}
        onLongPress={() => console.log('Long press')}
        delayLongPress={500}
        style={({ pressed }) => [
          styles.button,
          pressed && styles.buttonPressed
        ]}
      >
        {({ pressed }) => (
          <Text style={pressed && styles.textPressed}>
            {pressed ? 'Pressé !' : 'Pressable'}
          </Text>
        )}
      </Pressable>

      {/* Pressable avec hitSlop pour agrandir la zone tactile */}
      <Pressable
        hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
        onPress={() => console.log('Pressed')}
        style={styles.smallButton}
      >
        <Text>Petit bouton</Text>
      </Pressable>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    gap: 16,
    padding: 20
  },
  button: {
    backgroundColor: '#007AFF',
    padding: 16,
    borderRadius: 8,
    alignItems: 'center'
  },
  buttonPressed: {
    backgroundColor: '#0056b3',
    transform: [{ scale: 0.98 }]
  },
  textPressed: {
    color: '#fff'
  },
  smallButton: {
    padding: 8,
    backgroundColor: '#eee'
  }
})

import { Animated, Easing } from 'react-native'
import Reanimated, {
  useSharedValue,
  useAnimatedStyle,
  withSpring,
  withTiming
} from 'react-native-reanimated'

// Animation avec Animated (API native)
function FadeInView({ children }) {
  const fadeAnim = useRef(new Animated.Value(0)).current

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1,
      duration: 500,
      easing: Easing.ease,
      useNativeDriver: true // Performant sur le thread UI
    }).start()
  }, [])

  return (
    <Animated.View style={{ opacity: fadeAnim }}>
      {children}
    </Animated.View>
  )
}

// Animation avec Reanimated (recommandé pour animations complexes)
function BouncyButton() {
  const scale = useSharedValue(1)

  const animatedStyle = useAnimatedStyle(() => ({
    transform: [{ scale: scale.value }]
  }))

  const handlePressIn = () => {
    scale.value = withSpring(0.95, {
      damping: 10,
      stiffness: 400
    })
  }

  const handlePressOut = () => {
    scale.value = withSpring(1, {
      damping: 10,
      stiffness: 400
    })
  }

  return (
    <Pressable onPressIn={handlePressIn} onPressOut={handlePressOut}>
      <Reanimated.View style={[styles.button, animatedStyle]}>
        <Text style={styles.buttonText}>Appuyer</Text>
      </Reanimated.View>
    </Pressable>
  )
}

// Animation de liste avec LayoutAnimation
import { LayoutAnimation, UIManager, Platform } from 'react-native'

// Activer sur Android
if (Platform.OS === 'android') {
  UIManager.setLayoutAnimationEnabledExperimental?.(true)
}

function AnimatedList() {
  const [items, setItems] = useState([])

  const addItem = () => {
    // Configurer l'animation avant le changement d'état
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring)
    setItems(prev => [...prev, { id: Date.now() }])
  }

  const removeItem = (id) => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
    setItems(prev => prev.filter(item => item.id !== id))
  }

  return (
    <View>
      <Button title="Ajouter" onPress={addItem} />
      {items.map(item => (
        <TouchableOpacity key={item.id} onPress={() => removeItem(item.id)}>
          <View style={styles.item}>
            <Text>Item {item.id}</Text>
          </View>
        </TouchableOpacity>
      ))}
    </View>
  )
}

// Solution légère avec Zustand
import { create } from 'zustand'
import { persist, createJSONStorage } from 'zustand/middleware'
import AsyncStorage from '@react-native-async-storage/async-storage'

// Store avec persistance
const useAuthStore = create(
  persist(
    (set, get) => ({
      user: null,
      token: null,
      isAuthenticated: false,

      login: async (email, password) => {
        const response = await api.login(email, password)
        set({
          user: response.user,
          token: response.token,
          isAuthenticated: true
        })
      },

      logout: () => {
        set({ user: null, token: null, isAuthenticated: false })
      },

      updateProfile: (updates) => {
        set(state => ({
          user: { ...state.user, ...updates }
        }))
      }
    }),
    {
      name: 'auth-storage',
      storage: createJSONStorage(() => AsyncStorage)
    }
  )
)

// Utilisation dans un composant
function ProfileScreen() {
  const { user, logout, updateProfile } = useAuthStore()

  if (!user) return <LoginPrompt />

  return (
    <View style={styles.container}>
      <Text style={styles.name}>{user.name}</Text>
      <Text style={styles.email}>{user.email}</Text>

      <TouchableOpacity onPress={logout} style={styles.logoutButton}>
        <Text>Déconnexion</Text>
      </TouchableOpacity>
    </View>
  )
}

// Store pour le panier
const useCartStore = create((set, get) => ({
  items: [],

  addItem: (product) => set(state => {
    const existing = state.items.find(i => i.id === product.id)
    if (existing) {
      return {
        items: state.items.map(i =>
          i.id === product.id
            ? { ...i, quantity: i.quantity + 1 }
            : i
        )
      }
    }
    return { items: [...state.items, { ...product, quantity: 1 }] }
  }),

  removeItem: (id) => set(state => ({
    items: state.items.filter(i => i.id !== id)
  })),

  getTotal: () => {
    return get().items.reduce(
      (sum, item) => sum + item.price * item.quantity,
      0
    )
  },

  clearCart: () => set({ items: [] })
}))

import { QueryClient, QueryClientProvider, useQuery, useMutation } from '@tanstack/react-query'

// Configuration du client
const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 5 * 60 * 1000, // 5 minutes
      cacheTime: 30 * 60 * 1000, // 30 minutes
      retry: 2,
      refetchOnWindowFocus: false // Mobile n'a pas de "window focus"
    }
  }
})

// Provider dans App.tsx
function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <NavigationContainer>
        <AppNavigator />
      </NavigationContainer>
    </QueryClientProvider>
  )
}

// Hook personnalisé pour les produits
function useProducts(categoryId) {
  return useQuery({
    queryKey: ['products', categoryId],
    queryFn: async () => {
      const response = await fetch(`/api/products?category=${categoryId}`)
      if (!response.ok) throw new Error('Erreur réseau')
      return response.json()
    },
    enabled: !!categoryId // Ne pas exécuter si pas de categoryId
  })
}

// Mutation avec invalidation de cache
function useAddToCart() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: async (product) => {
      const response = await fetch('/api/cart', {
        method: 'POST',
        body: JSON.stringify(product)
      })
      return response.json()
    },
    onSuccess: () => {
      // Invalider le cache du panier pour forcer un refetch
      queryClient.invalidateQueries({ queryKey: ['cart'] })
    },
    onError: (error) => {
      Alert.alert('Erreur', error.message)
    }
  })
}

// Utilisation dans un composant
function ProductListScreen({ categoryId }) {
  const { data: products, isLoading, error, refetch } = useProducts(categoryId)
  const addToCart = useAddToCart()

  if (isLoading) return <LoadingSpinner />
  if (error) return <ErrorView error={error} onRetry={refetch} />

  return (
    <FlatList
      data={products}
      renderItem={({ item }) => (
        <ProductCard
          product={item}
          onAddToCart={() => addToCart.mutate(item)}
          isAddingToCart={addToCart.isPending}
        />
      )}
      refreshing={isLoading}
      onRefresh={refetch}
    />
  )
}

// AsyncStorage - simple mais lent pour gros volumes
import AsyncStorage from '@react-native-async-storage/async-storage'

const storage = {
  async get(key) {
    const value = await AsyncStorage.getItem(key)
    return value ? JSON.parse(value) : null
  },

  async set(key, value) {
    await AsyncStorage.setItem(key, JSON.stringify(value))
  },

  async remove(key) {
    await AsyncStorage.removeItem(key)
  },

  async clear() {
    await AsyncStorage.clear()
  }
}

// MMKV - très performant (recommandé)
import { MMKV } from 'react-native-mmkv'

const mmkv = new MMKV()

const fastStorage = {
  get(key) {
    const value = mmkv.getString(key)
    return value ? JSON.parse(value) : null
  },

  set(key, value) {
    mmkv.set(key, JSON.stringify(value))
  },

  remove(key) {
    mmkv.delete(key)
  },

  // Support des types primitifs
  getNumber(key) {
    return mmkv.getNumber(key)
  },

  setNumber(key, value) {
    mmkv.set(key, value)
  },

  getBoolean(key) {
    return mmkv.getBoolean(key)
  }
}

// Hook pour utiliser MMKV avec React
function useMMKVStorage(key, defaultValue) {
  const [value, setValue] = useState(() => {
    const stored = fastStorage.get(key)
    return stored ?? defaultValue
  })

  const setStoredValue = useCallback((newValue) => {
    setValue(newValue)
    fastStorage.set(key, newValue)
  }, [key])

  return [value, setStoredValue]
}

// Utilisation
function SettingsScreen() {
  const [theme, setTheme] = useMMKVStorage('theme', 'light')
  const [notifications, setNotifications] = useMMKVStorage('notifications', true)

  return (
    <View>
      <Switch
        value={theme === 'dark'}
        onValueChange={(v) => setTheme(v ? 'dark' : 'light')}
      />
      <Switch
        value={notifications}
        onValueChange={setNotifications}
      />
    </View>
  )
}

const ProductCard = React.memo(function ProductCard({ product, onPress }) {
  return (
    <TouchableOpacity onPress={() => onPress(product.id)}>
      <View style={styles.card}>
        <Image source={{ uri: product.image }} style={styles.image} />
        <Text style={styles.title}>{product.name}</Text>
        <Text style={styles.price}>{product.price}€</Text>
      </View>
    </TouchableOpacity>
  )
}, (prevProps, nextProps) => {
  // Comparaison personnalisée
  return prevProps.product.id === nextProps.product.id
})

// 2. Mémoriser les callbacks
function ProductList({ products }) {
  // ❌ Nouvelle fonction à chaque rendu
  // onPress={(id) => handlePress(id)}

  // ✅ Fonction stable
  const handlePress = useCallback((id) => {
    navigation.navigate('Product', { id })
  }, [navigation])

  return (
    <FlatList
      data={products}
      renderItem={({ item }) => (
        <ProductCard product={item} onPress={handlePress} />
      )}
    />
  )
}

// 3. Optimiser les images
import FastImage from 'react-native-fast-image'

function OptimizedImage({ uri }) {
  return (
    <FastImage
      source={{
        uri,
        priority: FastImage.priority.normal,
        cache: FastImage.cacheControl.immutable
      }}
      style={styles.image}
      resizeMode={FastImage.resizeMode.cover}
    />
  )
}

// 4. Utiliser InteractionManager pour les tâches lourdes
import { InteractionManager } from 'react-native'

function HeavyScreen() {
  const [data, setData] = useState(null)

  useEffect(() => {
    // Attendre que les animations soient terminées
    const task = InteractionManager.runAfterInteractions(() => {
      const result = performHeavyComputation()
      setData(result)
    })

    return () => task.cancel()
  }, [])

  return data ? <DataView data={data} /> : <LoadingView />
}

// 5. Lazy loading des écrans
const HeavyScreen = React.lazy(() => import('./HeavyScreen'))

function Navigator() {
  return (
    <Stack.Navigator>
      <Stack.Screen
        name="Heavy"
        component={HeavyScreen}
        options={{ lazy: true }}
      />
    </Stack.Navigator>
  )
}

// Configuration dans android/app/build.gradle et ios/Podfile
// Voir : https://fbflipper.com/

// 2. Console.time pour mesurer les opérations
function fetchData() {
  console.time('fetchData')
  const data = await api.getData()
  console.timeEnd('fetchData') // fetchData: 234ms
  return data
}

// 3. Performance monitor (shake device → Show Perf Monitor)
// Affiche FPS JS et UI

// 4. Hermes profiler pour le CPU
// Activer dans metro.config.js
module.exports = {
  transformer: {
    hermesParser: true
  }
}

// 5. Identifier les re-renders avec why-did-you-render
// Installation : npm install @welldone-software/why-did-you-render
import React from 'react'

if (__DEV__) {
  const whyDidYouRender = require('@welldone-software/why-did-you-render')
  whyDidYouRender(React, {
    trackAllPureComponents: true
  })
}

// Marquer un composant à surveiller
ProductCard.whyDidYouRender = true

// 6. Mesurer le temps de montage
function useComponentTiming(componentName) {
  const mountTime = useRef(Date.now())

  useEffect(() => {
    const duration = Date.now() - mountTime.current
    console.log(`${componentName} mounted in ${duration}ms`)

    return () => {
      console.log(`${componentName} unmounted`)
    }
  }, [componentName])
}

// Utilisation
function MyComponent() {
  useComponentTiming('MyComponent')
  // ...
}

import NetInfo from '@react-native-community/netinfo'

// Hook pour surveiller la connectivité
function useNetworkStatus() {
  const [isConnected, setIsConnected] = useState(true)
  const [connectionType, setConnectionType] = useState(null)

  useEffect(() => {
    const unsubscribe = NetInfo.addEventListener(state => {
      setIsConnected(state.isConnected)
      setConnectionType(state.type)
    })

    return () => unsubscribe()
  }, [])

  return { isConnected, connectionType }
}

// Service avec queue offline
class OfflineQueue {
  constructor() {
    this.queue = []
    this.isProcessing = false
  }

  async add(action) {
    this.queue.push({
      id: Date.now(),
      action,
      timestamp: new Date().toISOString()
    })
    await this.persist()
  }

  async persist() {
    await AsyncStorage.setItem('offline_queue', JSON.stringify(this.queue))
  }

  async load() {
    const data = await AsyncStorage.getItem('offline_queue')
    this.queue = data ? JSON.parse(data) : []
  }

  async process() {
    if (this.isProcessing || this.queue.length === 0) return

    this.isProcessing = true
    const { isConnected } = await NetInfo.fetch()

    if (!isConnected) {
      this.isProcessing = false
      return
    }

    while (this.queue.length > 0) {
      const item = this.queue[0]
      try {
        await this.executeAction(item.action)
        this.queue.shift()
        await this.persist()
      } catch (error) {
        console.error('Failed to process action:', error)
        break
      }
    }

    this.isProcessing = false
  }

  async executeAction(action) {
    switch (action.type) {
      case 'CREATE_ORDER':
        return api.createOrder(action.payload)
      case 'UPDATE_PROFILE':
        return api.updateProfile(action.payload)
      default:
        throw new Error(`Unknown action: ${action.type}`)
    }
  }
}

const offlineQueue = new OfflineQueue()

// Composant indicateur de statut réseau
function NetworkBanner() {
  const { isConnected } = useNetworkStatus()

  if (isConnected) return null

  return (
    <View style={styles.banner}>
      <Text style={styles.bannerText}>
        Mode hors ligne - Les modifications seront synchronisées
      </Text>
    </View>
  )
}

import { Platform, Alert, Linking } from 'react-native'
import {
  check,
  request,
  PERMISSIONS,
  RESULTS,
  openSettings
} from 'react-native-permissions'

// Configuration des permissions par plateforme
const PERMISSION_TYPES = {
  camera: Platform.select({
    ios: PERMISSIONS.IOS.CAMERA,
    android: PERMISSIONS.ANDROID.CAMERA
  }),
  photos: Platform.select({
    ios: PERMISSIONS.IOS.PHOTO_LIBRARY,
    android: PERMISSIONS.ANDROID.READ_MEDIA_IMAGES
  }),
  location: Platform.select({
    ios: PERMISSIONS.IOS.LOCATION_WHEN_IN_USE,
    android: PERMISSIONS.ANDROID.ACCESS_FINE_LOCATION
  })
}

// Hook pour gérer les permissions
function usePermission(type) {
  const [status, setStatus] = useState(RESULTS.UNAVAILABLE)

  const permission = PERMISSION_TYPES[type]

  useEffect(() => {
    check(permission).then(setStatus)
  }, [permission])

  const requestPermission = useCallback(async () => {
    const result = await request(permission)
    setStatus(result)

    if (result === RESULTS.BLOCKED) {
      Alert.alert(
        'Permission requise',
        `Cette fonctionnalité nécessite l'accès à ${type}. Voulez-vous ouvrir les paramètres ?`,
        [
          { text: 'Non', style: 'cancel' },
          { text: 'Ouvrir', onPress: openSettings }
        ]
      )
    }

    return result
  }, [permission, type])

  return {
    status,
    isGranted: status === RESULTS.GRANTED,
    isDenied: status === RESULTS.DENIED,
    isBlocked: status === RESULTS.BLOCKED,
    requestPermission
  }
}

// Utilisation
function CameraButton() {
  const { isGranted, requestPermission } = usePermission('camera')

  const handlePress = async () => {
    if (!isGranted) {
      const result = await requestPermission()
      if (result !== RESULTS.GRANTED) return
    }
    // Ouvrir la caméra
    navigation.navigate('Camera')
  }

  return (
    <TouchableOpacity onPress={handlePress}>
      <Text>Prendre une photo</Text>
    </TouchableOpacity>
  )
}

import messaging from '@react-native-firebase/messaging'
import notifee, { AndroidImportance } from '@notifee/react-native'

// Service de notifications
class NotificationService {
  async initialize() {
    // Demander la permission (iOS)
    const authStatus = await messaging().requestPermission()
    const enabled = authStatus === messaging.AuthorizationStatus.AUTHORIZED

    if (enabled) {
      // Récupérer le token FCM
      const token = await messaging().getToken()
      await this.registerToken(token)

      // Écouter les changements de token
      messaging().onTokenRefresh(this.registerToken)

      // Créer un canal Android
      await notifee.createChannel({
        id: 'default',
        name: 'Notifications',
        importance: AndroidImportance.HIGH
      })
    }

    return enabled
  }

  async registerToken(token) {
    // Envoyer le token au backend
    await api.registerPushToken(token)
  }

  // Configurer les handlers
  setupHandlers() {
    // Notification reçue en foreground
    messaging().onMessage(async (remoteMessage) => {
      await this.displayNotification(remoteMessage)
    })

    // Notification tapée (app en background)
    messaging().onNotificationOpenedApp((remoteMessage) => {
      this.handleNotificationPress(remoteMessage)
    })

    // App ouverte depuis notification (app fermée)
    messaging()
      .getInitialNotification()
      .then((remoteMessage) => {
        if (remoteMessage) {
          this.handleNotificationPress(remoteMessage)
        }
      })
  }

  async displayNotification(remoteMessage) {
    const { title, body } = remoteMessage.notification

    await notifee.displayNotification({
      title,
      body,
      android: {
        channelId: 'default',
        pressAction: { id: 'default' }
      },
      data: remoteMessage.data
    })
  }

  handleNotificationPress(remoteMessage) {
    const { type, id } = remoteMessage.data

    switch (type) {
      case 'order':
        navigation.navigate('OrderDetail', { orderId: id })
        break
      case 'message':
        navigation.navigate('Chat', { conversationId: id })
        break
    }
  }
}

// Utilisation dans App.tsx
function App() {
  useEffect(() => {
    const notificationService = new NotificationService()
    notificationService.initialize()
    notificationService.setupHandlers()
  }, [])

  return <AppNavigator />
}