React Native's Basic Button Component

WHY IT EXISTS Mobile apps need buttons. React Native provides the Button component as a dead-simple, cross-platform solution that 'just works' for the most basic use case: text that triggers an action when tapped. It was designed to prioritize ease of use and speed over customizability.

THE MENTAL MODEL Think of the Button component as a sealed black box. You give it text (the title prop) and a function to run when tapped (the onPress prop), and it gives you a functional, native-looking button. You don't control what's inside it or how it's styled, which is both its strength for simplicity and its weakness for branding.

HOW IT WORKS The Button is a wrapper around native UI button elements. Its only two required props are title (a string for the label) and onPress (a callback function). You can also pass a boolean disabled prop to make it non-interactive. Minor customization is possible with the color prop, but it behaves differently across platforms: on iOS it changes the text color, while on Android it changes the background color. Android also automatically converts the title to uppercase.

WHEN TO USE IT Use the Button component for rapid prototyping or for standard, non-branded UI elements where speed is more important than style. It's a great fit for simple dialogs ('OK', 'Cancel'), basic forms ('Submit'), or any place where a generic system button is acceptable.

WHEN NOT TO USE IT Do not use Button if you need any significant custom styling. This includes adding an icon, using a custom font, applying a gradient background, or creating complex layouts. The component is intentionally barebones. For any of these cases, you must build your own button using the Pressable component, which is a more flexible building block that detects press interactions without imposing any default styles.

ONE CANONICAL EXAMPLE A simple 'Learn More' button requires just three props. The title prop sets the text to 'Learn More'. The onPress prop is a function that gets called when the button is tapped, like onPress={handlePress}. Finally, an accessibilityLabel such as 'Learn more about this topic' ensures screen readers can describe the button's purpose to visually impaired users.