Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/computerjazz/react-native-infinite-pager
An infinitely-swipeable pager component.
https://github.com/computerjazz/react-native-infinite-pager
Last synced: about 1 month ago
JSON representation
An infinitely-swipeable pager component.
- Host: GitHub
- URL: https://github.com/computerjazz/react-native-infinite-pager
- Owner: computerjazz
- License: mit
- Created: 2021-10-18T02:21:01.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-17T00:25:14.000Z (3 months ago)
- Last Synced: 2024-10-11T16:20:26.161Z (about 1 month ago)
- Language: TypeScript
- Homepage:
- Size: 84 KB
- Stars: 171
- Watchers: 7
- Forks: 15
- Open Issues: 19
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE.txt
Awesome Lists containing this project
README
# React Native Infinite Pager
An infinitely-swipeable horizontal and vertical pager component.
Fully native interactions powered by [Reanimated 2](https://github.com/kmagiera/react-native-reanimated) and [React Native Gesture Handler](https://github.com/kmagiera/react-native-gesture-handler)
## Install
1. Follow installation instructions for [reanimated](https://github.com/kmagiera/react-native-reanimated) and [react-native-gesture-handler](https://github.com/kmagiera/react-native-gesture-handler)
2. `npm install` or `yarn add` `react-native-infinite-pager`
3. `import InfinitePager from 'react-native-infinite-pager'`
### Props
```typescript
type PageProps = {
index: number;
focusAnim: Animated.DerivedValue;
isActive: boolean;
pageWidthAnim: Animated.SharedValue;
pageAnim: Animated.SharedValue;
}
type PageComponentType = (props: PageProps) => JSX.Element | null;
type AnyStyle = StyleProp | ReturnType;
type Props = {
PageComponent?:
| PageComponentType
| React.MemoExoticComponent;
renderPage?: PageComponentType
pageCallbackNode?: Animated.SharedValue;
onPageChange?: (page: number) => void;
pageBuffer?: number;
style?: AnyStyle;
pageWrapperStyle?: AnyStyle;
pageInterpolator?: typeof defaultPageInterpolator;
minIndex?: number;
maxIndex?: number;
initialIndex?: number;
simultaneousGestures?: (ComposedGesture | GestureType)[];
gesturesDisabled?: boolean;
animationConfig?: Partial;
vertical?: boolean;
flingVelocity?: number;
preset?: Preset;
};
```
| Name | Type | Description |
| :----------------- | :----------------------- | :---------------------------------------------- |
| `PageComponent` | `PageComponentType` | Component to be rendered as each page (either PageComponent OR renderPage must be defined, but not both — choose the version that suits your use case). |
| `renderPage` | `PageComponentType` | Function to be called to render each page. |
| `onPageChange` | `(page: number) => void` | Callback invoked when the current page changes. |
| `style` | `AnyStyle` | Style of the pager container. |
| `pageWrapperStyle` | `AnyStyle` | Style of the container that wraps each page. |
| `pageCallbackNode` | `Animated.SharedValue` | SharedValue that represents the index of the current page. |
| `pageBuffer` | `number` | Number of pages to render on either side of the active page. |
| `pageInterpolator` | `(params: PageInterpolatorParams) => ReturnType` | Interpolator for custom page animations. |
| `minIndex` | `number` | Minimum page index for non-infinite behavior (optional). |
| `maxIndex` | `number` | Maximum page index for non-infinite behavior (optional). |
| `initialIndex` | `number` | Index that the pager initializes at (optional). |
| `simultaneousGestures` | `(ComposedGesture \| GestureType)[]` | Simultaneous RNGH gestures. |
| `gesturesDisabled` | `boolean` | Disables pan gestures. |
| `animationConfig` | `Partial` | Customizes paging animations. |
| `vertical` | `boolean` | Sets page gesture to the vertical axis. |
| `flingVelocity` | `number` | Determines sensitivity of a page-turning "fling" at the end of the gesture. |
| `preset` | `Preset` | Uses a pre-configured page interpolator. |
### Imperative Api
```typescript
type ImperativeApiOptions = {
animated?: boolean;
};
export type InfinitePagerImperativeApi = {
setPage: (index: number, options: ImperativeApiOptions) => void;
incrementPage: (options: ImperativeApiOptions) => void;
decrementPage: (options: ImperativeApiOptions) => void;
};
```
| Name | Type | Description |
| :-------------- | :------------------------------------------------------- | :------------------------- |
| `incrementPage` | `(options: ImperativeApiOptions) => void` | Go to next page. |
| `decrementPage` | `(options: ImperativeApiOptions) => void` | Go to previous page. |
| `setPage` | `(index: number, options: ImperativeApiOptions) => void` | Go to page of given index. |
### Example
https://snack.expo.dev/@computerjazz/infinite-pager
```typescript
import React from "react";
import { Text, View, StyleSheet, TouchableOpacity } from "react-native";
import InfinitePager from "react-native-infinite-pager";
const NUM_ITEMS = 50;
function getColor(i: number) {
const multiplier = 255 / (NUM_ITEMS - 1);
const colorVal = Math.abs(i) * multiplier;
return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`;
}
const Page = ({ index }: { index: number }) => {
return (
{index}
);
};
export default function App() {
return (
);
}
const styles = StyleSheet.create({
flex: { flex: 1 },
});
```