react-native-pager-view-x

React Native Pager View X

Installation

npm install react-native-pager-view-x
# or
yarn add react-native-pager-view-x

Usage

If you encounter a bug due to react-native-pager-view, you can also use the FlatList provided by default in RN.

const pagerViewXRef = useRef<PagerViewXRef>(null);
const scrollEnabledRef = useRef(true);

return (
  <PagerViewX ref={pagerViewXRef} initialPage={1}>
    <View
      style={{
        flex: 1,
        width: Dimensions.get('window').width,
        backgroundColor: 'red',
      }}
    >
      <Button
        title={'toggle setScrollEnabled'}
        onPress={() => {
          pagerViewXRef.current?.setScrollEnabled(
            !scrollEnabledRef.current
          );
          scrollEnabledRef.current = !scrollEnabledRef.current;
        }}
      />
      <ExButton
        text={'Go to 3 Page'}
        onPress={() => {
          pagerViewXRef.current?.setPage(2);
        }}
      />
    </View>
    <View style={{ flex: 1, backgroundColor: 'blue' }} />
    <View style={{ flex: 1, backgroundColor: 'green' }}>
      <ExButton
        text={'go to 1page without animation'}
        onPress={() => {
          pagerViewXRef.current?.setPageWithoutAnimation(0);
        }}
      />
    </View>
  </PagerViewX>

Video

API

Props

Prop	Type	Description
initialPage	number (optional)	The initial page index.
scrollEnabled	boolean (optional)	Sets whether scrolling is enabled.
onPageScroll	function (optional)	Event handler for page scroll events.
children	ReactElement or ReactElement[] (optional)	Child elements to be displayed as pages.
activityIndicator	ReactNode (optional)	Component to display while a page is loading.
[key: string]	any	Any prop that can be used in FlatList can be added

Methods from ref

Method	Description
setPage	Sets the current page.
setPageWithoutAnimation	Sets the current page without animation.
setScrollEnabled	Sets whether scrolling is enabled.

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

Made with create-react-native-library