https://github.com/waynekim92/react-native-pager-view-x
replacement component of x-axis react-native-pager-view
https://github.com/waynekim92/react-native-pager-view-x
component react-native ui
Last synced: 7 months ago
JSON representation
replacement component of x-axis react-native-pager-view
- Host: GitHub
- URL: https://github.com/waynekim92/react-native-pager-view-x
- Owner: WayneKim92
- License: mit
- Created: 2024-09-02T04:58:37.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2024-09-23T07:16:31.000Z (almost 2 years ago)
- Last Synced: 2025-03-25T01:16:37.508Z (over 1 year ago)
- Topics: component, react-native, ui
- Language: TypeScript
- Homepage:
- Size: 1.37 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
README
# 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 (
{
pagerViewXRef.current?.setScrollEnabled(
!scrollEnabledRef.current
);
scrollEnabledRef.current = !scrollEnabledRef.current;
}}
/>
{
pagerViewXRef.current?.setPage(2);
}}
/>
{
pagerViewXRef.current?.setPageWithoutAnimation(0);
}}
/>
```
## 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](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.
## License
MIT
---
Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)