As I work on the onboarding screen, my goal is to navigate to a different screen when the last item is displayed or clicked instead of just logging "last item" on the console. Here's the code snippet:
import React,{useState,useRef} from 'react';
import { View, Text,StyleSheet, FlatList, Animated } from 'react-native';
import OnboardingItem from "./OnboardingItem";
import slides from "./slides"
import Paginator from './Paginator';
import NextButton from './NextButton';
import WelcomeScreen from "../../screens/WelcomeScreen"
export default Onboarding = () => {
const [currentIndex,setCurrentIndex] = useState(0);
const scrollX = useRef(new Animated.Value(0)).current;
const slidesRef = useRef(null);
const viewableItemsChanged = useRef(({viewableItems}) =>{
setCurrentIndex(viewableItems[0].index );
}).current;
const viewConfig = useRef({ viewAreaCoveragePercentThreshold:50 }).current;
const scrollTo = () => {
if(currentIndex < slides.length - 1){
slidesRef.current.scrollToIndex({index: currentIndex + 1})
}else{
console.log("last item");
}
}
return (
<View style={styles.container}>
<View style={{flex:3}}>
<FlatList
data={slides}
renderItem={({item}) => <OnboardingItem item={item} /> }
horizontal
showsHorizontalScrollIndicator={false}
pagingEnabled
bounces={false}
keyExtractor={(item) => item.id }
onScroll={Animated.event([{nativeEvent: {contentOffset:{x:scrollX} } }],{
useNativeDriver:false,
})}
scrollEventThrottle={32}
onViewableItemsChanged={viewableItemsChanged}
viewabilityConfig={viewConfig}
ref={slidesRef}
/>
</View>
<Paginator data={slides} scrollX={scrollX} />
<NextButton scrollTo={scrollTo} percentage={(currentIndex + 1 ) * (100/slides.length)} />
</View>
)
};
const styles = StyleSheet.create({
container:{
flex:1,
justifyContent:"center",
alignItems:"center"
}
})
Here is the navigation setup which includes the Welcome Screen:
import React from "react";
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import LoginScreen from "../screens/LoginScreen";
import RegisterScreen from "../screens/RegisterScreen";
import WelcomeScreen from "../screens/WelcomeScreen";
import Onboarding from "../components/Getstarted/Onboarding"
const Stack = createNativeStackNavigator();
const AuthNavigator = () => (
<Stack.Navigator>
<Stack.Screen
name="Welcome"
component={WelcomeScreen}
options={{ headerShown: false }}
/>
<Stack.Screen name="Login" component={LoginScreen} />
<Stack.Screen name="Register" component={RegisterScreen} />
</Stack.Navigator>
);
export default AuthNavigator;
Despite considerable effort, I am facing difficulties navigating properly within my project. Any assistance with resolving this issue would be greatly appreciated.