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

react-native-image-slider-show

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

GIF GIF

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

react native slideshow

@infinitebrahmanuniverse/nolb-_buh @everything-registry/sub-chunk-147 @zalastax/nolb-_buh

1 year ago

1 year ago

1 year ago

1 year ago