React Native error: "Can't find variable: TouchableHighlight"

Question

I'm trying to create a tic tac toe board in React Native using Expo. I'm using TouchableHighlight to make the board touchable so that I can add X's and O's. When the app is run I get the following error: "Can't find variable: TouchableHighlight" (Board.js 12:6).

Board.js

import React, { Component } from 'react';
import { Text, View, Image, StyleSheet } from 'react-native';

export default class Board extends Component {

  _onPressButton() {
    console.log("you tapped the thing");
  }

  render() {
    return (
      <TouchableHighlight onPress={this._onPressButton}>
        <View style={styles.container}>
          <Image source = {require('./board.png')} style = {styles.table}/>
        </View>
      </TouchableHighlight>
    );
  }
}

const Xmark = (props) => (
  <View>
    <Image source = {require('./Xmark.png')} style = {styles.mark}/>
  </View>
);

const Omark = (props) => (
  <View>
    <Image source = {require('./Omark.png')} style = {styles.mark}/>
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 6,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
  },
  table: {
    height: 250,
    width: 250,
  },
  mark: {
    height: 25,
    width: 25,
  },
});

Is there something else I need to import? I looked at other people's code and I don't see anything significantly different. Any help is appreciated, thanks.

Answer 1

You just need to import { TouchableHighlight } from 'react-native'.