@buhissopro/react-native-image-slider-show

react-native-image-slider-show

A quick and easy slideshow for react native. (Android & iOS)

---

Installation with expo

expo install react-native-image-slider-show --save

Installation

npm install react-native-image-slider-show --save

---

Usage

import Slideshow from 'react-native-image-slider-show';

Autoplay Example

import Slideshow from 'react-native-image-slider-show';

const fetchImages = async (callback) => {
  try {
    axios.defaults.baseURL = API_BASE;
    const response = await axios.get('/');
    callback(response.data);
  } catch (error) {
    console.error(error);
  }
}

const SlideshowTest = () => {
  const [dataSource, setDataSource] = React.useState([]);
  const [position, setPosition] = React.useState(0);

  React.useEffect(() => {
    fetchImages((data) => { 
      setDataSource(data.map((url) => ({ url })))
    });  
  }, [])

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

    return () => clearInterval(toggle);
  })

  return (
    <Slideshow position={position} dataSource={dataSource} />
  )
}

---

Props

Property	Type	isRequired?	Default	Description
dataSource	bool	required	-	slideshow data
height	number	optional	200	container height
position	number	optional	-	set position slideshow
scrollEnabled	bool	optional	true	enable / disable scrolling
overlay	bool	optional	false	background overlay
indicatorSize	number	optional	16	indicator size
indicatorColor	string	optional	#CCCCCC	indicator color
indicatorSelectedColor	string	optional	#FFFFFF	indicator selected color
arrowSize	number	optional	16	arrow size
arrowLeft	object	optional	-	component arrow left
arrowRight	object	optional	-	component arrow right
onPress	func	optional	-	returns an object image and index of image pressed
onPositionChanged	func	optional	-	called when the current position is changed
containerStyle	object	optional	-	custom styles for container
titleStyle	object	-	-	custom styles for title
captionStyle	object	-	-	custom styles for caption

Forked Repo Extended Props

Property	Type	isRequired?	Default	Description
hideSideArrows	boolean	false	changing this allows you to hide the side arrows
hidePageIndicator	boolean	false	changing this allows you to hide the page indicators

---

Data Structure

// example data structure

dataSource: [
  {
    title: 'title 1',
    caption: 'caption 1',
    url: 'url 1',
  }, {
    title: 'title 1',
    caption: 'caption 1',
    url: 'url 2',
  },
]

Property	Type	Description
title	string	title
caption	string	caption
url	string / number	image (URL or a local file resource)

---

Credits

react-native-image-slider

License

MIT