TouchableOpacity and TouchableHighlight in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

Difference in Visual Feedback Between TouchableOpacity and TouchableHighlight

When you press a button wrapped in TouchableOpacity versus one wrapped in TouchableHighlight, what visual effect do you see?

A TouchableOpacity shows a colored overlay, while TouchableHighlight dims the button's opacity.

B Both TouchableOpacity and TouchableHighlight show a ripple effect on press.

C TouchableOpacity dims the button's opacity, while TouchableHighlight shows a colored overlay.

D Neither TouchableOpacity nor TouchableHighlight provide any visual feedback on press.

💡 Hint

Think about how the button looks when you tap it in each case.

TouchableOpacity reduces the opacity of its child component to show feedback, making it look faded. TouchableHighlight adds a colored overlay (highlight) on top of the child component.

❓ lifecycle

intermediate

TouchableHighlight Underlay Color Behavior

What happens if you do not set the underlayColor prop on a TouchableHighlight component?

A TouchableHighlight will use a default gray color as the underlay when pressed.

B TouchableHighlight will throw a runtime error because underlayColor is required.

C TouchableHighlight will not show any visual feedback when pressed.

D TouchableHighlight will crash the app on press.

💡 Hint

Try pressing a TouchableHighlight without underlayColor set.

If underlayColor is not specified, TouchableHighlight uses a default gray color for the underlay to show feedback.

📝 Syntax

advanced

Correct Usage of TouchableOpacity with onPress

Which code snippet correctly implements a TouchableOpacity button that logs 'Pressed!' when tapped?

React Native

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

export default function MyButton() {
  return (
    <TouchableOpacity onPress={() => console.log('Pressed!')}>
      <Text>Press Me</Text>
    </TouchableOpacity>
  );
}

A TouchableOpacity onPress={() => console.log('Pressed!')}><Text>Press Me</Text></TouchableOpacity>

B TouchableOpacity(onPress={() => console.log('Pressed!')}) {<Text>Press Me</Text>}

C >yticapOelbahcuoT/<>txeT/<eM sserP>txeT<>})'!desserP'(gol.elosnoc >= )({=sserPno yticapOelbahcuoT<

D <TouchableOpacity onPress={() => console.log('Pressed!')}><Text>Press Me</Text></TouchableOpacity>

💡 Hint

Remember JSX syntax requires tags to be enclosed in angle brackets.

Option D correctly uses JSX syntax with angle brackets and proper nesting. Options A and B are missing angle brackets or use invalid syntax. Option D is identical to C.

🔧 Debug

advanced

Why Does TouchableHighlight Not Show Feedback?

You wrapped a button in TouchableHighlight but pressing it does not show any visual feedback. What is the most likely cause?

A TouchableHighlight must be wrapped inside a ScrollView to show feedback.

B The child component has a transparent background, so the underlay color is not visible.

C TouchableHighlight only works on Android, not iOS.

D TouchableHighlight requires an onPress prop to show feedback, and it is missing.

💡 Hint

Check the background color of the child inside TouchableHighlight.

If the child component has a transparent background, the underlay color will not be visible, so no feedback appears. Adding a background color to the child fixes this.

🧠 Conceptual

expert

Choosing Between TouchableOpacity and TouchableHighlight

You want a button that shows a subtle fade effect on press and works well with images and text. Which component is best to use and why?

A TouchableOpacity, because it reduces opacity smoothly and works well with any child content.

B TouchableHighlight, because it adds a colored overlay that works better with images only.

C TouchableHighlight, because it disables opacity changes and only works with text children.

D TouchableOpacity, because it requires setting underlayColor for visual feedback.

💡 Hint

Think about the visual effect and compatibility with different child elements.

TouchableOpacity reduces the opacity of its children, creating a subtle fade effect that works well with images and text. TouchableHighlight adds a colored overlay which may not always look good with images.