https://github.com/chilijung/react-native-image-page
react-native image-carousel with zoom-pan gestures and full-screen support, work on both iOS and Android
https://github.com/chilijung/react-native-image-page
carousel gallery image image-gallery image-slider react-native
Last synced: over 1 year ago
JSON representation
react-native image-carousel with zoom-pan gestures and full-screen support, work on both iOS and Android
- Host: GitHub
- URL: https://github.com/chilijung/react-native-image-page
- Owner: chilijung
- Created: 2017-07-14T06:55:03.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2022-01-10T22:44:12.000Z (over 4 years ago)
- Last Synced: 2025-02-28T15:18:07.952Z (over 1 year ago)
- Topics: carousel, gallery, image, image-gallery, image-slider, react-native
- Language: JavaScript
- Homepage:
- Size: 1.03 MB
- Stars: 20
- Watchers: 3
- Forks: 8
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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-page` 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-page';
export default class example extends Component {
render() {
return (
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