1 | # `<Pagination />` component
|
2 |
|
3 | Starting with version `2.4.0`, a customizable `<Pagination />` component has been added. This is how it looks like with its default configuration:
|
4 |
|
5 | ![react-native-snap-carousel pagination](https://i.imgur.com/FLQcGGL.gif)
|
6 |
|
7 | ## Table of contents
|
8 |
|
9 | 1. [Props](#props)
|
10 | 1. [Note on dots' colors](#note-on-dots-colors)
|
11 | 1. [Usage](#usage)
|
12 |
|
13 | ## Props
|
14 |
|
15 | Prop | Description | Type | Default
|
16 | ------ | ------ | ------ | ------
|
17 | **`activeDotIndex`** | Index of the currently active dot | Number | **Required**
|
18 | **`dotsLength`** | Number of dots to display | Number | **Required**
|
19 | `activeOpacity` | Opacity of the dot when tapped. The prop has no effect if `tappableDots` hasn't been set to `true`. | Number | 1
|
20 | `carouselRef` | Reference to the `Carousel` component to which pagination is linked. Needed only when setting `tappableDots` to `true`. | Object | `undefined`
|
21 | `containerStyle` | Style for dots' container that will be merged with the default one | View Style Object | `{}`
|
22 | `dotColor` | Background color of the active dot. **Use this if you want to animate the change between active and inactive colors**, and always in conjunction with `inactiveDotColor` (see [notes](#dots-colors)). | String | `undefined`
|
23 | `dotContainerStyle` | Style of each dot's container. Use this if you need to specify styles that wouldn't have any effect when defined with `dotStyle` (such as `flex`). | View Style Object | `{}`
|
24 | `dotElement` | Optional custom active dot element that will replace the default one. The element will receive a prop `active` set to `true` as well as a prop `index`. | React element | `undefined`
|
25 | `dotStyle` | Dots' style that will be merged with the default one | View Style Object | `{}`
|
26 | `inactiveDotColor` | Background color of the inactive dots. **Use this if you want to animate the change between active and inactive colors**, and always in conjunction with `dotColor` (see [notes](#dots-colors)). | String | `undefined`
|
27 | `inactiveDotElement` | Optional custom inactive dot element that will replace the default one. The element will receive a prop `active` set to `false` as well as a prop `index` | React element | `undefined`
|
28 | `inactiveDotOpacity` | Value of the opacity effect applied to inactive dots | Number | `0.5`
|
29 | `inactiveDotScale` | Value of the 'scale' transform applied to inactive dots | Number | `0.5`
|
30 | `inactiveDotStyle` | Dots' style that will be applied to inactive elements | View Style Object | `{}`
|
31 | `renderDots` | Function that gives you complete control over pagination's rendering. It will receive three parameters : `(activeIndex, total, context)`. This can be especially useful in order to replace dots with numbers. **:warning: You will need to provide your own logic to handle taps. See [this comment](https://github.com/archriss/react-native-snap-carousel/issues/273#issuecomment-368295203) for more info.** | Function | `undefined`
|
32 | `tappableDots` | Make default dots tappable, e.g. your carousel will slide to the corresponding item. Note that `carouselRef` must be specified for this to work. | Boolean | `false`
|
33 | `vertical` | Whether to layout dots vertically or horizontally | Boolean | `false`
|
34 |
|
35 | ## Note on dots' colors
|
36 | If your active and inactive dots aren't of the same color, you have a choice to make:
|
37 | 1. either animate the color transition by specifying both `dotColor` and `inactiveDotColor`
|
38 | 1. or setting `{ backgroundColor }` in both `dotStyle` and `inactiveDotStyle`.
|
39 |
|
40 | **When animating the color transition, the dot component will no longer be able to use the native driver for scale and opacity transitions.** As stated in [React Native's doc](https://facebook.github.io/react-native/docs/animations.html#caveats), color animations aren't supported by the native driver. And, unfortunately, it doesn't seem currently possible to run native-powered and js-powered animations at the same time on the same element.
|
41 |
|
42 | Basically, this is a tradeoff between color transition and optimal smoothness. We recommended you to try the first version and, if you experiment performance drops, to settle for the second one.
|
43 |
|
44 | ## Usage
|
45 |
|
46 | Since `<Pagination />` is, purposely, a separated component, you need to connect it to your `<Carousel />` component manually. This is pretty straightforward, but here is an example to get you started.
|
47 |
|
48 | ```javascript
|
49 | import Carousel, { Pagination } from 'react-native-snap-carousel';
|
50 |
|
51 | export default class MyCarousel extends Component {
|
52 |
|
53 | _renderItem ({item, index}) {
|
54 | return <MySlideComponent data={item} />
|
55 | }
|
56 |
|
57 | get pagination () {
|
58 | const { entries, activeSlide } = this.state;
|
59 | return (
|
60 | <Pagination
|
61 | dotsLength={entries.length}
|
62 | activeDotIndex={activeSlide}
|
63 | containerStyle={{ backgroundColor: 'rgba(0, 0, 0, 0.75)' }}
|
64 | dotStyle={{
|
65 | width: 10,
|
66 | height: 10,
|
67 | borderRadius: 5,
|
68 | marginHorizontal: 8,
|
69 | backgroundColor: 'rgba(255, 255, 255, 0.92)'
|
70 | }}
|
71 | inactiveDotStyle={{
|
72 | // Define styles for inactive dots here
|
73 | }}
|
74 | inactiveDotOpacity={0.4}
|
75 | inactiveDotScale={0.6}
|
76 | />
|
77 | );
|
78 | }
|
79 |
|
80 | render () {
|
81 | return (
|
82 | <View>
|
83 | <Carousel
|
84 | data={this.state.entries}
|
85 | renderItem={this._renderItem}
|
86 | onSnapToItem={(index) => this.setState({ activeSlide: index }) }
|
87 | />
|
88 | { this.pagination }
|
89 | </View>
|
90 | );
|
91 | }
|
92 | ```
|