Tutoriel : créer votre première application mobile avec React Native

Pourquoi React Native ?

React Native permet de créer des applications iOS et Android avec un seul code JavaScript/TypeScript. Pour une startup africaine, c'est un gain de temps et d'argent considérable : un seul développeur peut maintenir les deux plateformes.

Prérequis

• Node.js 18 ou plus
• Expo Go sur votre téléphone (ou un émulateur Android)
• Connaissances de base en JavaScript

1. Créer le projet avec Expo

npx create-expo-app@latest MaPremiereApp
cd MaPremiereApp
npx expo start

Scannez le QR code avec Expo Go : votre application tourne déjà sur votre téléphone !

2. Votre premier écran

import { useState } from 'react';
import { SafeAreaView, Text, TextInput, Button, StyleSheet, View } from 'react-native';

export default function App() {
  const [nom, setNom] = useState('');
  const [salutation, setSalutation] = useState('');

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.titre}>🇨🇲 Bonjour Tech237 !</Text>
      <TextInput
        style={styles.input}
        placeholder="Votre nom"
        value={nom}
       
      />
      <Button title="Saluer" => setSalutation('Salut ' + nom + ' ! 👋')} />
      {salutation !== '' && <Text style={styles.salut}>{salutation}</Text>}
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', padding: 20 },
  titre: { fontSize: 24, fontWeight: 'bold', textAlign: 'center', marginBottom: 20 },
  input: { borderWidth: 1, borderColor: '#ccc', padding: 12, borderRadius: 8, marginBottom: 12 },
  salut: { fontSize: 18, textAlign: 'center', marginTop: 20, color: '#10b981' }
});

3. Ajouter la navigation

Pour une app à plusieurs écrans, installez React Navigation :

npx expo install @react-navigation/native @react-navigation/native-stack
npx expo install react-native-screens react-native-safe-area-context

4. Et après ?

• Stockage local : AsyncStorage ou SQLite pour les données hors ligne.
• API : consommez votre backend avec fetch ou axios.
• Paiement mobile : intégrez le SDK Orange Money ou MTN MoMo.
• Publication : générez les builds avec EAS Build et publiez sur les stores.

Astuce : testez votre application sur un vrai téléphone dès le premier jour, les différences d'affichage entre émulateur et téléphone réel sont fréquentes.

Prochain tutoriel : la connexion à une API REST — restez connectés ! 🚀