How to navigate from carousel slide? - react-native

Question

I just started to learn React Native and don't understand how to make possible navigation from carousel slides. I have a carousel with 4 slides in it and I want to make it possible for a user to go to specific pages after pressing on each of these slides. For every slide, there is a different page.
I tried const navigation = useNavigation(); method, but it did not work, because a slide is not a function.
I have routes in my App.js:
export default function App () {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home"
screenOptions={{contentStyle:{backgroundColor:'#FFFFFF'}, headerTitle: (props) => <LogoTitle {...props} />, headerRight: (props) => <RightTitle {...props} /> }}>
<Stack.Screen name="Home" component={HomeScreen} />
<Stack.Screen name="ItemsCategories" component={ItemsCategories} />
<Stack.Screen name="Feature1" component={Feature1} />
<Stack.Screen name="Feature2" component={Feature2} />
</Stack.Navigator>
</NavigationContainer>
);
}
Here is my code of the Carousel so far:
import React, {Component} from 'react';
import { Text, View, SafeAreaView, Image, ImageBackground, StyleSheet, Pressable, navigation } from 'react-native';
import Carousel from 'react-native-snap-carousel';
import { useNavigation } from '#react-navigation/native';
import { NavigationContainer } from '#react-navigation/native';
import { createNativeStackNavigator } from '#react-navigation/native-stack';
const horizontalMargin = 20;
const slideWidth = 280;
const slideHeight=470
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
flex: 1,
justifyContent: "center"
},
text: {
color: "white",
fontSize: 42,
lineHeight: 84,
fontWeight: "bold",
textAlign: "center",
textShadowColor: 'rgba(0, 0, 0, 0.75)',
textShadowOffset: {width: -1, height: 1},
textShadowRadius: 10,
width: 350
},
safe: {
position: 'absolute',
left: 0,
top: 0,
height: 360 ,
paddingTop: 10,
paddingBottom: 1
}
});
export default class HomeCarousel extends Component {
constructor(props){
super(props);
this.state = {
activeIndex:0,
carouselItems: [
{
navigate: "Feature1",
image: require('./assets/feature1.png'),
title:"Feature1",
},
{
navigate: "Feature2",
image: require('./assets/feature2.png'),
title:"Feature2",
},
{
navigate: "Feature3",
image: require('./assets/feature3.png'),
title:"Feature3",
},
{
navigate: "Feature 4",
image: require('./assets/feature4.png'),
title:"Feature 4",
},
]
}
}
_renderItem({item,index}){
return (
<Pressable onPress={()=>navigation.navigate(item.navigate)}>
<View style={{
backgroundColor:'floralwhite',
borderRadius: 5,
height: 360,
padding: 0,
marginLeft: 0,
marginRight: 0, }}>
<ImageBackground source={item.image} resizeMode="cover" style={styles.image}>
<Text style={styles.text}>{item.title}</Text>
</ImageBackground>
</View>
</Pressable>
)
}
render() {
return (
<SafeAreaView style={styles.safe}>
<View style={{ flex: 1, flexDirection:'row', justifyContent: "center" }}>
<Carousel
layout={"default"}
ref={ref => this.carousel = ref}
data={this.state.carouselItems}
sliderWidth={400}
itemWidth={400}
renderItem={this._renderItem}
onSnapToItem = { index => this.setState({activeIndex:index}) } />
</View>
</SafeAreaView>
);
}
}

Answer 1

If you just make HomeCarousel a functional component then you can do this below and it will work.
export default function HomeCarousel() {
const [activeIndex,setActiveIndex] = React.useState(0); // search useState online
const [carouselItems,setCarouselItems] = React.useState( [
{
navigate: "Feature1",
image: require('./assets/feature1.png'),
title:"Feature1",
},
{
navigate: "Feature2",
image: require('./assets/feature2.png'),
title:"Feature2",
},
{
navigate: "Feature3",
image: require('./assets/feature3.png'),
title:"Feature3",
},
{
navigate: "Feature 4",
image: require('./assets/feature4.png'),
title:"Feature 4",
},
]);
const ref = React.useRef(null); // search useRef online
const Item =({item,index})=> {
const navigation = useNavigation(); // Now you can use it
return (
<Pressable onPress={()=>navigation.navigate(item.navigate)}>
<View style={{
backgroundColor:'floralwhite',
borderRadius: 5,
height: 360,
padding: 0,
marginLeft: 0,
marginRight: 0, }}>
<ImageBackground source={item.image} resizeMode="cover" style={styles.image}>
<Text style={styles.text}>{item.title}</Text>
</ImageBackground>
</View>
</Pressable>
)
}
return (
<SafeAreaView style={styles.safe}>
<View style={{ flex: 1, flexDirection:'row', justifyContent: "center" }}>
<Carousel
layout={"default"}
ref={ref}
data={carouselItems}
sliderWidth={400}
itemWidth={400}
renderItem={Item}
onSnapToItem = { index =>setActiveIndex(index) } />
</View>
</SafeAreaView>
);
}