SlideShow Image How to auto change images React Native-CodePudding

import { View, StyleSheet } from "react-native";
import Slideshow from "react-native-image-slider-show";

const ImageSlider = () => {
  return (
    <View>
      <Slideshow
        dataSource={[
          {
            title: "Burger 1",
            caption: "Original  Cheezy Meat",
            url: "https://assets.epicurious.com/photos/5c745a108918ee7ab68daf79/5:4/w_3129,h_2503,c_limit/Smashburger-recipe-120219.jpg",
          },
          {
            title: "Burger 2",
            caption: "100% Original Beef",
            url: "https://www.thespruceeats.com/thmb/vJUFf6L4p8y9Cn_1pE9Z7Ua9uok=/3000x2001/filters:fill(auto,1)/indian-style-burger-1957599-hero-01-266103a4bb4e4ee7b5feb4da2d2e99da.jpg",
          },
          {
            title: "Burger 3",
            caption: "Mouthfull Of Happiness",
            url: "https://www.thespruceeats.com/thmb/l4w6PvMqsz1EjueCAh_foPmYafM=/3456x3456/smart/filters:no_upscale()/garlic-burger-patties-333503-hero-01-e4df660ff27b4e5194fdff6d703a4f83.jpg",
          },
        ]}
      />
    </View>
  );
};

const styles = StyleSheet.create({});

export default ImageSlider;

Hello there, I would like my images change itself after 5 seconds. I have tried adding autoplay={true} at my app.js but it wont work. I wonder are there any ways to do it. Thank you.

CodePudding user response：

You should be able to achieve the automated slider by using the following adaptation of the react-native-image-slider-show documentation.

a working example can be found here

import React, { useState, useEffect } from 'react';
import { View, StyleSheet } from "react-native";
import Slideshow from "react-native-image-slider-show";

const dataSource = [
  {
    title: "Burger 1",
    caption: "Original  Cheezy Meat",
    url:
      "https://assets.epicurious.com/photos/5c745a108918ee7ab68daf79/5:4/w_3129,h_2503,c_limit/Smashburger-recipe-120219.jpg"
  },
  {
    title: "Burger 2",
    caption: "100% Original Beef",
    url:
      "https://www.thespruceeats.com/thmb/vJUFf6L4p8y9Cn_1pE9Z7Ua9uok=/3000x2001/filters:fill(auto,1)/indian-style-burger-1957599-hero-01-266103a4bb4e4ee7b5feb4da2d2e99da.jpg"
  },
  {
    title: "Burger 3",
    caption: "Mouthfull Of Happiness",
    url:
      "https://www.thespruceeats.com/thmb/l4w6PvMqsz1EjueCAh_foPmYafM=/3456x3456/smart/filters:no_upscale()/garlic-burger-patties-333503-hero-01-e4df660ff27b4e5194fdff6d703a4f83.jpg"
  }
];

const ImageSlider = () => {
  const [position, setPosition] = useState(0)

  useEffect(()=>{
    const toggle = setInterval(() => {
      setPosition(position === dataSource.length - 1 ? 0 : position   1);
    }, 3000);

    return () => clearInterval(toggle);
  })
  
  return (
    <View>
      <Slideshow position={position} dataSource={dataSource} />
    </View>
  );
};

const styles = StyleSheet.create({});

export default ImageSlider;