Cours React Native Complet 📱

# Lancer
npx expo start

# Tester :
# → Scanner le QR code avec Expo Go (téléphone)
# → Appuyer sur 'i' pour iOS simulator
# → Appuyer sur 'a' pour Android emulator
# → Appuyer sur 'w' pour le web

export default function HomeScreen()

const styles = StyleSheet.create();

// Text — tout texte doit être dans
style=>
Titre

// Image

source=
style=
/>
source= />

// Pressable — bouton custom (remplace TouchableOpacity)

onPress=
style=
>
style=>Cliquer

// ScrollView — contenu scrollable
contentContainerStyle=>
Contenu long…

// ActivityIndicator — spinner de chargement
size=« large » color=« #2563eb » />

const styles = StyleSheet.create();

export default function Counter()

data=
keyExtractor=
renderItem=
ItemSeparatorComponent=
ListEmptyComponent=
refreshing=
onRefresh= // Pull to refresh
onEndReached= // Pagination infinie
onEndReachedThreshold=
/>

// SectionList — liste avec sections (headers)
import from 'react-native';

sections=
renderSectionHeader=
renderItem=
/>

export default function TabLayout()

// Push
router.push('/post/42');
router.push();

// Remplacer
router.replace('/login');

// Retour
router.back();

// Lire les params (dans post/[id].tsx)
const = useLocalSearchParams<>();

export default function LoginForm() {
const [email, setEmail] = useState( »);
const [password, setPassword] = useState( »);

const handleSubmit = () => {
if (!email || !password) {
Alert.alert('Erreur', 'Remplissez tous les champs');
return;
}
// Envoyer…
};

return (
style={{ gap: 12, padding: 16 }}>

placeholder=« Email »
value={email}
onChangeText={setEmail}
keyboardType=« email-address »
autoCapitalize=« none »
style={styles.input}
/>

placeholder=« Mot de passe »
value={password}
onChangeText={setPassword}
secureTextEntry
style={styles.input}
/>
onPress={handleSubmit} style={styles.button}>
style=>Connexion


);
}

import from '@tanstack/react-query';

export default function PostList() {
const { data: posts, isLoading, error } = useQuery({
queryKey: ['posts'],
queryFn: fetchPosts,
});

if (isLoading) return size=« large » />;
if (error) return Erreur: {error.message};

return (

data=
keyExtractor=
renderItem={({ item }) => {item.title}}
/>
);
}

// Mutation (POST, PUT, DELETE)
const queryClient = useQueryClient();
const mutation = useMutation();

// Créer un store
const useAuthStore = create((set) => ());

// Utiliser dans un composant
export default function Profile()

// Sauvegarder
await AsyncStorage.setItem('token', 'abc123');
await AsyncStorage.setItem('user', JSON.stringify(user));

// Lire
const token = await AsyncStorage.getItem('token');
const user = JSON.parse(await AsyncStorage.getItem('user'));

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

// expo-secure-store — pour les données sensibles (tokens, passwords)
// npx expo install expo-secure-store
import * as SecureStore from 'expo-secure-store';
await SecureStore.setItemAsync('token', 'secret');

// Caméra
import from 'expo-camera';

// Géolocalisation
import * as Location from 'expo-location';
const = await Location.requestForegroundPermissionsAsync();
const loc = await Location.getCurrentPositionAsync();

// Notifications push
import * as Notifications from 'expo-notifications';

# Configurer
eas build:configure

# Build pour les stores
eas build –platform android # → .aab pour Play Store
eas build –platform ios # → .ipa pour App Store
eas build –platform all # Les deux

# Soumettre aux stores
eas submit –platform android
eas submit –platform ios

# Update Over-The-Air (OTA) — sans repasser par les stores !
eas update –branch production –message « Fix bug »