{"id":13885,"library":"react-native-pager-view","title":"React Native Pager View","description":"react-native-pager-view is an actively maintained React Native library providing a performant, native-backed solution for implementing horizontal paging views, such as carousels or tab views. It leverages the AndroidX ViewPager2 on Android and a SwiftUI-based implementation on iOS (since v8.0.0), ensuring a smooth and idiomatic user experience. The current stable version is 8.0.1, with consistent releases addressing bug fixes and introducing new features. Maintained by Callstack, a prominent contributor to the React Native ecosystem, its key differentiators include reliance on native UI components for optimal performance, a consistent API across platforms, and the recent modernization of its iOS implementation to SwiftUI in v8, which subtly changes animation behavior for multi-page navigation. This library is ideal for scenarios requiring swipeable content sections within a React Native application.","status":"active","version":"8.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/callstack/react-native-pager-view","tags":["javascript","react-native","ios","android","typescript"],"install":[{"cmd":"npm install react-native-pager-view","lang":"bash","label":"npm"},{"cmd":"yarn add react-native-pager-view","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-native-pager-view","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required by React Native components.","package":"react","optional":false},{"reason":"Core dependency for any React Native application.","package":"react-native","optional":false}],"imports":[{"note":"ESM import is standard for modern React Native. CommonJS `require` still works but is less idiomatic for newer projects.","wrong":"const PagerView = require('react-native-pager-view');","symbol":"PagerView","correct":"import PagerView from 'react-native-pager-view';"},{"note":"Though `PagerView` is exported as a default, some TypeScript configurations might prefer the explicit `default as` syntax if issues arise with direct default imports.","symbol":"PagerView","correct":"import { default as PagerView } from 'react-native-pager-view';"},{"note":"Use `import type` for type-only imports to ensure they are stripped out during compilation, preventing potential runtime issues and improving build performance.","wrong":"import { PagerViewProps } from 'react-native-pager-view';","symbol":"PagerViewProps","correct":"import type { PagerViewProps } from 'react-native-pager-view';"}],"quickstart":{"code":"import React from 'react';\nimport { StyleSheet, View, Text } from 'react-native';\nimport PagerView from 'react-native-pager-view';\n\nconst MyPagerView = () => {\n  return (\n    <PagerView style={styles.pagerView} initialPage={0}>\n      <View key=\"1\" style={styles.page}>\n        <Text style={styles.pageText}>First page</Text>\n      </View>\n      <View key=\"2\" style={styles.page}>\n        <Text style={styles.pageText}>Second page</Text>\n      </View>\n      <View key=\"3\" style={styles.page}>\n        <Text style={styles.pageText}>Third page</Text>\n      </View>\n    </PagerView>\n  );\n};\n\nconst styles = StyleSheet.create({\n  pagerView: {\n    flex: 1,\n    backgroundColor: '#ffffff',\n  },\n  page: {\n    justifyContent: 'center',\n    alignItems: 'center',\n    backgroundColor: '#f0f0f0',\n    padding: 20,\n    margin: 10,\n    borderRadius: 8,\n  },\n  pageText: {\n    fontSize: 24,\n    fontWeight: 'bold',\n    color: '#333',\n    textAlign: 'center'\n  },\n});\n\nexport default MyPagerView;\n","lang":"typescript","description":"A basic example demonstrating a `PagerView` with three simple, swipeable pages, showcasing fundamental usage and styling."},"warnings":[{"fix":"Review any custom animations or visual tests on iOS to ensure the new behavior aligns with expectations. Open an issue if unexpected visual regressions occur beyond the intended animation change.","message":"Version 8.0.0 and later rewrites the iOS codebase to use SwiftUI. While the API surface remains largely the same, the animation behavior when navigating between multiple pages has changed to cycle through pages rather than swiping like the next one.","severity":"breaking","affected_versions":">=8.0.0"},{"fix":"Migrate your React Native project to the new architecture. Refer to the official React Native documentation for guidance on enabling TurboModules and Fabric.","message":"From version 7.x, `react-native-pager-view` officially drops support for React Native's legacy architecture. Applications must be configured to use the new architecture (TurboModules/Fabric) to utilize versions 7.x and above.","severity":"breaking","affected_versions":">=7.0.0"},{"fix":"Remove the `transitionStyle` prop from your `PagerView` components. Implement custom transition logic if specific animation styles are required, or rely on the default behavior.","message":"The `transitionStyle` property has been removed in versions 6.x and later. Attempting to use this prop will result in a TypeScript error and will not have any effect at runtime.","severity":"breaking","affected_versions":">=6.0.0"},{"fix":"Uninstall `@react-native-community/viewpager`, install `react-native-pager-view`, update all `import` statements from `@react-native-community/viewpager` to `react-native-pager-view`. For React Native < 0.60, manual linking might be required.","message":"This library is a successor to `@react-native-community/viewpager`. Migrating from the community package requires updating the package name in `package.json`, changing import statements, and potentially re-linking the native module if not using autolinking.","severity":"gotcha","affected_versions":"All"}],"env_vars":null,"search_vec":"'8.0.1':64 'across':101 'activ':12 'address':68 'android':41,145 'androidx':38 'anim':118 'api':100 'applic':139 'back':22 'base':46 'behavior':119 'bug':69 'callstack':77 'carousel':31 'chang':117 'compon':94 'consist':66,99 'content':133 'contributor':80 'current':60 'differenti':88 'ecosystem':85 'ensur':52 'experi':58 'featur':74 'fix':70 'horizont':26 'ideal':128 'idiomat':56 'implement':25,47,110 'includ':89 'introduc':72 'io':49,109,144 'javascript':140 'key':87 'leverag':36 'librari':16,126 'maintain':13,75 'modern':106 'multi':122 'multi-pag':121 'nativ':2,7,15,21,84,92,138,143 'native-back':20 'navig':124 'new':73 'optim':96 'page':27,123 'pager':3,8 'perform':19,97 'platform':102 'promin':79 'provid':17 'react':1,6,14,83,137,142 'react-nat':141 'react-native-pager-view':5 'recent':105 'releas':67 'relianc':90 'requir':131 'scenario':130 'section':134 'sinc':50 'smooth':54 'solut':23 'stabl':61 'subt':116 'swiftui':45,112 'swiftui-bas':44 'swipeabl':132 'tab':33 'typescript':146 'ui':93 'user':57 'v8':114 'v8.0.0':51 'version':62 'view':4,9,28,34 'viewpager2':39 'within':135","created_at":"2026-04-20T01:56:49.055900+00:00","updated_at":"2026-04-20T01:56:49.055900+00:00","problems":[{"fix":"Migrate your React Native project to the new architecture as `react-native-pager-view` v7+ requires it. Alternatively, downgrade `react-native-pager-view` to a 6.x version if new architecture migration is not feasible.","cause":"This error typically indicates that `react-native-pager-view` (v7.x or later) is being used in a React Native project that has not been migrated to the new architecture (TurboModules/Fabric).","error":"Invariant Violation: PagerView has been removed from the native module."},{"fix":"Remove the `transitionStyle` prop from your `PagerView` component. This prop is no longer supported and will cause a TypeScript error and has no runtime effect.","cause":"Attempting to use the `transitionStyle` prop on the `PagerView` component in versions where it has been removed (6.x and later).","error":"Property 'transitionStyle' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<PagerView> & Readonly<PagerViewProps> & Readonly<{ children?: ReactNode; }>.'"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":"","cli_version":null,"type":"library","homepage":"https://callstack.com","github":"https://github.com/callstack/react-native-pager-view","docs":null,"changelog":null,"pypi":null,"npm":"https://www.npmjs.com/package/react-native-pager-view","openapi_spec":null,"status_page":null,"smithery":null,"categories":["web-framework"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-17","next_check":"2026-07-18","install_tag":null}}