Receiving error when using component={TouchableOpacity} in link tag

Question

I am trying to create a navigation bar that has tabs that link to different pages. I have currently gotten it to work when I use

<Link to='/' style={styles.tabContainer}>
     <TouchableOpacity >
           <Text style={styles.tabText}>Home</Text>
     </TouchableOpacity>
</Link>

However when I long press the button I get a black filling. I have found a workaround that uses

<Link to='/' component={TouchableOpacity} style={styles.tabContainer}>
     <Text style={styles.tabText}>Home</Text>
</Link>

The black filling is no longer present, but when I use this method I get the error: undefined is not an object (evaluating 'event.defaultPrevented').

Please let me know if you need more information and thanks for any help.

Answer 1

I am going to post the answer just in case anyone makes the same mistake that I made. I was including my Touchable opacity like this:

import { TouchableOpacity } from 'react-native-gesture-handler';

the correct library to import touchable opacity from is

import { TouchableOpacity } from 'react-native'

So if you do get the error: undefined is not an object (evaluating 'event.defaultPrevented'). I would check the library that you are importing touchableOpacity from before you panick.