TouchableOpacity and TouchableHighlight in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is TouchableOpacity in React Native?

TouchableOpacity is a component that makes an area respond to touches by reducing its opacity, giving a fade effect when pressed.

beginner

How does TouchableHighlight visually respond to a press?

TouchableHighlight darkens or highlights its child view by applying a color overlay when pressed, making it look like it is highlighted.

intermediate

When should you use TouchableOpacity instead of TouchableHighlight?

Use TouchableOpacity when you want a fade effect on press without changing the background color. It is good for buttons or icons that need subtle feedback.

beginner

What prop controls the color shown when a TouchableHighlight is pressed?

The underlayColor prop sets the color overlay shown when the TouchableHighlight is pressed.

beginner

Can TouchableOpacity and TouchableHighlight wrap any component?

Yes, both can wrap any React Native component to make it respond to touches with visual feedback.

Which component fades the wrapped content when pressed?

A TouchableOpacity

B TouchableHighlight

C View

D ScrollView

TouchableOpacity reduces the opacity of its child components to create a fade effect on press.

What prop do you use to change the highlight color in TouchableHighlight?

A underlayColor

B pressColor

C activeColor

D highlightColor

The underlayColor prop sets the color shown when TouchableHighlight is pressed.

Which component is better for subtle press feedback without changing background color?

A TouchableHighlight

B TouchableOpacity

C Button

D TextInput

TouchableOpacity provides a fade effect which is subtle and does not change background color.

Can TouchableHighlight wrap an Image component?

A No

B Only on iOS

C Only on Android

D Yes

TouchableHighlight can wrap any component, including Image, to provide touch feedback.

What happens if you press a TouchableHighlight without setting underlayColor?

A App crashes

B No visual feedback

C Default highlight color is used

D Opacity changes

TouchableHighlight uses a default underlay color if none is specified.

Explain the difference between TouchableOpacity and TouchableHighlight and when to use each.

Think about how the visual feedback looks when you press each component.

Describe how to customize the press feedback color in TouchableHighlight.

Look for a prop that controls the highlight color.