Trung BìnhReact Native iconReact Native

`Pressable` vs `TouchableOpacity` / `TouchableHighlight` — RN khuyến nghị 2026?

Pressable (recommend từ RN 0.63+): API hiện đại, một component thay cho cả family Touchable*.

  • Function children có signature ({ pressed }) => ReactNode để render khác state, hoặc style function style={({ pressed }) => [...]} để áp style động.
  • Hỗ trợ onLongPress, delayLongPress, hitSlop, pressRetentionOffset.
tsx
<Pressable
  onPress={...}
  style={({ pressed }) => [styles.btn, pressed && { opacity: 0.6 }]}
  hitSlop={10}
>
  <Text>Submit</Text>
</Pressable>

TouchableOpacity: opacity flash khi press (default 0.2). Ngắn gọn hơn cho case đơn giản.

TouchableHighlight: đổi underlayColor khi press — phù hợp list row.

TouchableWithoutFeedback: không feedback gì — chỉ dùng cho overlay invisible (vd dismiss keyboard).

Quy tắc 2026: default Pressable cho mọi nút mới. Touchable* để legacy code yên — không cần migrate ồ ạt vì performance và hành vi tương đương.

Xem toàn bộ React Native cùng filter theo level & chủ đề con.

Mở danh sách React Native