Button

Learn the Button component and its onPress.

Button

The Button component in React Native is the most basic touch element. It has two required props: title sets the button label and onPress sets the function that handles the tap. Example: <Button title="Save" onPress={handleSave} />.

Button ships with the default look of the operating system; customization is limited to the color prop. When you need a more custom look you reach for TouchableOpacity or Pressable. Button accepts only a plain text label and cannot host other components inside.

The onPress handler

onPress takes a function that runs when the user taps and releases the button. The function is usually defined inside the component with a name like handleSave or onSubmit. Important: you write onPress={handleSave} to pass a reference; no parentheses.

Wrong form: onPress={handleSave()}. This calls the function once during render and hands the result to onPress, which is rarely what you want. Correct: onPress={handleSave} or, with an arrow, onPress={() => handleSave(id)}.

Exercise Write a Save button

Complete the empty App component. Define a handleSave function (its body may be empty). Return <Button title="Save" onPress={handleSave} />.

Show example solution

import React from 'react';
import { Button } from 'react-native';

export default function App() {
  const handleSave = () => {};
  return <Button title="Save" onPress={handleSave} />;
}

Test yourself

Which prop sets the label on Button?
```
<Button ???="Save" onPress={save} />
```
- title
- label
- text
- name
Show answer

title — The title prop sets the button label.

Write the onPress reference

<Button title="Save" ____={handleSave} />

Show answer

<Button title="Save" onPress={handleSave} />

Match each prop to its job

title

Button label
onPress

Tap function
color

Button color
disabled

Disable the button

Next lesson: TouchableOpacity

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies