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.