Нажатия: Button и Pressable

На телефоне нет мыши и onClick, зато есть касания. За них отвечает событие onPress. Готовая кнопка — Button, а любой свой элемент, реагирующий на нажатие, делают с помощью Pressable.

Button

Button — системная кнопка: на iOS она выглядит как текстовая ссылка, на Android — как прямоугольная кнопка.

// app/index.tsx
import { Alert, Button, View } from 'react-native';
 
export default function Index() {
  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Button title="Добавить" onPress={() => Alert.alert('Нажато!')} />
    </View>
  );
}

Нажмите кнопку — появится системное окно с текстом «Нажато!». Alert.alert показывает такие окна на iOS и Android.

У Button есть только title, onPress, color и disabled — проп style она не принимает. Если нужна кнопка своего вида, используйте Pressable.

Pressable

Pressable — обёртка, которая ловит нажатия на всё, что внутри неё. Создайте кнопку для списка задач:

// components/AppButton.tsx
import { Pressable, StyleSheet, Text } from 'react-native';
 
type Props = { title: string; onPress: () => void };
 
export default function AppButton({ title, onPress }: Props) {
  return (
    <Pressable
      onPress={onPress}
      style={({ pressed }) => [styles.button, pressed && styles.pressed]}
    >
      <Text style={styles.text}>{title}</Text>
    </Pressable>
  );
}
 
const styles = StyleSheet.create({
  button: {
    backgroundColor: '#2563eb',
    paddingVertical: 12,
    paddingHorizontal: 20,
    borderRadius: 8,
    alignItems: 'center',
  },
  pressed: { opacity: 0.6 },
  text: { color: '#fff', fontSize: 16, fontWeight: '600' },
});

В style передана функция: она получает pressed — нажат ли элемент прямо сейчас. Пока палец на кнопке, она становится полупрозрачной, и пользователь видит, что касание засчитано.

Использование

// app/index.tsx
import { View } from 'react-native';
import AppButton from '@/components/AppButton';
 
export default function Index() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', padding: 16 }}>
      <AppButton title="Добавить задачу" onPress={() => console.log('Добавить')} />
    </View>
  );
}

На экране появится синяя кнопка во всю ширину, а нажатие выведет «Добавить» в терминал.

События Pressable

onLongPress удобен для удаления задачи: короткое нажатие отмечает её, долгое — удаляет.

Частая ошибка

Делать область нажатия слишком маленькой, например иконку 16 на 16. Пальцем в неё трудно попасть. Рекомендуемый минимум — около 44 на 44 точки: добавьте padding или проп hitSlop={8}, который расширит область касания на 8 точек с каждой стороны.