React Native Onboarding Screen

Link Here

import React, { useState, useRef, useEffect } from "react";
import {
  View,
  Text,
  Image,
  StyleSheet,
  useWindowDimensions,
  FlatList,
  Animated,
  Button,
  TouchableOpacity,
} from "react-native";
import { Styles } from "../YInput/style";
import { data } from "./OnboardingData";

let ItemImage = ({ src, description, title, currentIndex }) => {
  let { width } = useWindowDimensions();
  return (
     
      
      
        {title}
        {description}
      
    
  );
};

function index({ navigation }) {
  let flatListRef = useRef();
  let [currentIndex, setCurrentIndex] = useState(null);
  let [viewableItems, setViewableItems] = useState([]);

  let handleItemChanged = useRef(({ viewableItems }) => {
    setViewableItems(viewableItems);
  });
useEffect(()=>{
  let id = setInterval()
},[currentIndex])

  useEffect(() => {
    if (!viewableItems[0] || viewableItems[0].index === currentIndex) return;
    else {
      setCurrentIndex(viewableItems[0].index);
      console.log(viewableItems[0].index);
    }
    
  }, [viewableItems]);

  // let handleItemChanged = ({ viewableItems, changed }) => {
  //   console.log("Visible items are", viewableItems);
  //   console.log("Changed in this iteration", changed);
  // };

  const handleNext = () => {
    if (currentIndex == data.length - 1) return;

    flatListRef.current.scrollToIndex({
      animated: true,
      index: currentIndex + 1,
    });
  };

  const handlePrevious = () => {
    if (currentIndex == 0) return;

    flatListRef.current.scrollToIndex({
      animated: true,
      index: currentIndex - 1,
    });
  };
  return (
    
      
        {currentIndex > 0 && (
          
             🔙 
          
        )}
      
       item.id + ""}
        scrollEventThrottle={140}
        // onScroll={Animated.event([{ nativeEvent }])}
        renderItem={({ item }) => {
          return (
            
          );
        }}
      />

      {/* bottom */}
      
        {currentIndex < data.length - 1 && (
           {
              navigation.navigate("Home");
            }}
          >
            Skip
          
        )}
        
          {data.map((_, i) => {
            return (
              
            );
          })}
        

        {currentIndex < data.length - 1 ? (
          
            Next
          
        ) : (
           navigation.navigate("Home")}
            style={[
              styles.btn,
              { backgroundColor: "steelblue", paddingHorizontal: 10 },
            ]}
          >
            
              Finish
            
          
        )}
      
      {/* end-bottom */}
    
  );
}

export default index;

let styles = StyleSheet.create({
  container: {
    flex: 1,
    // justifyContent: "center",
    // alignItems: "center",
    backgroundColor: "mediumvioletred",
  },
  img: {
    width: 400,
    height: 400,
    resizeMode: "contain",
    flex: 0.7,
    backgroundColor: "white",
  },
  itemDiv: {
    backgroundColor: "white",
    // flex: 1,
    justifyContent: "center",
    alignItems: "center",
    // paddingRight: 10,
  },
  title: {
    fontWeight: "bold",
    fontFamily: "",
    fontSize: 25,
    marginBottom: 10,
    textAlign: "center",
    color: "#493d8a",
  },
  description: {
    textAlign: "center",
    fontSize: 15,
    margin: 10,
    paddingHorizontal: 60,
    fontWeight: "400",
    color: "gray",
    opacity: 0.6,
    lineHeight: 25,
  },
  topBar: {
    width: "100%",
    marginTop: 0,
    paddingHorizontal: 15,
    paddingTop: 10,
    backgroundColor: "white",
  },
  bottomBtn: {
    flexDirection: "row",
    justifyContent: "space-between",
    alignItems: "center",
    margin: 10,
    padding: 10,
  },
  btn: {
    backgroundColor: "purple",
    paddingHorizontal: 16,
    padding: 4,
    color: "white",
    marginHorizontal: 10,
    borderRadius: 10,
  },
  dots: {
    // backgroundColor: "gray",
    flexDirection: "row",
    padding: 10,
  },
  dot: {
    width: 10,
    height: 10,
    margin: 3,
    backgroundColor: "gray",
    borderRadius: 10,
  },
});