События нажатия — Кнопки

«Поверхность на экране, при нажатии на которую запускается событие.»

Button (простой)

import { Button } from 'react-native'

<Button
  title="Нажми меня"
  onPress={() => alert('Нажато!')}
  color="#2e8555"
/>

Pressable (гибкий, RN 0.63+)

Введён в React Native 0.63. Заменяет устаревшие TouchableOpacity и TouchableHighlight.

<Pressable
  onPress={() => console.log('Нажато!')}
  onLongPress={() => console.log('Долгое нажатие!')}
  style={({ pressed }) => ({
    backgroundColor: pressed ? '#1a6340' : '#2e8555',
    padding: 12,
    borderRadius: 8
  })}
>
  <Text style={{ color: 'white' }}>Нажми меня</Text>
</Pressable>

Порядок событий нажатия

• onPressIn — активируется при начале нажатия
• onPressOut — деактивируется при окончании жеста
• onPress — срабатывает после отпускания пальца
• onLongPress — срабатывает после 500+ мс удержания