Pressable — vad är det, hantering av tryckningar i React Native

Vad är Pressable?

Pressable — en React Native-komponent som ger ett enhetligt gränssnitt för att hantera alla typer av tryckningar. Till skillnad från tre olika Touchable-komponenter (TouchableHighlight, TouchableOpacity, TouchableWithoutFeedback) ersätter Pressable dem alla med en enda med ett flexibelt system av tillstånd och styling.

Komponenten introducerades i React Native 0.63 (september 2020). Enligt Metas data (2026) använder 70% av nya projekt på React Native Pressable istället för Touchable-komponenter. Pressable löser Touchables huvudproblem — fragmenterat API och behovet av att växla mellan komponenter för olika effekter.

Pressables filosofi

Till skillnad från TouchableOpacity, där tryckeffekten är styvt definierad (ändring av opacitet), tillhandahåller Pressable en funktion som tar emot det aktuella tillståndet. Utvecklaren bestämmer själv hur de vill reagera visuellt på en tryckning: ändra färg, skala, skugga eller en kombination av effekter. Detta ger full kontroll över UX.

Pressable-tillstånd: pressed, hovered, focused

Pressable definierar tre interaktionstillstånd: pressed (finger på skärmen), hovered (markör över elementet på Web/TV), focused (element i tangentbordsfokus). Varje tillstånd aktiverar motsvarande callback och skickas till stilmallsfunktionen och renderingsfunktionen för barn.

Viktigt: hovered och focused fungerar endast på plattformar med pekarstöd (Web, Android TV, Apple TV). På mobila enheter är endast pressed tillgängligt. För plattformsoberoende applikationer, designa visuella reaktioner med hänsyn till denna begränsning.

<Pressable
  style={({ pressed }) => [
    styles.button,
    pressed && styles.buttonPressed,
  ]}
  onPress={handlePress}>
  {({ pressed }) => (
    <Text style={pressed ? styles.textPressed : styles.text}>
      {pressed ? 'Release' : 'Press'}
    </Text>
  )}
</Pressable>

API och callbacks för Pressable

Pressable API innehåller fyra huvudsakliga callbacks: onPress (fullständig nedtryckning med släpp), onLongPress (lång nedtryckning), onPressIn (början av tryckning) och onPressOut (slut på tryckning). Kombinationen av onPressIn och onPressOut möjliggör att skapa anpassade animationer.

Ytterligare props: delayLongPress (fördröjning av lång nedtryckning, standard 500 ms), pressRetentionOffset (område utanför vilket trycket avbryts), android_ripple (ripple-effekt på Android). Viktigt: Ripple fungerar endast på Android 5+.

<Pressable
  onPress={() => console.log('Tryckt')}
  onLongPress={() => console.log('Lång tryckning')}
  onPressIn={() => console.log('Finger ned')}
  onPressOut={() => console.log('Finger upp')}
  delayLongPress={300}
  android_ripple={{ color: 'rgba(0,0,0,0.1)', borderless: false }}
  style={styles.button}>
  <Text>Press me</Text>
</Pressable>

onPress anropas endast när fingret lyfts inom komponentens område (med hänsyn till pressRetentionOffset). Om användaren flyttar fingret utanför gränserna utlöses inte onPress, vilket förhindrar falska tryckningar. onPressOut anropas i alla fall vid släpp.

hitSlop: utökning av tryckområde

hitSlop — en Pressable-prop som utökar tryckområdet bortom komponentens synliga gränser. Det är kritiskt för små element: ikoner, kryssrutor, radioknappar. Apple HIG rekommenderar en minsta touch target-storlek på 44x44 punkter. hitSlop gör det möjligt att uppfylla detta krav utan att ändra den visuella storleken.

hitSlop accepterar ett objekt { top, bottom, left, right } eller ett enda tal för alla sidor. Värden anges i logiska pixlar (dp/pt). För ikoner på 24x24 rekommenderas hitSlop på minst 10-12 på varje sida för att nå touch target på 44x44.

<Pressable
  hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
  onPress={handleIconPress}
  style={styles.iconButton}>
  <Icon name="star" size={24} />
</Pressable>

pressRetentionOffset — motsatsen till hitSlop: definierar området där användaren kan gå utanför komponentens gränser utan att trycket avbryts. Standard är lika med hitSlop. Om du vill att trycket ska bibehållas när du lämnar gränserna, öka pressRetentionOffset.

Pressable vs Touchable: när ska man byta

Pressable vs Touchable — den viktigaste frågan när du väljer komponent för tryckhantering. TouchableOpacity, TouchableHighlight och TouchableWithoutFeedback är föråldrade komponenter som inte kommer att tas bort men som inte får nya funktioner. Meta rekommenderar Pressable för nya projekt.

Huvudsakliga fördelar med Pressable: enhetligt API för alla typer av effekter, tillgång till pressed-tillstånd för anpassad styling, stöd för hovered/focused-tillstånd, hitSlop och pressRetentionOffset, onLongPress-callback utan extra konfiguration. TouchableOpacity är endast lämplig för enkel ändring av opacitet.

Exempel på användning av Pressable

Pressable gör det möjligt att skapa komplexa interaktiva element med minimal kod. Nedan — ett exempel på en animerad knapp med skaländring vid tryckning och ripple-effekt på Android. En sådan knapp ersätter kombinationen TouchableOpacity + Animated.

const AnimatedButton = ({ title, onPress }) => {
  const scale = React.useRef(new Animated.Value(1)).current;

  const handlePressIn = () => {
    Animated.spring(scale, {
      toValue: 0.96,
      useNativeDriver: true,
    }).start();
  };

  const handlePressOut = () => {
    Animated.spring(scale, {
      toValue: 1,
      friction: 3,
      useNativeDriver: true,
    }).start();
  };

  return (
    <Pressable
      onPress={onPress}
      onPressIn={handlePressIn}
      onPressOut={handlePressOut}
      android_ripple={{ color: 'rgba(255,255,255,0.3)' }}
      style={styles.button}>
      <AnimatedView style={[styles.inner, { transform: [{ scale }] }]}>
        <Text style={styles.text}>{title}</Text>
      </AnimatedView>
    </Pressable>
  );
};

Viktigt: använd useNativeDriver: true för animationer i Pressable. Detta flyttar animationen till den ursprungliga tråden och förhindrar tappade bildrutor vid snabba tryckningar. För transform och opacitet stöds den ursprungliga drivrutinen på alla plattformar.