React Native Pager View X

Installation

``sh
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.

`tsx
const pagerViewXRef = useRef(null);
const scrollEnabledRef = useRef(true);

return (

style={{
flex: 1,
width: Dimensions.get('window').width,
backgroundColor: 'red',
}}
>
title={'toggle setScrollEnabled'}
onPress={() => {
pagerViewXRef.current?.setScrollEnabled(
!scrollEnabledRef.current
);
scrollEnabledRef.current = !scrollEnabledRef.current;
}}
/>
text={'Go to 3 Page'}
onPress={() => {
pagerViewXRef.current?.setPage(2);
}}
/>



text={'go to 1page without animation'}
onPress={() => {
pagerViewXRef.current?.setPageWithoutAnimation(0);
}}
/>


`

Video

API

$3

| 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 |




$3

| 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