TouchableOpacity and TouchableHighlight in React Native - Mini App: Build & Ship

Build: Touchable Buttons Screen

This screen shows two buttons using TouchableOpacity and TouchableHighlight. Each button changes its appearance when pressed and shows a message below when tapped.

Target UI

-------------------------
| Touchable Buttons     |
|                       |
| [Opacity Button]      |
|                       |
| [Highlight Button]    |
|                       |
| Message:              |
|                       |
-------------------------

Add a TouchableOpacity button labeled 'Opacity Button'.

Add a TouchableHighlight button labeled 'Highlight Button'.

When each button is pressed, show a message below that says which button was pressed.

TouchableOpacity button should fade when pressed.

TouchableHighlight button should highlight with a gray color when pressed.

Use accessible labels for both buttons.

Starter Code

React Native

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, TouchableHighlight, StyleSheet } from 'react-native';

export default function TouchableButtonsScreen() {
  const [message, setMessage] = useState('');

  return (
    <View style={styles.container}>
      {/* TODO: Add TouchableOpacity button here */}

      {/* TODO: Add TouchableHighlight button here */}

      <Text style={styles.message}>{message}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  },
  button: {
    paddingVertical: 12,
    paddingHorizontal: 24,
    marginVertical: 10,
    borderRadius: 6
  },
  buttonText: {
    color: 'white',
    fontSize: 16
  },
  message: {
    marginTop: 20,
    fontSize: 18
  }
});

Task 1

Task 2

Task 3

Task 4

Task 5

Task 6

Solution

React Native

import React, { useState } from 'react';
import { View, Text, TouchableOpacity, TouchableHighlight, StyleSheet } from 'react-native';

export default function TouchableButtonsScreen() {
  const [message, setMessage] = useState('');

  return (
    <View style={styles.container}>
      <TouchableOpacity
        accessibilityLabel="Opacity Button"
        style={[styles.button, { backgroundColor: '#007AFF' }]}
        activeOpacity={0.6}
        onPress={() => setMessage('Opacity Button Pressed')}
      >
        <Text style={styles.buttonText}>Opacity Button</Text>
      </TouchableOpacity>

      <TouchableHighlight
        accessibilityLabel="Highlight Button"
        style={[styles.button, { backgroundColor: '#34C759' }]}
        underlayColor="#CCCCCC"
        onPress={() => setMessage('Highlight Button Pressed')}
      >
        <Text style={styles.buttonText}>Highlight Button</Text>
      </TouchableHighlight>

      <Text style={styles.message}>{message}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20
  },
  button: {
    paddingVertical: 12,
    paddingHorizontal: 24,
    marginVertical: 10,
    borderRadius: 6
  },
  buttonText: {
    color: 'white',
    fontSize: 16
  },
  message: {
    marginTop: 20,
    fontSize: 18
  }
});

We used TouchableOpacity with activeOpacity to make the button fade when pressed. The TouchableHighlight uses underlayColor to show a gray highlight on press. Both buttons have accessibilityLabel for screen readers. Pressing a button updates the message below to show which button was pressed.

Final Result

Completed Screen

-------------------------
| Touchable Buttons     |
|                       |
| [Opacity Button]      |
|                       |
| [Highlight Button]    |
|                       |
| Message:              |
| Opacity Button Pressed|
-------------------------

Tapping 'Opacity Button' fades the button and shows 'Opacity Button Pressed' below.

Tapping 'Highlight Button' highlights the button in gray and shows 'Highlight Button Pressed' below.

Stretch Goal

Add a reset button that clears the message when pressed.

💡 Hint

Use another TouchableOpacity with label 'Reset' and onPress to set message to an empty string.

Practice

1. What is the main visual difference between TouchableOpacity and TouchableHighlight in React Native?

easy

A. Both components fade the button but with different speeds.

B. TouchableOpacity shows a colored highlight, TouchableHighlight fades the button.

C. TouchableOpacity fades the button, TouchableHighlight shows a colored highlight.

D. Both components show a colored highlight but with different colors.

Solution

1. Step 1: Understand TouchableOpacity behavior

   TouchableOpacity reduces the opacity of the button to create a fading effect on tap.

2. Step 2: Understand TouchableHighlight behavior

   TouchableHighlight adds a colored overlay highlight on tap instead of fading.

3. Final Answer:

   TouchableOpacity fades the button, TouchableHighlight shows a colored highlight. -> Option C

