react-native-image-page

react-native image carousel, with zoom-pan gestures and full screen support. Work on both iOS and Android

Install

``
npm install react-native-image-page
`

Demo

Android	iOS

Props

Most of the props in react-native-image-carousel is inherit from https://github.com/Canner/react-native-carousel-view

`js
type Props = {
hideIndicators: boolean, // Set to true to hide the indicators
indicatorColor: string, // Active indicator color
indicatorSize: number, // Indicator bullet size
inactiveIndicatorColor: string, // Inactive indicator color
indicatorAtBottom: boolean, // Set to false to show the indicators at the top
indicatorOffset: number, // Indicator relative position from top or bottom
indicatorText: string, // Active indicator content ( You can customize to use any Unicode character )
inactiveIndicatorText: string, // Inactive indicator content ( You can customize to use any Unicode character )
width: ?number, // the width of the carousel
height: number, // the height of the carousel
initialPage: number, // initial start page
indicatorSpace: number, // space between each indicator
animate: boolean, // Enable carousel autoplay
delay: number, // Set Animation delay between slides
loop: boolean, // Allow infinite looped animation. Depends on Prop {...animate} set to true.
contentContainerStyle?: {[attr: string]: any}, // content container style, in Android this will pass to ViewPagerAndroid style props, in iOS this will pass to ScrollView contentContainerStyle props.
children: any,
onPageChange?: (number) => void, // Called when the active page changes
}
`

ImageCarousel props

`js
type ImageCarouselProps = {
images: {uri: string}[],
renderHeader: ({[key: string]: any}, number) => void,
renderFooter: ({[key: string]: any}, number) => void,
}
`

Example

`js

import React, {Component} from 'react';
import {
AppRegistry,
View,
} from 'react-native';
import ImageCarousel from 'react-native-image-carousel';

export default class example extends Component {
render() {
return (
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
height={200}
delay={2000}
indicatorSize={10}
indicatorOffset={-20}
indicatorText="✽"
indicatorColor="red"
renderHeader={(datum, i) => Header Image {i}}
renderFooter={(datum, i) => Footer {i}}
images={[{
uri: 'https://avatars3.githubusercontent.com/u/7250217?v=4&s=200',
}, {
uri: 'https://avatars7.githubusercontent.com/u/1216029?v=4&s=460',
}, {
uri: 'https://via.placeholder.com/350x150',
}, {
uri: 'https://via.placeholder.com/100x200',
}]}
/>

);
}
}

AppRegistry.registerComponent('example', () => example);

``

See also

based on:

- react-native carousel, support in both Android and iOS

https://github.com/Canner/react-native-carousel-view

License

Apache 2.0