Fully animated and cross-platform component for react native

React-Native-Timed-Slideshow

A Javascript slideshow component for React-Native (Android and iOS). React-Native-Timed-Slideshow, as the name suggests, is a Slideshow component with timed animation. It uses Animated library from React-Native, with native driver (only native animations).

Installation

npm install react-native-timed-slideshow --save

Basic Usage

import TimedSlideshow from 'react-native-timed-slideshow';
	render() {
		const items = [
			{
				uri: "http://www.lovethemountains.co.uk/wp-content/uploads/2017/05/New-Outdoor-Sports-and-Music-Festival-For-Wales-4.jpg",
				title: "Michael Malik",
				text: "Minnesota, USA",
			},
			{
				uri: "http://blog.adrenaline-hunter.com/wp-content/uploads/2018/05/bungee-jumping-barcelona-1680x980.jpg",
				title: "Victor Fallon",
				text: "Val di Sole, Italy",
				duration: 3000
			},
			{
				uri: "https://greatist.com/sites/default/files/Running_Mountain.jpg",
				title: "Mary Gomes",
				text: "Alps",
				fullWidth: true
			}
		]

		return (
			<TimedSlideshow
				items={items}
			/>
		);
	}

API

Properties

Property Type Default Description
items [object] - (Required at least 2 items) Sliders items.
duration number 5000 Each slide duration on screen (in milliseconds)
index number 0 First Slide to appear
extraSpacing number 10% of width Extra spacing each slide will have. This extra spacing basically represents the width that each image slides (eg. 300)
fullWidth* boolean false Option that makes the image show it's full width in the animation, by using the Image.getSize from React-Native (later calculated to keep the screens ratio), and if true it will override the extraSpacing if it's set
progressBarColor string null Option to change progress bar color
showProgressBar boolean true Option to show or hide progress bar
progressBarDirection string null Three options (fromLeft, fromRight, middle - null)
slideDirection string "even" Direction of the each slide animation. Values are "even", "odd", "left", "right". Basically even means first slide goes from left-to-right, second slide goes from right-to-left and so on. Odd is opposite, left means all slides com from left-to-right and right means all slides come from right-to-left
footerStyle style null Footer titles style
titleStyle style null Footer titles style
textStyle style null Footer text style
renderItem func null Complete control of the rendered item, with one object param with 3 params ({ item, index, focusedIndex })
renderFooter func null Complete control of the footer, with one object param with 5 params ({ item, index, focusedIndex, defaultStyle, animation }) the animation param is an object with the following { titleTranslateY, textTranslateY, opacity }
renderIcon func null Complete control of the icon rendered in the footer, with on param ({ snapToNext }) function to snap immediately to the next slide

Items Properties

Property Type Description
uri string/number The image url or number (if local image, the require returns a number instead)
title string The slide item's title
text string The slide item's text or description
duration number The individual slide time, this way you can customize individually how much time each slide can appear on screen
direction string The individual slide direction animation, Values are "even", "odd", "left", "right"
extraSpacing number The individual slide extra spacing, this way you can define how much width the image can slide on screen
fullWidth* boolean The individual slide width, if true the Image.getSize from React-Native will calculate the image's full width (later calculated to keep the screens ratio), and if true it will override the extraSpacing if it's set

*This function is explained in the React-Native docs in the Image component if you want to check-out

Image Wrapper

The Image-Wrapper is a sub-component from Timed-Slideshow, it controls each image individual animation.

Usage

import { ImageWrapper } from 'react-native-timed-slideshow';
// Basic Usage
<ImageWrapper uri='https://greatist.com/sites/default/files/Running_Mountain.jpg' />

Properties

Property Type Description
uri string/number The image url or number (if local image, the require returns a number instead)
index number The image's index
duration number Duration of the images animation
focusedIndex number The focused image index
extraSpacing number Extra spacing of the images animation
fullWidth boolean The individual slide width, if true the Image.getSize from React-Native will calculate the image's full width (later calculated to keep the screens ratio), and if true it will override the extraSpacing if it's set
direction string The individual slide direction animation, Values are "even", "odd", "left", "right"

GitHub