Les entretiens techniques React Native évaluent la maîtrise du développement mobile cross-platform, des spécificités iOS/Android, et des patterns de performance. Ce guide présente les 30 questions les plus fréquentes, avec des réponses détaillées et des exemples de code pour une préparation efficace. Ces questions couvrent les fondamentaux jusqu'aux concepts avancés. Maîtriser l'architecture React Native et comprendre les différences avec React web sont essentiels pour réussir l'entretien. ## Fondamentaux React Native ### 1. Quelle est la différence entre React et React Native ? React est une bibliothèque pour créer des interfaces web, tandis que React Native permet de développer des applications mobiles natives pour iOS et Android. La différence fondamentale réside dans le rendu : React utilise le DOM virtuel qui se traduit en éléments HTML, tandis que React Native utilise un bridge qui communique avec les composants natifs de chaque plateforme. ```jsx // React (Web) - utilise des éléments HTML function WebComponent() { return (

Texte web

) } // React Native - utilise des composants natifs import { View, Text, TouchableOpacity, StyleSheet } from 'react-native' function NativeComponent() { return ( Texte natif Appuyer ) } const styles = StyleSheet.create({ container: { flex: 1, padding: 16 } }) ``` Les composants React Native se traduisent en UIView sur iOS et android.view sur Android, offrant des performances natives. ### 2. Comment fonctionne l'architecture de React Native ? React Native utilise une architecture en trois couches : JavaScript, Bridge (ou JSI dans la nouvelle architecture), et Native. Le code JavaScript s'exécute dans un moteur JS (Hermes ou JavaScriptCore). Les communications avec le code natif passent par un système de sérialisation JSON dans l'ancienne architecture, ou par JSI (JavaScript Interface) dans la nouvelle architecture. ```jsx // 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 ``` La nouvelle architecture améliore significativement les performances en éliminant la sérialisation JSON et en permettant des appels synchrones. ### 3. Qu'est-ce que le Metro bundler ? Metro est le bundler JavaScript utilisé par React Native. Il transforme le code source en un bundle optimisé pour l'exécution mobile. Metro gère la résolution des modules, la transformation du code (via Babel), et le hot reloading pendant le développement. ```javascript // metro.config.js 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 ``` Metro supporte le Fast Refresh, permettant de voir les changements instantanément sans perdre l'état de l'application. ### 4. Expliquez StyleSheet.create et ses avantages `StyleSheet.create` optimise les styles en les validant et en les convertissant en références numériques, réduisant la charge sur le bridge. ```jsx // ❌ Styles inline - recréés à chaque rendu function BadExample() { return ( Titre ) } // ✅ 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 ( Titre {/* Combinaison de styles */} Contenu ) } // StyleSheet.absoluteFillObject pour le positionnement absolu const overlayStyles = StyleSheet.create({ overlay: { ...StyleSheet.absoluteFillObject, backgroundColor: 'rgba(0,0,0,0.5)' } }) ``` ### 5. Quelle est la différence entre Flexbox web et React Native ? React Native utilise Flexbox mais avec des valeurs par défaut différentes du web, adaptées aux interfaces mobiles verticales. ```jsx // 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 ( Titre Description ) } 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' } }) ``` ## Navigation et composants ### 6. Comment implémenter la navigation avec React Navigation ? React Navigation est la solution standard pour la navigation dans React Native. Elle offre plusieurs types de navigateurs adaptés aux patterns mobiles. ```jsx // 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() const Tab = createBottomTabNavigator() // Navigation par onglets function TabNavigator() { return ( ({ tabBarIcon: ({ focused, color, size }) => { // Icône dynamique selon l'onglet const iconName = route.name === 'Home' ? 'home' : 'settings' return }, tabBarActiveTintColor: '#007AFF', tabBarInactiveTintColor: 'gray' })} > ) } // Navigation en pile function App() { return ( ({ title: `Profil ${route.params.userId}` })} /> ) } ``` ### 7. Comment gérer les listes performantes avec FlatList ? `FlatList` est optimisé pour les longues listes avec virtualisation automatique, ne rendant que les éléments visibles. ```jsx 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 }) => ( ), []) // Extraction de la clé const keyExtractor = useCallback((item) => item.id.toString(), []) // Séparateur entre éléments const ItemSeparator = useCallback(() => ( ), []) return ( } // Pagination infinie onEndReached={loadMore} onEndReachedThreshold={0.5} ListFooterComponent={loading ? : null} // Liste vide ListEmptyComponent={} /> ) } ``` Toujours mémoriser `renderItem` avec `useCallback` et extraire les composants lourds. Éviter les fonctions inline dans `renderItem` qui causent des re-renders inutiles. ### 8. Quelle est la différence entre TouchableOpacity, Pressable et TouchableHighlight ? Ces composants gèrent les interactions tactiles avec des feedbacks visuels différents. ```jsx import { TouchableOpacity, TouchableHighlight, Pressable, StyleSheet } from 'react-native' function InteractionExamples() { return ( {/* TouchableOpacity : réduit l'opacité au toucher */} console.log('Pressed')} style={styles.button} > TouchableOpacity {/* TouchableHighlight : ajoute une couleur de fond */} console.log('Pressed')} style={styles.button} > TouchableHighlight {/* Pressable : API moderne avec plus de contrôle */} console.log('Pressed')} onLongPress={() => console.log('Long press')} delayLongPress={500} style={({ pressed }) => [ styles.button, pressed && styles.buttonPressed ]} > {({ pressed }) => ( {pressed ? 'Pressé !' : 'Pressable'} )} {/* Pressable avec hitSlop pour agrandir la zone tactile */} console.log('Pressed')} style={styles.smallButton} > Petit bouton ) } 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' } }) ``` `Pressable` est recommandé pour les nouveaux projets car il offre plus de contrôle et une API plus cohérente. ### 9. Comment créer des animations fluides ? React Native propose plusieurs API d'animation : Animated (intégré) et Reanimated (plus performant). ```jsx 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 ( {children} ) } // 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 ( Appuyer ) } // 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 (