react-native-banner-carousel
Swiper component for React Native. Compatible with Android & iOS. Pull requests are very welcome!
Show Case
Install
$ npm install --save react-native-banner-carousel
Usage
;;; const BannerWidth = Dimensionswidth;const BannerHeight = 260; const images = "http://xxx.com/1.png" "http://xxx.com/2.png" "http://xxx.com/3.png"; Component { return <View key=index> <Image style= width: BannerWidth height: BannerHeight source= uri: image /> </View> ; } { return <View style=stylescontainer> <Carousel autoplay autoplayTimeout=5000 loop index=0 pageSize=BannerWidth > images </Carousel> </View> ; } const styles = StyleSheet;
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
interface PageIndicatorConfig pageNum: number; childrenNum: number; loop: boolean; scrollValue: AnimatedValue;
Custom Pagination Indicator
Here is an example for custom pagination indicator:
{ const childrenNum pageNum loop scrollValue = config; if pageNum === 0 return null; const indicators: JSX.Element = ; for let i = 0; i < pageNum; i++ indicators; let left: AnimatedAnimatedInterpolation; if pageNum === 1 left = thisstatescrollValue; else if !loop left = thisstatescrollValue; else left = thisstatescrollValue; return <View style= position: 'absolute' alignSelf: 'center' flexDirection: 'row' bottom: 10 > indicators <AnimatedView style= thispropspageIndicatorStyle thispropsactivePageIndicatorStyle left: left /> </View> ;}