Presses: Button and Pressable

A phone has no mouse and no onClick, but it has touches. They are handled by the onPress event. The ready-made button is Button, and any custom element that reacts to presses is built with Pressable.

Button

Button is a system button: on iOS it looks like a text link, on Android like a rectangular button.

// app/index.tsx
import { Alert, Button, View } from 'react-native';
 
export default function Index() {
  return (
    <View style={{ flex: 1, justifyContent: 'center' }}>
      <Button title="Add" onPress={() => Alert.alert('Pressed!')} />
    </View>
  );
}

Press the button and a system dialog with "Pressed!" appears. Alert.alert shows such dialogs on both iOS and Android.

Button has only title, onPress, color and disabled; it does not accept a style prop. If you need a button with your own look, use Pressable.

Pressable

Pressable is a wrapper that catches presses on everything inside it. Create a button for the to-do list:

// 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' },
});

A function is passed to style: it receives pressed, whether the element is being pressed right now. While a finger is on the button it becomes semi-transparent, so the user sees the touch was registered.

Using it

// 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="Add task" onPress={() => console.log('Add')} />
    </View>
  );
}

A full-width blue button appears on the screen, and a press prints "Add" in the terminal.

Pressable events

onLongPress is handy for deleting a task: a short press marks it done, a long press deletes it.

Common mistake

Making the touch area too small, for example a 16 by 16 icon. It is hard to hit with a finger. The recommended minimum is about 44 by 44 points: add padding or the hitSlop={8} prop, which extends the touch area by 8 points on each side.