react-native-pagecontrol

React Native binding to the iOS UIPageControl.

Installation with rnpm

1. npm install --save react-native-pagecontrol
2. rnpm link react-native-pagecontrol

Click here to get more information about linking libraries in React Native.

Documentation

Supported properties:

• currentPage (number) - The current page, shown by the receiver as a white dot.
• numberOfPages (number) - The number of pages the receiver shows (as dots).
• hidesForSinglePage (boolean) - A Boolean value that controls whether the page control is hidden when there is only one page.
• pageIndicatorTintColor (string) - The tint color to be used for the page indicator.
• currentPageIndicatorTintColor (string) - The tint color to be used for the current page indicator.
• onChange (function) - Callback that is called when the user taps a PageControl; passes the event as an argument.
• onValueChange (function) - Callback that is called when the user taps a PageControl; passes the currentPage value as an argument

Example

import PageControlIOS from 'react-native-pagecontrol';

class MyComponent extends React.Component {
    
    constructor(props) {
        super(props);
    
        this.state = {
            currentPage: 0
        };
    }

    render() {
        <PageControlIOS
            currentPage={this.state.currentPage}
            numberOfPages={4}
            pageIndicatorTintColor="grey"
            currentPageIndicatorTintColor="rgb(200,200,0)"
            
            onValueChange={this._onPageControlValueChange}
        />
    }
}

Also you can find more complex example and how to connect ScrollView and PageControlIOS in example project