Button and Pressable in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is the main difference between Button and Pressable in React Native?

Button is a simple component for clickable buttons with limited styling options. Pressable is more flexible and lets you customize styles and behavior for different press states.

beginner

How do you handle a tap event on a Pressable component?

You use the onPress prop and assign it a function to run when the user taps the component.

intermediate

Which component provides built-in accessibility support for buttons in React Native?

Button provides built-in accessibility features like role and focus management automatically.

intermediate

How can you change the style of a Pressable when it is pressed?

You can pass a function to the style prop that receives a parameter indicating if the component is pressed, then return different styles accordingly.

intermediate

Why might you choose Pressable over Button in a React Native app?

Because Pressable allows full control over the button's appearance and behavior, letting you create custom interactive elements beyond the default button look.

Which prop do you use to handle tap events on a Button or Pressable?

A onTouch

B onClick

C onPress

D onTap

The correct prop for tap events in React Native is onPress.

What does the Pressable component provide that Button does not?

A Customizable press states and styles

B Automatic navigation

C Built-in text label

D Default background color

Pressable lets you customize styles for different press states, unlike Button.

Which component is simpler to use for a basic clickable button with default styling?

A Pressable

B Button

C TouchableOpacity

D View

Button is the simplest for basic clickable buttons with default styles.

How do you change the style of a Pressable when it is pressed?

A You cannot change styles on press

B Use the <code>pressed</code> prop

C Use <code>onPressIn</code> to change styles

D Pass a function to the <code>style</code> prop that receives a pressed state

You pass a function to the style prop that receives a parameter indicating if pressed, then return styles accordingly.

Which component automatically handles accessibility roles for buttons?

A Button

B Pressable

C View

D Text

Button automatically sets accessibility roles for buttons.

Explain how you would create a custom button using Pressable in React Native.

Think about how to detect press state and change styles dynamically.

Describe the advantages and disadvantages of using Button versus Pressable.

Consider ease of use versus customization.