Front-end · 8 mondes · 32 étapes

React Native

De vraies applis iOS et Android avec React.

Progression

0 %

0/32 étapes terminées

← Décryptages

Fondamental · 6 min de lecture

Pressable et les gestes d'appui

Des boutons qui se sentent sous le doigt

1Définition

Pressable enveloppe n'importe quel contenu et détecte les différentes phases d'un appui : début, fin, appui long, survol sur les plateformes qui en disposent.

2Principes fondamentaux

Le cycle d'un appui

onPressIn au contact, onPressOut au relâchement, puis onPress si l'appui était court, ou onLongPress s'il a duré.

Le retour visuel

style et children peuvent être des fonctions recevant { pressed } : on adapte l'apparence pendant l'appui.

Accessibilité

Ajoute accessibilityRole="button" et un accessibilityLabel quand le contenu n'est pas du texte explicite (une icône par exemple).

3Exemples pratiques

Un bouton J'aime

App.tsx

1import { useState } from 'react';2import { View, Text, Pressable } from 'react-native';3 4export default function App() {5  const [aime, setAime] = useState(false);6 7  return (8    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>9      <Pressable10        accessibilityRole="button"11        accessibilityLabel={aime ? 'Retirer le j’aime' : 'Aimer'}12        onPress={() => setAime(!aime)}13        hitSlop={12}14        style={({ pressed }) => ({ transform: [{ scale: pressed ? 0.85 : 1 }] })}15      >16        <Text style={{ fontSize: 64, color: aime ? '#d02f1c' : '#aca693' }}>{aime ? '♥' : '♡'}</Text>17      </Pressable>18    </View>19  );20}

Démarrage de l'aperçu

Le cœur rétrécit sous le doigt, change d'état à l'appui, et reste accessible aux lecteurs d'écran.

4Erreurs courantes

Utiliser onClick

À éviter

<Pressable onClick={ouvrir}>

À faire

<Pressable onPress={ouvrir}>

Pourquoi : onClick n'existe pas sur mobile ; l'événement ne se déclenchera jamais sur téléphone.

Appeler la fonction au lieu de la passer

À éviter

<Pressable onPress={supprimer(item.id)}>

À faire

<Pressable onPress={() => supprimer(item.id)}>

Pourquoi : Avec les parenthèses, la suppression s'exécute pendant le rendu, pour chaque élément, sans aucun appui.

Une icône minuscule

À éviter

<Pressable onPress={fermer}>  <Text style={{ fontSize: 12 }}>✕</Text></Pressable>

À faire

<Pressable onPress={fermer} hitSlop={16}>  <Text style={{ fontSize: 12 }}>✕</Text></Pressable>

Pourquoi : La zone tactile réelle doit approcher 44 points : hitSlop l'agrandit sans changer le design.

5Subtilités à connaître

◆delayLongPress règle la durée avant onLongPress (500 ms par défaut).
◆android_ripple ajoute l'effet d'onde natif d'Android.
◆disabled bloque les appuis ; pense à le refléter visuellement.

6Vérifie ta compréhension

Question 1/3

Score 0

Quel événement arrive en premier ?

Envie d'essayer ? Ouvre le Labo et recopie les exemples pour les modifier.