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.

Practice

1. Which React Native component is best for a simple clickable button with default styling?

easy

A. Button

B. Pressable

C. View

D. TextInput

Solution

1. Step 1: Understand the purpose of Button

   Button is designed for simple clickable buttons with default styles provided by React Native.

2. Step 2: Compare with other components

   Pressable is for custom touchable areas, View is a container, and TextInput is for text input, so they are not suitable for simple buttons.

3. Final Answer:

   Button -> Option A

4. Quick Check:

   Simple clickable button = Button [OK]

Hint: Simple buttons use Button, custom ones use Pressable [OK]

Common Mistakes:

• Choosing Pressable for simple buttons
• Confusing View with clickable components
• Using TextInput for buttons

2. Which of the following is the correct way to import Pressable in a React Native file?

easy

A. import { Pressable } from 'react-native';

B. import Pressable from 'react-native';

C. import { Pressable } from 'react-native-pressable';

D. import Pressable from 'react-native-pressable';

Solution

1. Step 1: Recall React Native import syntax

   React Native exports components like Pressable as named exports, so we use curly braces in import.

2. Step 2: Verify package name

   The correct package is react-native, not react-native-pressable.

3. Final Answer:

   import { Pressable } from 'react-native'; -> Option A

4. Quick Check:

   Named import from 'react-native' = import { Pressable } from 'react-native'; [OK]

Hint: Use curly braces for named imports from 'react-native' [OK]

Common Mistakes:

• Using default import instead of named import
• Importing from wrong package
• Omitting curly braces

3. What will happen when you press this React Native code snippet?

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

export default function App() {
  return (
     Alert.alert('Pressed!')}>
      Click me
    
  );
}

medium

A. The text changes color automatically on press.

B. Nothing happens when pressing the text.

C. The app crashes due to missing Button component.

D. An alert with message 'Pressed!' appears when pressing the text.

Solution

1. Step 1: Understand Pressable behavior

   Pressable wraps the Text and triggers onPress callback when pressed.

2. Step 2: Check the onPress action

   The onPress calls Alert.alert('Pressed!'), so an alert box will appear on press.

3. Final Answer:

   An alert with message 'Pressed!' appears when pressing the text. -> Option D

4. Quick Check:

   Pressable triggers alert on press = An alert with message 'Pressed!' appears when pressing the text. [OK]

Hint: Pressable triggers onPress alert if defined [OK]

Common Mistakes:

• Thinking nothing happens on press
• Expecting automatic color change without style
• Confusing Button with Pressable behavior

4. Identify the error in this React Native code using Pressable:

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

export default function App() {
  return (
     console.log('Pressed')}>Click me
  );
}

medium

A. The onPress callback is missing parentheses.

B. You cannot put text directly inside Pressable without a Text component.

C. The import statement is incorrect.

D. The function component must return a single View.

Solution

1. Step 1: Check children of Pressable

   In React Native, text must be wrapped inside a Text component; raw strings are not allowed as direct children.

2. Step 2: Verify other parts

   onPress is correctly defined, imports are correct, and returning a single component is valid.

3. Final Answer:

   Text must be wrapped in a Text component inside Pressable. -> Option B

4. Quick Check:

   Text inside Pressable needs Text wrapper [OK]

Hint: Always wrap text in Text inside Pressable [OK]

Common Mistakes:

• Placing raw text directly inside Pressable
• Missing parentheses in onPress (not true here)
• Incorrect imports

5. You want a button that changes its background color to gray while pressed and shows the text "Tap me". Which code snippet correctly uses Pressable to achieve this?

hard

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

alert('Tapped')}>
Tap me

B. import { Button } from 'react-native';

({ backgroundColor: pressed ? 'gray' : 'white' })} />

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

[{ backgroundColor: pressed ? 'gray' : 'white' }]}>
Tap me

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

Tap me

Solution

1. Step 1: Understand dynamic styling with Pressable

   Pressable accepts a style function with a pressed boolean to change styles when pressed.

2. Step 2: Check each option

   import { Pressable, Text } from 'react-native';
   
    [{ backgroundColor: pressed ? 'gray' : 'white' }]}> 
     Tap me
   

   uses the style function correctly to change background color on press.

   import { Button } from 'react-native';
   
    ({ backgroundColor: pressed ? 'gray' : 'white' })} /> 

   incorrectly tries to style Button with a function.

   import { Pressable, Text } from 'react-native';
   
    alert('Tapped')}>
     Tap me
   

   lacks style change.

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

   sets static gray background without press effect.

3. Final Answer:

   Pressable with style={({ pressed }) => [{ backgroundColor: pressed ? 'gray' : 'white' }]} -> Option C

4. Quick Check:

   Use style function with pressed for dynamic press styles [OK]

Hint: Use style={({pressed}) => ...} for press feedback in Pressable [OK]

Common Mistakes:

• Trying to style Button with style function
• Not wrapping text in Text component
• Using static styles without press state