Click Events

React Native provides multiple components for handling touch/press events.

Button (simple)

import { Button } from 'react-native'

<Button
  title="Press me"
  onPress={() => alert('Pressed!')}
  color="#2e8555"
/>

Pressable (flexible, RN 0.63+)

Replaces the old TouchableOpacity and TouchableHighlight:

import { Pressable, Text } from 'react-native'

<Pressable
  onPress={() => console.log('Pressed!')}
  onLongPress={() => console.log('Long press!')}
  style={({ pressed }) => ({
    backgroundColor: pressed ? '#1a6340' : '#2e8555',
    padding: 12,
    borderRadius: 8
  })}
>
  <Text style={{ color: 'white' }}>Press me</Text>
</Pressable>

TouchableOpacity (legacy)

import { TouchableOpacity, Text } from 'react-native'

<TouchableOpacity
  onPress={handlePress}
  activeOpacity={0.7}
>
  <Text>Legacy button</Text>
</TouchableOpacity>