react-native-image-slider

A quick and easy image slider for react native.

!GIF

Installation

``bash
npm install react-native-image-slider --save
`
or
`bash
yarn add react-native-image-slider
`

Usage

`javascript
import ImageSlider from 'react-native-image-slider';

// ...

render() {
return ( 'http://placeimg.com/640/480/any',
'http://placeimg.com/640/480/any',
'http://placeimg.com/640/480/any'
]}/>)
}
`

$3

`javascript
class Example extends Component<{}> {
render() {
const images = [
'https://placeimg.com/640/640/nature',
'https://placeimg.com/640/640/people',
'https://placeimg.com/640/640/animals',
'https://placeimg.com/640/640/beer',
];

return (


Content 1

loopBothSides
autoPlayWithInterval={3000}
images={images}
customSlide={({ index, item, style, width }) => (
// It's important to put style here because it's got offset inside



)}
customButtons={(position, move) => (

{images.map((image, index) => {
return (
key={index}
underlayColor="#ccc"
onPress={() => move(index)}
style={styles.button}
>

{index + 1}


);
})}

)}
/>

Content 2


);
}
}
`

Props

$3

rendered images

$3

function returns custom pagination buttons component, it's got position index and move to position function as arguments

$3

function returns Node with arguments index - images list index, item - anything you pass inside images prop, style - for top component of your custom slide, width` - calculated slide width

$3

activates autoplay when passed (it uses milliseconds)

$3

[BUGGY ON ANDROID] loops scroll of images, but in one direction only

$3

[IOS ONLY] same as loop, but does it in any direction

$3

called when the current position is changed

$3

used for controlled components

$3

returns an object with image url and index of image pressed

$3

styles ScrollView inside ImageSlider, you may pass height here (100% by default)

License

MIT