Struggling to navigate to another page upon Touch

Question

I am trying to navigate to another page when clicking an image. The way I have been doing it does not seem to be working. If someone could let me know what is causing an error that would be great!

I have provided the code below but I also created a snack you can instantly test my code Here

EDIT: You must render using IOS or android, the library is not set up for web

The snack above is definitely the quickest and easiest way to see what I am talking about; everything is set up. Just click the image and figure out the bug!

EDIT: New info regarding my project more specifically, SKeney's answer works for the stack, but not in my project specifically for some reason. I also added my app.js file that I use in my actual project for more clarification so the stack below is kind of redundant.

Code of my entire stack

  <Stack.Screen name="Home" component= {MyTabs} options={{headerShown: false}}/>
        <Stack.Screen name="ProfileScreen" component= {ProfileScreen} options={{headerShown: false}}/>
        <Stack.Screen name="MyCarousel" component= {MyCarousel} options={{headerShown: false}}/>
        <Stack.Screen name="VenueDetails" component= {VenueDetailsScreen} options={{headerShown: false}}/>
        <Stack.Screen name="ProfileSettings" component= {ProfileSettingsScreen} options={{headerShown: false}}/>
        <Stack.Screen name="FavoriteBarScreen" component= {FavoriteBarScreen} options={{headerShown: false}}/>
        <Stack.Screen name="LocationScreen" component= {LocationScreen} options={{headerShown: false}}/>
        

Thank you guys for any insight at all. I appreciate it more than you know!

Link to Docs for library https://www.npmjs.com/package/react-native-snap-carousel#showcase

const MyCarousel = (props) => {
  const [entries, setEntries] = useState([]);
  const carouselRef = useRef(null);

  useEffect(() => {
    setEntries(ENTRIES1);
  }, []);

  const renderItem = ({ item, index }, parallaxProps) => {
    return (
      <TouchableOpacity
            onPress={() => this.props.navigation.navigate('VenueDetails')}>
      <View style={styles.item}>
        
        <ParallaxImage
          source={item.thumbnail}
          containerStyle={styles.imageContainer}
          style={styles.image}
          parallaxFactor={0.4}
          {...parallaxProps}
        />

 </View>
        {/* End of View that holds it */}
      </View>
      </TouchableOpacity>
    );
  };

  return (
   
    <View style={styles.container}>
      <Carousel
        ref={carouselRef}
        sliderWidth={screenWidth}
        sliderHeight={screenWidth}
        itemWidth={screenWidth - 60}
        data={entries}
        renderItem={renderItem}
        hasParallaxImages={true}
      />
    </View>
  );
};

export default MyCarousel;

Answer 1

Your using this inside a functional component.

Should be:

            onPress={() => props.navigation.navigate('VenueDetails')}>

confirmed to work after removing this. Functional components don't have a reference to this and props should just be accessed via props from the argument of the functional component.