A ViewPager for Android & iOS. It also has handy features implemented to handle common use-case scenarios.
const views = [
<View><Text>View 1</Text></View>,
<View><Text>View 2</Text></View>,
<View><Text>View 3</Text></View>,
];
<ViewPager>
{views}
</ViewPager>
goToPage func Go to a specific page index. currentPage getter Get the current page index.
children Array of React Components.
style Any View
styles applied to the entire ViewPager.
initialPage number The array index of the children
to have in view on inital render.
onChangePage func Called on every page change. Page number returned as the first argument.
onChangeThrottle number default: 250 Time in ms the onChangePage
will be throttled to, to avoid page spamming.
renderHeader func See below.
renderFooter func See below.
These methods allow custom components to be rendered before or after the ViewPager, with access to the state of the ViewPager.
initialPage number The inital page index rendered. goToPage func Go to a specific page index. setHeaderRef func Return a class based component. See below. setFooterRef func Return a class based component. See below.
If your header/footer needs to know when the ViewPager page changes, call the setHeaderRef/setFooterRef props with the class context on mount, and with no context on unmount.
Next implement a class method name onChangePage
, which returns the page index when the ViewPager changes page.
componentDidMount() {
this.props.setHeaderRef(this);
}
componentWillUnmount() {
this.props.setHeaderRef();
}
<ViewPager
renderHeader={() => <Header />}
>
...
class Header extends React.Component {
constructor(props) {
super(props);
this.state = {
page: props.initialPage,
};
}
componentDidMount() {
this.props.setHeaderRef(this);
}
componentWillUnmount() {
this.props.setHeaderRef();
}
onChangePage(page) {
this.setState({ page });
}
render() {
return (
<View>
<Text>{`The current page is ${this.state.page}`}</Text>
</View>
);
}
}