https://github.com/f111fei/react-native-banner-carousel
a carousel component for React Native
https://github.com/f111fei/react-native-banner-carousel
carousel react-native react-native-carousel react-native-swiper react-native-viewpager swiper
Last synced: 3 months ago
JSON representation
a carousel component for React Native
- Host: GitHub
- URL: https://github.com/f111fei/react-native-banner-carousel
- Owner: f111fei
- Created: 2017-08-01T10:55:50.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2022-06-19T23:45:00.000Z (about 3 years ago)
- Last Synced: 2025-04-03T01:09:28.329Z (3 months ago)
- Topics: carousel, react-native, react-native-carousel, react-native-swiper, react-native-viewpager, swiper
- Language: TypeScript
- Size: 3.19 MB
- Stars: 103
- Watchers: 4
- Forks: 47
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# react-native-banner-carousel
Swiper component for React Native. Compatible with Android & iOS. Pull requests are very welcome!
## Show Case
[explore in expo](https://expo.io/@xzper/react-native-banner-carousel-example)
## Install
```
$ npm install --save react-native-banner-carousel
```
## Usage
```js
import React from 'react';
import Carousel from 'react-native-banner-carousel';
import { StyleSheet, Image, View, Dimensions } from 'react-native';
const BannerWidth = Dimensions.get('window').width;
const BannerHeight = 260;
const images = [
"http://xxx.com/1.png",
"http://xxx.com/2.png",
"http://xxx.com/3.png"
];
export default class App extends React.Component {
renderPage(image, index) {
return (
);
}
render() {
return (
{images.map((image, index) => this.renderPage(image, index))}
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
justifyContent: 'center'
},
});
```
## Properties
### Base
| Prop | Default | Type | Description |
| :------------ |:---------------:| :---------------:| :-----|
| **pageSize** | windowWidth | `number` | the size of carousel page, must be the same for all of them. Required with horizontal carousel. |
| loop | true | `bool` | Set to `false` to disable continuous loop mode. |
| index | 0 | `number` | Index number of initial slide. |
| autoplay | true | `bool` | Set to `true` enable auto play mode. |
| autoplayTimeout | 5000 | `number` | Delay between auto play transitions (in Millisecond). |
| animation | - | `func` | function that returns a React Native Animated configuration. `(animate: Animated.Value, toValue: number) => Animated.CompositeAnimation;` |
| onPageChanged | - | `func` | page change callback. `(index: number) => void;` |
### Pagination
| Prop | Default | Type | Description |
| :------------ |:---------------:| :---------------:| :-----|
| showsPageIndicator | true | `bool` | Set to true make pagination indicator visible. |
| pageIndicatorContainerStyle | - | `style` | Custom styles will merge with the default styles. |
| pageIndicatorStyle | - | `style` | Custom styles will merge with the default styles. |
| activePageIndicatorStyle | - | `style` | Custom styles will merge with the default styles. |
| pageIndicatorOffset | 16 | `number` | The active page indicator offset when change page. |
| renderPageIndicator | - | `func` | Complete control how to render pagination. `(config: PageIndicatorConfig) => JSX.Element;`. |
#### PageIndicatorConfig
```js
interface PageIndicatorConfig {
pageNum: number;
childrenNum: number;
loop: boolean;
scrollValue: Animated.Value;
}
```
#### Custom Pagination Indicator
Here is an example for custom pagination indicator:
```js
renderIndicator(config: PageIndicatorConfig) {
const { childrenNum, pageNum, loop, scrollValue } = config;
if (pageNum === 0) {
return null;
}
const indicators: JSX.Element[] = [];
for (let i = 0; i < pageNum; i++) {
indicators.push();
}
let left: Animated.AnimatedInterpolation;
if (pageNum === 1) {
left = this.state.scrollValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 0]
});
} else if (!loop) {
left = this.state.scrollValue.interpolate({
inputRange: [0, 1],
outputRange: [0, 16]
});
} else {
left = this.state.scrollValue.interpolate({
inputRange: [0, 1, 2, childrenNum - 2, childrenNum - 1],
outputRange: [0, 0, 16, 16 * (childrenNum - 3), 16 * (childrenNum - 3)]
});
}
return (
{indicators}
);
}
```