Skip to content

machadogj/react-native-carousel-control

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

37 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

React Native Carousel Control

React Native Carousel with support for both iOS and Android. carousel-demo

React >= 16 -> 2.x.x React < 16 -> 1.x.x

Installation

npm install react-native-carousel-control --save

Usage

import Carousel from "react-native-carousel-control";
//...
<Carousel>
    <Text>Hello</Text>
    <Text>World!</Text>
    <Text>From carousel</Text>
</Carousel>

The carousel has the following format:

     ------------
    |      v--- page
    |-   ----   -|
    | | |    | | |
    | | |    | | |
    | | |    | | |
    |-   ----   -|
    |^-- sneak   |
    |         ^--- gap
     ------------

pageStyle

Type: PropTypes.object

The style that will be applied on the page. For example:

<Carousel pageStyle={ {backgroundColor: "white", borderRadius: 5} }>

pageWidth

Type: PropTypes.number

The width of the page. By default it will adjust to deviceWidth - 100.

initialPage

Type: PropTypes.number

The index of the initial page. The first page is 0.

onPageChange

Type: PropTypes.func

This function will be called every time the page changes.

sneak

Type: PropTypes.number

How much of the adjacent pages will display (see format above).

currentPage

Type: PropTypes.number

Update this value to move carousel to a specific page. For example:

<Carousel currentPage={ this.state.pageNumber }>

swipeThreshold

Type: PropTypes.number

How much users have to swipe to go to the next/prev page. Default: 0.5 (half the page)

License

The MIT License (MIT)

Copyright (c) 2016 Gustavo Machado machadogj@gmail.com.

About

React Native Carousel control with support for iOS and Android

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published