TouchableOpacity and TouchableHighlight in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to make the button respond to touches using TouchableOpacity.

React Native

import React from 'react';
import { Text, View, [1] } from 'react-native';

export default function App() {
  return (
    <View>
      <[1] onPress={() => alert('Pressed!')}>
        <Text>Press Me</Text>
      </[1]>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

APressable

BTouchableHighlight

CButton

DTouchableOpacity

Attempts:

3 left

💡 Hint

Common Mistakes

Using Button instead of TouchableOpacity for custom touch effects.

Forgetting to import TouchableOpacity.

TouchableOpacity is used to make components respond to touches with an opacity effect.

2fill in blank

medium

Complete the code to use TouchableHighlight with a custom underlay color.

React Native

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

export default function App() {
  return (
    <View>
      <TouchableHighlight underlayColor=[1] onPress={() => alert('Pressed!')}>
        <Text>Press Here</Text>
      </TouchableHighlight>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

A'blue'

B'transparent'

C'#DDDDDD'

D'red'

Attempts:

3 left

💡 Hint

Common Mistakes

Using transparent as underlayColor which shows no effect.

Using color names that are too dark or not visible.

The underlayColor prop sets the color shown when the button is pressed. '#DDDDDD' is a light gray color.

3fill in blank

hard

Fix the error in the code by choosing the correct prop to handle press events on TouchableOpacity.

React Native

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

export default function App() {
  return (
    <View>
      <TouchableOpacity [1]={() => alert('Clicked!')}>
        <Text>Click Me</Text>
      </TouchableOpacity>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

AonClick

BonPress

ConTap

DonTouch

Attempts:

3 left

💡 Hint

Common Mistakes

Using onClick instead of onPress causes no response.

Using onTouch which is not a valid prop here.

TouchableOpacity uses the onPress prop to handle touch events, not onClick or others.

4fill in blank

hard

Fill both blanks to create a TouchableHighlight that changes underlay color and shows a message on press.

React Native

import React from 'react';
import { Text, View, [1] } from 'react-native';

export default function App() {
  return (
    <View>
      <[1] underlayColor=[2] onPress={() => alert('Hello!')}>
        <Text>Tap Me</Text>
      </[1]>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

ATouchableHighlight

BTouchableOpacity

C'#AAAAAA'

D'#FF0000'

Attempts:

3 left

💡 Hint

Common Mistakes

Using TouchableOpacity with underlayColor which it does not support.

Choosing a color that is too bright or invisible.

TouchableHighlight is imported and used with underlayColor set to a gray shade '#AAAAAA'.

5fill in blank

hard

Fill all three blanks to create a TouchableOpacity with an active opacity and a press handler.

React Native

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

export default function App() {
  return (
    <View>
      <TouchableOpacity activeOpacity=[1] onPress=[2]>
        <Text>[3]</Text>
      </TouchableOpacity>
    </View>
  );
}

Drag options to blanks, or click blank then click option'

A0.5

B() => alert('Pressed!')

CPress Me

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Setting activeOpacity to 1 means no opacity change on press.

Passing a string instead of a function to onPress.

activeOpacity controls the opacity when pressed (0.5 means half transparent). onPress is a function that shows an alert. The Text shows 'Press Me'.