react-native-slider-pagination

A React Native component that renders a slider pagination.

By installing this component you can paginate like this

You can customize color and style like so

Installation

Install react-native-slider-pagination with npm:

$ npm install react-native-slider-pagination --save

The easiest way to get going

import { SliderPaginationView } from 'react-native-slider-pagination';

//Other code here

render() {
    const your_function_name = (pageNum) => {
        //pageNum is the page number selected.
    };
    <SliderPaginationView
        pageCount={10}
        onPageChange={your_function_name}
    />
}

Since @react-native-community/slider, a dependency, is incompatible with Expo, you will need to set up the React Native CLI environment. More about that here.

Props:

pageCount
previousLabel
nextLabel
onPageChange
initialPage
disableInitialCallback
containerClassName
previousClassName
nextClassName
previousLinkClassName
nextLinkClassName
sliderClassName
disabledPageLabel
sliderStyle
pageLabelSelectedStyle
pageLabelUnselectedStyle minimumTrackTintColor maximumTrackTintColor thumbTintColor

pageCount
Number of pages that will be displayed on the slider.

Type	Required
number	Yes

previousLabel
Fragment that will be used as the previous page label.

Type	Required
node	No

nextLabel
Fragment that will be used as the next page label.

Type	Required
node	No

onPageChange
Callback that is called when a page is selected. The selected page number is passed as a parameter.

Type	Required
func	No

initialPage
Initial page that the slider should be rendered on.

Type	Required
number	No

disableInitialCallback
Boolean that can disable onPageChange when the component is rendered.

Type	Required
bool	No

containerClassName
Classname of the container of the component.

Type	Required
string	No

previousClassName
Classname of the view that contains the TouchableOpacity component of the previous label.

Type	Required
string	No

nextClassName
Classname of the view that contains the TouchableOpacity component of the next label.

Type	Required
string	No

previousLinkClassName
Classname of the TouchableOpacity component that contains the previous label.

Type	Required
string	No

nextLinkClassName
Classname of the TouchableOpacity component that contains the next label.

Type	Required
string	No

sliderClassName
Classname of the Slider component.

Type	Required
string	No

disabledPageLabel
Boolean that can disable the Page label above the slider pagination.

Type	Required
bool	No

sliderStyle
Style object for the Slider.

Type	Required
object	No

pageLabelSelectedStyle
Style object of the page label when it shows the current page.

Type	Required
object	No

pageLabelUnselectedStyle
Style object of the page label when it shows pages other than the current page.

Type	Required
object	No

minimumTrackTintColor

Color of the track left of the thumb on the slider.

Type	Required
string	No

maximumTrackTintColor

Color of the track right of the thumb on the slider.

Type	Required
string	No

thumbTintColor

Color of the thumb on the slider.

Type	Required
string	No