React Native : créer des apps mobiles avec JavaScript

React Native permet de créer des applications mobiles iOS et Android en JavaScript, en réutilisant les compétences React du développement web. Contrairement aux WebViews, les composants react native sont des composants natifs réels : les performances sont proches du natif.

React Native vs Flutter : quel choix ?

React Native utilise un pont JavaScript qui communique avec les composants natifs de la plateforme. Les interfaces sont donc réellement natives (bouton iOS = UIButton, bouton Android = Button Material). La cohérence visuelle entre plateformes est moindre qu'avec Flutter, mais l'intégration dans l'écosystème natif est supérieure.

Choisissez react native si votre équipe connaît React et JavaScript. Choisissez Flutter si vous démarrez de zéro et voulez les meilleures performances d'animation.

Initialisation avec Expo

Expo simplifie considérablement le démarrage avec react native :

npx create-expo-app mon-app
cd mon-app
npx expo start  # Lance sur simulateur ou appareil via QR code

Expo gère les configurations iOS/Android, les permissions et les builds cloud (EAS Build).

Composants React Native essentiels

import { View, Text, StyleSheet, FlatList, TouchableOpacity, Image, ScrollView } from 'react-native';

export default function HomeScreen() {
  const [articles, setArticles] = useState([]);

  useEffect(() => {
    fetch('https://api.monsite.fr/articles')
      .then(r => r.json())
      .then(setArticles);
  }, []);

  return (
    <View style={styles.container}>
      <FlatList
        data={articles}
        keyExtractor={item => item.slug}
        renderItem={({ item }) => (
          <TouchableOpacity style={styles.card} onPress={() => navigation.navigate('Article', { slug: item.slug })}>
            <Image source={{ uri: item.image }} style={styles.image} />
            <Text style={styles.titre}>{item.titre}</Text>
          </TouchableOpacity>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, backgroundColor: '#f8fafc' },
  card: { margin: 12, borderRadius: 12, backgroundColor: '#fff', elevation: 3 },
  image: { width: '100%', height: 180, borderRadius: 12 },
  titre: { fontSize: 16, fontWeight: '700', padding: 12 },
});

Navigation avec React Navigation

React Navigation est la bibliothèque de navigation standard pour react native :

npm install @react-navigation/native @react-navigation/stack

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} options={{ title: 'Articles' }} />
        <Stack.Screen name="Article" component={ArticleScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Stockage local avec AsyncStorage

import AsyncStorage from '@react-native-async-storage/async-storage';

// Sauvegarder
await AsyncStorage.setItem('user_token', token);

// Lire
const token = await AsyncStorage.getItem('user_token');

// Supprimer
await AsyncStorage.removeItem('user_token');

Permissions et APIs natives

Expo simplifie l'accès aux APIs natives : caméra, géolocalisation, notifications push, accéléromètre. Chaque API nécessite des permissions déclarées dans app.json.

import * as Location from 'expo-location';
const { status } = await Location.requestForegroundPermissionsAsync();
if (status === 'granted') {
  const location = await Location.getCurrentPositionAsync({});
}

Pour les cas avancés, consultez la documentation Expo qui couvre toutes les APIs natives accessibles en JavaScript.

Conclusion

React Native permet aux développeurs JavaScript de créer des applications mobiles performantes en réutilisant leurs compétences existantes. Expo simplifie considérablement la mise en place et les builds. Pour un développeur web, maîtriser react native double votre offre de services sans effort d'apprentissage majeur.

React Native continue d'évoluer avec la New Architecture (Fabric + JSI + TurboModules) qui améliore significativement les performances. Pour les nouvelles applications, Expo est le point de départ recommandé : API natives prêtes à l'emploi, Over-The-Air updates, et workflow de build simplifié via EAS Build. Maîtrisez React Navigation pour le routing, Zustand pour l'état global, et React Query pour le cache réseau. Utilisez le Profiler Flipper pour identifier les re-rendus inutiles. La documentation React Native et la communauté Expo Discord sont d'excellentes ressources pour progresser rapidement dans le développement mobile cross-platform natif.

Tests et débogage mobile

Les tests React Native se font avec Jest pour la logique métier et Detox pour les tests end-to-end sur des simulateurs et appareils réels. Le débogueur Flipper de Meta est l'outil de référence pour inspecter le réseau, le layout des composants, et les performances React Native. Pour les crashs en production, intégrez Sentry avec le plugin React Native pour capturer les erreurs et les stack traces non symbolisées.