React Native Basics›Core· 35 min read

Buttons & Touchables

There is no onClick on a phone — you respond to taps with onPress, using Button or a touchable.

What you will learn

Add a Button with onPress
Wrap anything tappable in a touchable
Know when to use each

Taps, not clicks

On a phone people tap, so the handler is onPress (not onClick). The simplest tappable thing is the built-in Button.

A built-in Button calls onPress when tapped

import { View, Button, Alert } from 'react-native';

export default function App() {
  return (
    <View>
      <Button title="Tap me" onPress={() => Alert.alert('You tapped!')} />
    </View>
  );
}

Note: Output: A button labelled "Tap me". Tapping it pops up an alert that says: You tapped! Alert.alert shows a small native pop-up — handy for quick testing.

Make anything tappable

The built-in Button is plain and hard to style. To make your own buttons, wrap any view in a touchable. The most common is TouchableOpacity, which gently fades when pressed:

TouchableOpacity turns a styled View into a custom button

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

export default function App() {
  return (
    <TouchableOpacity style={styles.btn} onPress={() => console.log('Saved!')}>
      <Text style={styles.label}>Save</Text>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  btn: { backgroundColor: '#1e90ff', padding: 14, borderRadius: 8 },
  label: { color: 'white', textAlign: 'center', fontWeight: 'bold' },
});

Note: Output: A blue rounded "Save" button. Tapping it fades briefly and logs to your terminal: Saved! Now you control every pixel of the button, which the plain Button does not allow.

Use	When
`Button`	Quick, plain button — little styling needed
`TouchableOpacity`	Custom-styled buttons (fades on press)
`Pressable`	The newest, most flexible touchable for any tap

Tip: The plain Button even looks different on Android vs iOS. For a consistent look across both platforms, build your own button with TouchableOpacity or Pressable.

Q. Which prop handles a tap in React Native?

Answer: Phones use taps, so React Native uses onPress on buttons and touchables — there is no onClick.

✍️ Practice

Add a Button that shows an Alert when tapped.
Build a custom blue "Like" button with TouchableOpacity that logs a message.

🏠 Homework

Make two custom buttons (Save and Cancel) side by side in a row, each with its own onPress message.