Product
Introducing Enhanced Alert Actions and Triage Functionality
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
react-native-pager-view
Advanced tools
Package description
The react-native-pager-view package is a versatile and performant library for creating swipeable views in React Native applications. It allows developers to implement horizontal and vertical paging with smooth animations and customizable options.
Basic Pager View
This code demonstrates a basic implementation of a pager view with three pages. Each page contains a simple text element.
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import PagerView from 'react-native-pager-view';
const BasicPagerView = () => (
<PagerView style={styles.pagerView} initialPage={0}>
<View key="1" style={styles.pageStyle}>
<Text>First page</Text>
</View>
<View key="2" style={styles.pageStyle}>
<Text>Second page</Text>
</View>
<View key="3" style={styles.pageStyle}>
<Text>Third page</Text>
</View>
</PagerView>
);
const styles = StyleSheet.create({
pagerView: {
flex: 1,
},
pageStyle: {
justifyContent: 'center',
alignItems: 'center',
},
});
export default BasicPagerView;
Vertical Pager View
This code demonstrates how to create a vertical pager view by setting the orientation prop to 'vertical'.
import React from 'react';
import { View, Text, StyleSheet } from 'react-native';
import PagerView from 'react-native-pager-view';
const VerticalPagerView = () => (
<PagerView style={styles.pagerView} initialPage={0} orientation="vertical">
<View key="1" style={styles.pageStyle}>
<Text>First page</Text>
</View>
<View key="2" style={styles.pageStyle}>
<Text>Second page</Text>
</View>
<View key="3" style={styles.pageStyle}>
<Text>Third page</Text>
</View>
</PagerView>
);
const styles = StyleSheet.create({
pagerView: {
flex: 1,
},
pageStyle: {
justifyContent: 'center',
alignItems: 'center',
},
});
export default VerticalPagerView;
Controlled Pager View
This code demonstrates a controlled pager view where the current page can be programmatically set using a button.
import React, { useState } from 'react';
import { View, Text, Button, StyleSheet } from 'react-native';
import PagerView from 'react-native-pager-view';
const ControlledPagerView = () => {
const [page, setPage] = useState(0);
return (
<View style={{ flex: 1 }}>
<PagerView style={styles.pagerView} initialPage={0} page={page} onPageSelected={e => setPage(e.nativeEvent.position)}>
<View key="1" style={styles.pageStyle}>
<Text>First page</Text>
</View>
<View key="2" style={styles.pageStyle}>
<Text>Second page</Text>
</View>
<View key="3" style={styles.pageStyle}>
<Text>Third page</Text>
</View>
</PagerView>
<Button title="Go to next page" onPress={() => setPage(page + 1)} />
</View>
);
};
const styles = StyleSheet.create({
pagerView: {
flex: 1,
},
pageStyle: {
justifyContent: 'center',
alignItems: 'center',
},
});
export default ControlledPagerView;
react-native-snap-carousel is a popular library for creating carousels in React Native. It offers a wide range of customization options and supports both horizontal and vertical layouts. Compared to react-native-pager-view, it provides more features for creating complex carousels but may be more complex to set up.
react-native-swiper is another widely used library for creating swipeable views in React Native. It is easy to set up and provides basic functionality for horizontal and vertical swiping. However, it may not be as performant as react-native-pager-view for large datasets.
react-native-viewpager is a library for creating swipeable views with a focus on performance and simplicity. It offers similar functionality to react-native-pager-view but may lack some of the advanced customization options.
Readme
This component allows the user to swipe left and right through pages of data. Under the hood it is using the native Android ViewPager and the iOS UIPageViewController implementations. See it in action!
4.x | 5.x and above |
---|---|
iOS | iOS support |
ViewPager1 | ViewPager2 |
In version 6.x support for transitionStyle
property has been dropped. More information here.
"@react-native-community/viewpager"
library has been changed to react-native-pager-view
. Here you can find more information, how to migrate pager view to the latest version
yarn add react-native-pager-view
Autolinking will just do the job.
react-native link react-native-pager-view
Follow the instructions in the React Native documentation to manually link the framework or link using Cocoapods by adding this to your Podfile
:
pod 'react-native-pager-view', :path => '../node_modules/react-native-pager-view'
android/settings.gradle
include ':react-native-pager-view'
project(':react-native-pager-view').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-pager-view/android')
android/app/build.gradle
dependencies {
...
implementation project(':react-native-pager-view')
}
android/app/src/main/.../MainApplication.java
On top, where imports are:
Add import com.reactnativepagerview.PagerViewPackage;
Add the PagerViewPackage
class to your list of exported packages.
@Override
protected List<ReactPackage> getPackages() {
return Arrays.<ReactPackage>asList(
new MainReactPackage(),
new PagerViewPackage()
);
}
import React from 'react';
import { StyleSheet, View, Text } from 'react-native';
import PagerView from 'react-native-pager-view';
const MyPager = () => {
return (
<PagerView style={styles.pagerView} initialPage={0}>
<View key="1">
<Text>First page</Text>
</View>
<View key="2">
<Text>Second page</Text>
</View>
</PagerView>
);
};
const styles = StyleSheet.create({
pagerView: {
flex: 1,
},
});
Attention: Note that you can only use View
components as children of PagerView
(cf. folder /example)
. For Android if View
has own children, set prop collapsable
to false https://reactnative.dev/docs/view#collapsable-android, otherwise react-native might remove those children views and and its children will be rendered as separate pages
For advanced usage please take a look into our example project
Prop | Description | Platform |
---|---|---|
initialPage | Index of initial page that should be selected | both |
scrollEnabled: boolean | Should pager view scroll, when scroll enabled | both |
onPageScroll: (e: PageScrollEvent) => void | Executed when transitioning between pages (ether because the animation for the requested page has changed or when the user is swiping/dragging between pages) | both |
onPageScrollStateChanged: (e: PageScrollStateChangedEvent) => void | Function called when the page scrolling state has changed | both |
onPageSelected: (e: PageSelectedEvent) => void | This callback will be called once the ViewPager finishes navigating to the selected page | both |
pageMargin: number | Blank space to be shown between pages | both |
keyboardDismissMode: ('none' / 'on-drag') | Determines whether the keyboard gets dismissed in response to a drag | both |
orientation: Orientation | Set horizontal or vertical scrolling orientation (it does not work dynamically) | both |
overScrollMode: OverScrollMode | Used to override default value of overScroll mode. Can be auto , always or never . Defaults to auto | Android |
offscreenPageLimit: number | Set the number of pages that should be retained to either side of the currently visible page(s). Pages beyond this limit will be recreated from the adapter when needed. Defaults to RecyclerView's caching strategy. The given value must either be larger than 0. | Android |
overdrag: boolean | Allows for overscrolling after reaching the end or very beginning or pages. Defaults to false | iOS |
layoutDirection: ('ltr' / 'rtl' / 'locale') | Specifies layout direction. Use ltr or rtl to set explicitly or locale to deduce from the default language script of a locale. Defaults to locale | both |
Method | Description | Platform |
---|---|---|
setPage(index: number) | Function to scroll to a specific page in the PagerView. Invalid index is ignored. | both |
setPageWithoutAnimation(index: number) | Function to scroll to a specific page in the PagerView. Invalid index is ignored. | both |
setScrollEnabled(scrollEnabled: boolean) | A helper function to enable/disable scroll imperatively. The recommended way is using the scrollEnabled prop, however, there might be a case where a imperative solution is more useful (e.g. for not blocking an animation) | both |
See the contributing guide to learn how to contribute to the repository and the development workflow.
flex:1
does not work for child views, please use width: '100%', height: '100%'
instead
[iOS]: In case of UIViewControllerHierarchyInconsistency
error, please use below fix:
requestAnimationFrame(() => refPagerView.current?.setPage(index));
horizontal | vertical |
---|---|
horizontal | vertical |
---|---|
An example can be found here
To attach reanimated handler with onPageScroll
follow the below steps.
// 1. Define the handler
function usePageScrollHandler(handlers, dependencies) {
const { context, doDependenciesDiffer } = useHandler(handlers, dependencies);
const subscribeForEvents = ['onPageScroll'];
return useEvent(
(event) => {
'worklet';
const { onPageScroll } = handlers;
if (onPageScroll && event.eventName.endsWith('onPageScroll')) {
onPageScroll(event, context);
}
},
subscribeForEvents,
doDependenciesDiffer
);
}
// 2. Attach the event handler
import PagerView from 'react-native-pager-view';
import Animated from 'react-native-reanimated';
const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);
const pageScrollHandler = usePageScrollHandler({
onPageScroll: (e) => {
'worklet';
offset.value = e.offset;
console.log(e.offset, e.position);
},
});
<AnimatedPagerView onPageScroll={pageScrollHandler} />;
MIT
FAQs
React Native wrapper for Android and iOS ViewPager
The npm package react-native-pager-view receives a total of 261,673 weekly downloads. As such, react-native-pager-view popularity was classified as popular.
We found that react-native-pager-view demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 4 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Socket now supports four distinct alert actions instead of the previous two, and alert triaging allows users to override the actions taken for all individual alerts.
Security News
Polyfill.io has been serving malware for months via its CDN, after the project's open source maintainer sold the service to a company based in China.
Security News
OpenSSF is warning open source maintainers to stay vigilant against reputation farming on GitHub, where users artificially inflate their status by manipulating interactions on closed issues and PRs.