react-native-slider-pagination v1.0.2

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.

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

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

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

initialPage
Initial page that the slider should be rendered on.

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

containerClassName
Classname of the container of the component.

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

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

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

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

sliderClassName
Classname of the Slider component.

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

sliderStyle
Style object for the Slider.

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

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

minimumTrackTintColor

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

maximumTrackTintColor

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

thumbTintColor

Color of the thumb on the slider.