{"id":17283673,"url":"https://github.com/computerjazz/react-native-infinite-pager","last_synced_at":"2025-04-04T22:03:21.350Z","repository":{"id":45519424,"uuid":"418314588","full_name":"computerjazz/react-native-infinite-pager","owner":"computerjazz","description":"An infinitely-swipeable pager component.","archived":false,"fork":false,"pushed_at":"2024-08-17T00:25:14.000Z","size":86,"stargazers_count":194,"open_issues_count":20,"forks_count":18,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-03-28T21:02:50.811Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/computerjazz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["computerjazz"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2021-10-18T02:21:01.000Z","updated_at":"2025-03-28T19:06:19.000Z","dependencies_parsed_at":"2023-12-21T04:20:10.778Z","dependency_job_id":"a16bc11f-2f0a-4c03-8bfc-7ba6acbc2c91","html_url":"https://github.com/computerjazz/react-native-infinite-pager","commit_stats":{"total_commits":108,"total_committers":4,"mean_commits":27.0,"dds":"0.17592592592592593","last_synced_commit":"e90713930efd94ca1cb26c23c525564f03ee5d0d"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/computerjazz%2Freact-native-infinite-pager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/computerjazz%2Freact-native-infinite-pager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/computerjazz%2Freact-native-infinite-pager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/computerjazz%2Freact-native-infinite-pager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/computerjazz","download_url":"https://codeload.github.com/computerjazz/react-native-infinite-pager/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247256104,"owners_count":20909240,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-15T09:51:54.900Z","updated_at":"2025-04-04T22:03:21.330Z","avatar_url":"https://github.com/computerjazz.png","language":"TypeScript","funding_links":["https://github.com/sponsors/computerjazz"],"categories":[],"sub_categories":[],"readme":"# React Native Infinite Pager\n\nAn infinitely-swipeable horizontal and vertical pager component.\u003cbr /\u003e\nFully 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)\n\n![InfinitePager demo](https://i.imgur.com/5lIxuQX.gif)\n\n## Install\n\n1. 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)\n2. `npm install` or `yarn add` `react-native-infinite-pager`\n3. `import InfinitePager from 'react-native-infinite-pager'`\n\n### Props\n\n```typescript\ntype PageProps = {\n  index: number;\n  focusAnim: Animated.DerivedValue\u003cnumber\u003e;\n  isActive: boolean;\n  pageWidthAnim: Animated.SharedValue\u003cnumber\u003e;\n  pageAnim: Animated.SharedValue\u003cnumber\u003e;\n}\n\ntype PageComponentType = (props: PageProps) =\u003e JSX.Element | null;\n\ntype AnyStyle = StyleProp\u003cViewStyle\u003e | ReturnType\u003ctypeof useAnimatedStyle\u003e;\n\ntype Props = {\n  PageComponent?:\n    | PageComponentType\n    | React.MemoExoticComponent\u003cPageComponentType\u003e;\n  renderPage?: PageComponentType\n  pageCallbackNode?: Animated.SharedValue\u003cnumber\u003e;\n  onPageChange?: (page: number) =\u003e void;\n  pageBuffer?: number; \n  style?: AnyStyle;\n  pageWrapperStyle?: AnyStyle;\n  pageInterpolator?: typeof defaultPageInterpolator;\n  minIndex?: number;\n  maxIndex?: number;\n  initialIndex?: number;\n  simultaneousGestures?: (ComposedGesture | GestureType)[];\n  gesturesDisabled?: boolean;\n  animationConfig?: Partial\u003cWithSpringConfig\u003e;\n  vertical?: boolean;\n  flingVelocity?: number;\n  preset?: Preset;\n};\n```\n\n| Name               | Type                     | Description                                     |\n| :----------------- | :----------------------- | :---------------------------------------------- |\n| `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).          |\n| `renderPage`    | `PageComponentType`      | Function to be called to render each page.          |\n| `onPageChange`     | `(page: number) =\u003e void` | Callback invoked when the current page changes. |\n| `style`            | `AnyStyle`               | Style of the pager container.                   |\n| `pageWrapperStyle` | `AnyStyle`               | Style of the container that wraps each page.    |\n| `pageCallbackNode` | `Animated.SharedValue\u003cnumber\u003e`               | SharedValue that represents the index of the current page.    |\n| `pageBuffer` | `number`               | Number of pages to render on either side of the active page.    |\n| `pageInterpolator` | `(params: PageInterpolatorParams) =\u003e ReturnType\u003ctypeof useAnimatedStyle\u003e`               | Interpolator for custom page animations.    |\n| `minIndex`            | `number`               | Minimum page index for non-infinite behavior (optional).                   |\n| `maxIndex`            | `number`               | Maximum page index for non-infinite behavior (optional).                   |\n| `initialIndex`            | `number`               | Index that the pager initializes at (optional).                   |\n| `simultaneousGestures`            | `(ComposedGesture \\| GestureType)[]`               | Simultaneous RNGH gestures.                   |\n| `gesturesDisabled`            | `boolean`               | Disables pan gestures.                   |\n| `animationConfig`            | `Partial\u003cWithSpringConfig\u003e`               | Customizes paging animations.                   |\n| `vertical`            | `boolean`               | Sets page gesture to the vertical axis.                   |\n| `flingVelocity`            | `number`               | Determines sensitivity of a page-turning \"fling\" at the end of the gesture.                   |\n| `preset`            | `Preset`               | Uses a pre-configured page interpolator.                   |\n\n\n### Imperative Api\n\n```typescript\ntype ImperativeApiOptions = {\n  animated?: boolean;\n};\n\nexport type InfinitePagerImperativeApi = {\n  setPage: (index: number, options: ImperativeApiOptions) =\u003e void;\n  incrementPage: (options: ImperativeApiOptions) =\u003e void;\n  decrementPage: (options: ImperativeApiOptions) =\u003e void;\n};\n```\n\n| Name            | Type                                                     | Description                |\n| :-------------- | :------------------------------------------------------- | :------------------------- |\n| `incrementPage` | `(options: ImperativeApiOptions) =\u003e void`                | Go to next page.           |\n| `decrementPage` | `(options: ImperativeApiOptions) =\u003e void`                | Go to previous page.       |\n| `setPage`       | `(index: number, options: ImperativeApiOptions) =\u003e void` | Go to page of given index. |\n\n### Example\n\nhttps://snack.expo.dev/@computerjazz/infinite-pager\n\n```typescript\nimport React from \"react\";\nimport { Text, View, StyleSheet, TouchableOpacity } from \"react-native\";\nimport InfinitePager from \"react-native-infinite-pager\";\n\nconst NUM_ITEMS = 50;\n\nfunction getColor(i: number) {\n  const multiplier = 255 / (NUM_ITEMS - 1);\n  const colorVal = Math.abs(i) * multiplier;\n  return `rgb(${colorVal}, ${Math.abs(128 - colorVal)}, ${255 - colorVal})`;\n}\n\nconst Page = ({ index }: { index: number }) =\u003e {\n  return (\n    \u003cView\n      style={[\n        styles.flex,\n        {\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          backgroundColor: getColor(index),\n        },\n      ]}\n    \u003e\n      \u003cText style={{ color: \"white\", fontSize: 80 }}\u003e{index}\u003c/Text\u003e\n    \u003c/View\u003e\n  );\n};\n\nexport default function App() {\n  return (\n    \u003cView style={styles.flex}\u003e\n      \u003cInfinitePager\n        PageComponent={Page}\n        style={styles.flex}\n        pageWrapperStyle={styles.flex}\n      /\u003e\n    \u003c/View\u003e\n  );\n}\n\nconst styles = StyleSheet.create({\n  flex: { flex: 1 },\n});\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomputerjazz%2Freact-native-infinite-pager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcomputerjazz%2Freact-native-infinite-pager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcomputerjazz%2Freact-native-infinite-pager/lists"}