Building an App Introduction Slider in React Native

  "dependencies": {
    "@react-native-community/masked-view": "^0.1.10",
    "@react-navigation/bottom-tabs": "^5.7.1",
    "@react-navigation/native": "^5.7.0",
    "@react-navigation/stack": "^5.7.0",
    "axios": "^0.19.2",
    "react": "16.13.1",
    "react-native": "0.63.1",
    "react-native-app-intro-slider": "^4.0.4",
    "react-native-gesture-handler": "^1.6.1",
    "react-native-loading-spinner-overlay": "^1.1.0",
    "react-native-reanimated": "^1.9.0",
    "react-native-safe-area-context": "^3.1.1",
    "react-native-screens": "^2.9.0",
    "react-native-vector-icons": "^7.0.0",
    "react-redux": "^7.2.0",
    "redux": "^4.0.5"
  },

import  React ,{useEffect,useState}from 'react';
import { View, Text,StyleSheet,Image,Dimensions} from 'react-native';
import AppIntroSlider from 'react-native-app-intro-slider';
import CallApi from '../Componet/Api';
import Icon from 'react-native-vector-icons/MaterialIcons';
const {height} = Dimensions.get('window');
Icon.loadFont();
const Intro=({navigation})=> {
  const [SliderData, setSliderData] = useState([]);
  useEffect(() => {
    CallApiIntro();
  }, [])

  const CallApiIntro=()=>{
    CallApi('get','intro','body',null).then(({data,message,status})=>{
      console.info(data)
      setSliderData(data.intro_data)
    }).catch(err=>{
     console.info(err)
  })
  }
  const _renderDoneButton = () => {
    return (
      <View style={styles.buttonCircle}>
        <Icon
          name="done"
          color="rgba(255, 255, 255, .9)"
          size={24}
        />
      </View>
    );
  };
const  _keyExtractor = (item) => item.label;
const   _renderNextButton = () => {
  return (
    <View style={styles.buttonCircle}>
      <Icon
        name="navigate-next"
        color="rgba(255, 255, 255, .9)"
        size={24}
      />
    </View>
  );
};
const   _RenderPreButton = () => {
  return (
    <View style={styles.buttonCircle}>
      <Icon
        name="navigate-before"
        color="rgba(255, 255, 255, .9)"
        size={24}
      />
    </View>
  );
};
  const  _renderItem = ({ item },index) => {
    return (
      <View key={index} style={styles.slide}>
        <Text style={styles.title}>{item.label}</Text>
        <Image source={{uri: item.image}} style={styles.image}/>
        <Text style={styles.text}>{item.details}</Text>
      </View>
    );
  }
  const _onDone=()=>{
       
  }
    return (
      <View style={{ flex: 1,backgroundColor:'white'}}>
       <AppIntroSlider renderItem={_renderItem} 
       showSkipButton
       showPrevButton
       keyExtractor={_keyExtractor}
       activeDotStyle={{backgroundColor: '#FF5722'}}
       renderPrevButton={_RenderPreButton}
       renderNextButton={_renderNextButton}
       renderDoneButton={_renderDoneButton}
       data={SliderData} onDone={_onDone}/>
      </View>
    );
  }
  const styles = StyleSheet.create({
    buttonCircle: {
      width: 40,
      height: 40,
      backgroundColor:"rgba(255, 87, 34, .9)",
      borderRadius: 20,
      justifyContent: 'center',
      alignItems: 'center',
    },
    slide: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'space-evenly',
    },
    image: {
      width: '100%',
      height:height/2.8,
      resizeMode:'contain'
    },
    text: {
      color: 'black',
      fontSize:18,
      textAlign: 'center',
      margin: 10,
    },
    title: {
      fontSize: 25,
      fontWeight:'bold',
      width:'90%',
      color: 'black',
      textAlign: 'center',
    }
  });
  export default Intro;