Button and Pressable in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Button vs Pressable: Which triggers onPress correctly?

Consider the following React Native code snippet. Which option correctly triggers the onPress event when the user taps the component?

React Native

import React from 'react';
import { View, Button, Pressable, Text } from 'react-native';

export default function App() {
  return (
    <View>
      {/* Component here */}
    </View>
  );
}

A <Button title='Click me' onPress={() => alert('Pressed!')} />

B <Pressable><Text>Click me</Text></Pressable>

C <Pressable onPress={() => alert('Pressed!')}><Text>Click me</Text></Pressable>

D <Button title='Click me' />

💡 Hint

Only components with an onPress handler will respond to taps.

Option C uses Pressable with an onPress prop and a Text child, so tapping triggers the alert.

Option A is a Button with onPress, and Button requires a title prop, which is correct here, so it also triggers onPress. But Button is less customizable than Pressable.

Option B lacks onPress, so no tap response.

Option D is a Button without onPress, so no tap response.

Between A and C, both trigger onPress, but C is the best example of Pressable usage.

❓ lifecycle

intermediate

What happens when you press a Pressable with onPressIn and onPressOut?

Given a Pressable component with both onPressIn and onPressOut handlers, what is the correct sequence of events when the user taps and releases the component?

React Native

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

export default function App() {
  return (
    <Pressable
      onPressIn={() => console.log('Pressed In')}
      onPressOut={() => console.log('Pressed Out')}
      onPress={() => console.log('Pressed')}
    >
      <Text>Tap me</Text>
    </Pressable>
  );
}

A Pressed In → Pressed → Pressed Out

B Pressed → Pressed In → Pressed Out

C Pressed Out → Pressed In → Pressed

D Pressed In → Pressed Out → Pressed

💡 Hint

Think about the order of touch events: press down, press action, release.

When the user touches down, onPressIn fires first.

When the finger lifts, onPressOut fires.

Finally, if it was a valid tap, onPress fires.

📝 Syntax

advanced

Identify the syntax error in this Button usage

Which option contains a syntax error that will prevent the React Native app from compiling?

React Native

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

export default function App() {
  return (
    <Button title='Press me' onPress={() => alert('Pressed!')} />
  );
}

A <Button title='Press me' onPress={() => alert('Pressed!)}></Button>

B <Button title='Press me' onPress={() => alert('Pressed!')} />

C <Button title='Press me' onPress={() => alert('Pressed!')}></Button>

D <Button title='Press me' onPress={() => alert('Pressed!')}/>

💡 Hint

Check if all quotes and brackets are properly closed.

Option A is missing the closing quote for the onPress attribute, causing a syntax error.

Options B, C, and D are syntactically correct ways to use Button.

🔧 Debug

advanced

Why does this Pressable not respond to taps?

A developer wrote this code but tapping the Pressable does nothing. What is the cause?

React Native

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

export default function App() {
  return (
    <Pressable>
      <Text>Tap me</Text>
    </Pressable>
  );
}

A Text components cannot have onPress handlers.

B Pressable requires a style prop to be tappable.

C Pressable has no onPress handler, so it does not respond.

D Pressable must have a child View component to work.

💡 Hint

Where is the onPress handler placed?

The Pressable itself has no onPress prop.

Pressable only responds to taps if it has an onPress prop.

Text without onPress does not respond either.

🧠 Conceptual

expert

What is the main advantage of Pressable over Button in React Native?

Choose the best explanation for why a developer might prefer Pressable instead of Button for touch interactions.

A Pressable automatically handles accessibility without extra props.

B Pressable allows more customization of touch feedback and styling than Button.

C Button supports more platforms than Pressable.

D Button can only be used inside ScrollView components.

💡 Hint

Think about flexibility and control over appearance and behavior.

Pressable is a low-level component that lets developers customize how the component looks and behaves on touch events.

Button is a higher-level component with limited styling options.

Option B is false; both support multiple platforms.

Option B is false; accessibility props must be added manually.

Option B is false; Button can be used anywhere.