# react-native-infinite-pager

> A pager component that renders pages dynamically. Powered by reanimated.

Latest version **0.3.18** (published 2024-08-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-native-infinite-pager
pnpm add react-native-infinite-pager
yarn add react-native-infinite-pager
bun add react-native-infinite-pager
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.3.18 |
| Published | 2024-08-17 |
| First published | 2021-10-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 189.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 216 |
| Author | Daniel Merrill |
| Maintainers | computerjazz |
| Keywords | react, native, infinite, pager, swipe, slideshow |

## Links

- npm: https://www.npmjs.com/package/react-native-infinite-pager
- Repository: https://github.com/computerjazz/react-native-infinite-pager
- Homepage: https://github.com/computerjazz/react-native-infinite-pager#readme
- Issues: https://github.com/computerjazz/react-native-infinite-pager/issues
- npm.io page: https://npm.io/package/react-native-infinite-pager

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 0.3.18 (latest) — 2024-08-17
- 0.3.3 (beta) — 2023-10-05
- 0.3.17 — 2024-08-05
- 0.3.16 — 2024-03-23
- 0.3.15 — 2024-03-14
- 0.3.14 — 2024-03-09
- 0.3.13 — 2023-12-21
- 0.3.12 — 2023-12-19
- 0.3.11 — 2023-12-19
- 0.3.10 — 2023-12-19
- 0.3.9 — 2023-12-11
- 0.3.8 — 2023-11-29
- 0.3.7 — 2023-11-29
- 0.3.6 — 2023-11-28
- 0.3.5 — 2023-11-28
- … 20 more at https://npm.io/package/react-native-infinite-pager/versions

## README

# React Native Infinite Pager

An infinitely-swipeable horizontal and vertical pager component.<br />
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)

![InfinitePager demo](https://i.imgur.com/5lIxuQX.gif)

## 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<number>;
  isActive: boolean;
  pageWidthAnim: Animated.SharedValue<number>;
  pageAnim: Animated.SharedValue<number>;
}

type PageComponentType = (props: PageProps) => JSX.Element | null;

type AnyStyle = StyleProp<ViewStyle> | ReturnType<typeof useAnimatedStyle>;

type Props = {
  PageComponent?:
    | PageComponentType
    | React.MemoExoticComponent<PageComponentType>;
  renderPage?: PageComponentType
  pageCallbackNode?: Animated.SharedValue<number>;
  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<WithSpringConfig>;
  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<number>`               | 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<typeof useAnimatedStyle>`               | 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<WithSpringConfig>`               | 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 (
    <View
      style={[
        styles.flex,
        {
          alignItems: "center",
          justifyContent: "center",
          backgroundColor: getColor(index),
        },
      ]}
    >
      <Text style={{ color: "white", fontSize: 80 }}>{index}</Text>
    </View>
  );
};

export default function App() {
  return (
    <View style={styles.flex}>
      <InfinitePager
        PageComponent={Page}
        style={styles.flex}
        pageWrapperStyle={styles.flex}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  flex: { flex: 1 },
});
```

---
_Source: https://npm.io/package/react-native-infinite-pager · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._