{"_id":"@_rkstar/react-native-infinite-pager","name":"@_rkstar/react-native-infinite-pager","dist-tags":{"latest":"0.2.1"},"versions":{"0.2.1":{"name":"@_rkstar/react-native-infinite-pager","version":"0.2.1","description":"A pager component that renders pages dynamically. Powered by reanimated.","main":"lib/commonjs/index","module":"lib/module/index","react-native":"src/index.tsx","types":"lib/typescript/index.d.ts","author":{"name":"Daniel Merrill"},"license":"MIT","scripts":{"test":"echo \"Error: no test specified\" && exit 1","typecheck":"tsc --skipLibCheck --noEmit","build":"npx bob build","lint":"eslint --ext .ts,.js,.tsx ."},"husky":{"hooks":{"pre-commit":"pretty-quick --staged"}},"repository":{"type":"git","url":"git+https://github.com/computerjazz/react-native-infinite-pager.git"},"keywords":["react","native","infinite","pager","swipe","slideshow"],"peerDependencies":{"react-native":">=0.62.0","react-native-gesture-handler":">=2.0.0","react-native-reanimated":">=2.8.0"},"devDependencies":{"@bconnorwhite/bob":"^2.9.5","@react-native-community/eslint-config":"^2.0.0","@types/react":"^17.0.5","@types/react-native":"^0.64.5","@typescript-eslint/eslint-plugin":"^3.4.0","@typescript-eslint/parser":"^3.4.0","eslint":"^7.3.1","husky":"^4.2.0","prettier":"^2.2.1","pretty-quick":"^2.0.1","react":"~16.9.0","react-native":"^0.62.2","react-native-builder-bob":"^0.18.1","react-native-gesture-handler":"^2.0.0","react-native-reanimated":"^2.8.0","typescript":"^4.2.4"},"react-native-builder-bob":{"source":"src","output":"lib","targets":["commonjs","module","typescript"]},"bugs":{"url":"https://github.com/computerjazz/react-native-infinite-pager/issues"},"homepage":"https://github.com/computerjazz/react-native-infinite-pager#readme","directories":{"lib":"lib"},"gitHead":"c3a78cbc0ae2c6a636d16bcd85e4626756130ad1","_id":"@_rkstar/react-native-infinite-pager@0.2.1","_nodeVersion":"16.18.0","_npmVersion":"9.2.0","dist":{"integrity":"sha512-FVfvYV3ZGN+TJbqgSTrKR7BbHfL0T5kdKRup/hEQ2+yP1axqVkD/8TYHLvdt2XMH8C3QddUs6GnCYn992U/Q+g==","shasum":"7f2664f0f029d53573833697ff60ba48738a249b","tarball":"https://registry.npmjs.org/@_rkstar/react-native-infinite-pager/-/react-native-infinite-pager-0.2.1.tgz","fileCount":21,"unpackedSize":124133,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIGqHc0X16q/h0ITdKKD7l5REM925ZOshPX0mhIg4EdjrAiEAiCEalUS7gPiII4KyrbhPcV5hDS8aiz0L2a9uv2o/QXo="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjztXwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmruaQ//fU9soYf2KOF/QAZz6w5aeHsKKdL8JfHWT6eKXXz98cuXszzc\r\nXFT1HVWgiOl+CTqFJnDOHbxyGiu6rsjiUNFNCw7kyIz6dPGcz8lmYJHkHS2W\r\nJOVXjGBlYSbZHV6hTLRL4PtOOkOePsVinl7Gpao/uftBm72Uf6oCNddmMgre\r\n4KX2tl5IdX0D93LwLydvS4u2WgLABNGpEnYxpQcHx1mnFJj/5gQUi4t4ZBZ8\r\nahi2qxZAOacGUHu06kyLsnUjhXVRWuoPOibOKGwjtKBpCTP08QZzbrhun0pg\r\nuUz1NARZ2Atb93xR0KYcbPdx1kq130xySyV4/yIZM2/ux8iTVUt54Qnr5mB+\r\nVzv7/NGUXKRYuj2nRxtbPvF4zAlhLIM1fpowoH0gu/2jmKVSvsY0GkAwIMrn\r\nQCTaax7Rf7Q54F0uJ957J7NkGI6DFHI7jIHfF3qd/P/t9sifXpeYHMTzCfor\r\ntxS5LLcTB8i8J2aQSR0z6BtqtTppWJYL/Xtu57VXz7yMnxqf9BK42iy09Pbn\r\n5Qp+B8L4TT18837iFXCyMiUu5v2NnLH30Fy63Egs44L1zXiHuEJqdQ9ttJOW\r\nKVtL7l9nHGGwCRJVeLFdMsBUyIuthfYIvAdKLYZjM8eOWcjYTEJc1w5QdHhr\r\n5REnR9SpJvPV9UT+gZDRyW7JcbSlFU+/ajw=\r\n=aOSn\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"_rkstar","email":"rkstar@mac.com"},"maintainers":[{"name":"_rkstar","email":"rkstar@mac.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-native-infinite-pager_0.2.1_1674499568169_0.21637985162327844"},"_hasShrinkwrap":false}},"time":{"created":"2023-01-23T18:46:08.061Z","0.2.1":"2023-01-23T18:46:08.346Z","modified":"2023-01-23T18:46:08.461Z"},"maintainers":[{"name":"_rkstar","email":"rkstar@mac.com"}],"description":"A pager component that renders pages dynamically. Powered by reanimated.","homepage":"https://github.com/computerjazz/react-native-infinite-pager#readme","keywords":["react","native","infinite","pager","swipe","slideshow"],"repository":{"type":"git","url":"git+https://github.com/computerjazz/react-native-infinite-pager.git"},"author":{"name":"Daniel Merrill"},"bugs":{"url":"https://github.com/computerjazz/react-native-infinite-pager/issues"},"license":"MIT","readme":"# React Native Infinite Pager\n\nAn infinitely-swipeable horizontal and vertical pager component.<br />\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<number>;\n  isActive: boolean;\n  pageWidthAnim: Animated.SharedValue<number>;\n  pageAnim: Animated.SharedValue<number>;\n}\n\ntype PageComponentType = (props: PageProps) => JSX.Element | null;\n\ntype AnyStyle = StyleProp<ViewStyle> | ReturnType<typeof useAnimatedStyle>;\n\ntype Props = {\n  PageComponent?:\n    | PageComponentType\n    | React.MemoExoticComponent<PageComponentType>;\n  renderPage?: PageComponentType\n  pageCallbackNode?: Animated.SharedValue<number>;\n  onPageChange?: (page: number) => void;\n  pageBuffer?: number; \n  style?: AnyStyle;\n  pageWrapperStyle?: AnyStyle;\n  pageInterpolator?: typeof defaultPageInterpolator;\n  minIndex?: number;\n  maxIndex?: number;\n  simultaneousGestures?: (ComposedGesture | GestureType)[];\n  gesturesDisabled?: boolean;\n  animationConfig?: Partial<WithSpringConfig>;\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) => 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<number>`               | 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) => ReturnType<typeof useAnimatedStyle>`               | 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| `simultaneousGestures`            | `(ComposedGesture \\| GestureType)[]`               | Simultaneous RNGH gestures.                   |\n| `gesturesDisabled`            | `boolean`               | Disables pan gestures.                   |\n| `animationConfig`            | `Partial<WithSpringConfig>`               | 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) => void;\n  incrementPage: (options: ImperativeApiOptions) => void;\n  decrementPage: (options: ImperativeApiOptions) => void;\n};\n```\n\n| Name            | Type                                                     | Description                |\n| :-------------- | :------------------------------------------------------- | :------------------------- |\n| `incrementPage` | `(options: ImperativeApiOptions) => void`                | Go to next page.           |\n| `decrementPage` | `(options: ImperativeApiOptions) => void`                | Go to previous page.       |\n| `setPage`       | `(index: number, options: ImperativeApiOptions) => 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 }) => {\n  return (\n    <View\n      style={[\n        styles.flex,\n        {\n          alignItems: \"center\",\n          justifyContent: \"center\",\n          backgroundColor: getColor(index),\n        },\n      ]}\n    >\n      <Text style={{ color: \"white\", fontSize: 80 }}>{index}</Text>\n    </View>\n  );\n};\n\nexport default function App() {\n  return (\n    <View style={styles.flex}>\n      <InfinitePager\n        PageComponent={Page}\n        style={styles.flex}\n        pageWrapperStyle={styles.flex}\n      />\n    </View>\n  );\n}\n\nconst styles = StyleSheet.create({\n  flex: { flex: 1 },\n});\n```\n","readmeFilename":"README.md"}