4. Quick Check:

   Opacity fade = TouchableOpacity, Highlight color = TouchableHighlight [OK]

Hint: Opacity fade means TouchableOpacity, colored highlight means TouchableHighlight [OK]

Common Mistakes:

• Confusing which component fades vs highlights
• Thinking both behave the same visually
• Assuming TouchableHighlight fades opacity

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

easy

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

B. import TouchableOpacity from 'react-native';

C. import TouchableOpacity from 'react-native-touchable';

D. import { TouchableOpacity } from 'react-native-touchable';

Solution

1. Step 1: Check React Native import syntax

   React Native exports TouchableOpacity as a named export, so it must be imported with curly braces.

2. Step 2: Verify package source

   TouchableOpacity is part of the core react-native package, not a separate package.

3. Final Answer:

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

4. Quick Check:

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

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

Common Mistakes:

• Using default import without braces
• Importing from wrong package name
• Missing curly braces around TouchableOpacity

3. What will happen when the user taps the button in this code snippet?

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

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

medium

A. The button fades out on tap and shows an alert.

B. The button shows a red highlight on tap and shows an alert.

C. Nothing happens on tap because underlayColor is invalid.

D. The button shows a yellow highlight on tap and shows an alert.

Solution

1. Step 1: Identify component behavior

   TouchableHighlight uses the underlayColor prop to show a colored highlight when pressed.

2. Step 2: Check the underlayColor value and onPress

   The underlayColor is set to 'yellow', so the highlight will be yellow. The onPress triggers an alert with 'Pressed!'.

3. Final Answer:

   The button shows a yellow highlight on tap and shows an alert. -> Option D

4. Quick Check:

   TouchableHighlight + underlayColor yellow + alert onPress = The button shows a yellow highlight on tap and shows an alert. [OK]

Hint: TouchableHighlight uses underlayColor for highlight color [OK]

Common Mistakes:

• Confusing fade effect with TouchableOpacity
• Assuming underlayColor changes text color
• Ignoring the alert onPress effect

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

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

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

medium

A. Missing closing bracket ">" on TouchableOpacity opening tag.

B. Incorrect import statement for TouchableOpacity.

C. The onPress function should return a value.

D. Text component cannot be a child of TouchableOpacity.

Solution

1. Step 1: Check JSX syntax for TouchableOpacity

   The opening tag for TouchableOpacity is missing the closing ">" before the child Text component.

2. Step 2: Verify other parts

   Imports are correct, onPress does not need to return a value, and Text can be a child of TouchableOpacity.

3. Final Answer:

   Missing closing bracket ">" on TouchableOpacity opening tag. -> Option A

4. Quick Check:

   JSX tags must close properly = Missing closing bracket ">" on TouchableOpacity opening tag. [OK]

Hint: Check JSX tags for missing > or /> [OK]

Common Mistakes:

• Ignoring missing closing bracket errors
• Thinking onPress must return a value
• Believing Text cannot be child of TouchableOpacity

5. You want a button that shows a blue highlight when pressed and also reduces opacity slightly. Which approach correctly combines TouchableHighlight and TouchableOpacity to achieve this effect?

hard

A. Wrap TouchableHighlight inside TouchableOpacity with underlayColor='blue'.

B. Wrap TouchableOpacity inside TouchableHighlight with underlayColor='blue'.

C. Use only TouchableOpacity with underlayColor='blue' prop.

D. Use only TouchableHighlight with activeOpacity={0.5} prop.

Solution

1. Step 1: Understand each component's effect

   TouchableHighlight provides the colored highlight via underlayColor. TouchableOpacity controls opacity fade via activeOpacity.

2. Step 2: Combine effects by nesting

   Wrapping TouchableOpacity inside TouchableHighlight applies the highlight outside and opacity fade inside, combining both effects.

3. Step 3: Check other options

   Wrap TouchableHighlight inside TouchableOpacity with underlayColor='blue'. reverses nesting, which breaks highlight effect. Options C and D misuse props not supported by those components.

4. Final Answer:

   Wrap TouchableOpacity inside TouchableHighlight with underlayColor='blue'. -> Option B

5. Quick Check:

   Nesting TouchableOpacity inside TouchableHighlight = Wrap TouchableOpacity inside TouchableHighlight with underlayColor='blue'. [OK]

Hint: Wrap opacity inside highlight to combine effects [OK]

Common Mistakes:

• Reversing component nesting order
• Using unsupported props on components
• Expecting one component to do both effects alone