@react-native-community/viewpager
exposes a component that provides the layout and gestures to scroll between pages of content, like a carousel.Android Device | Android Emulator | iOS Device | iOS Simulator | Web |
---|---|---|---|---|
expo install @react-native-community/viewpager
If you're installing this in a bare React Native app, you should also follow these additional installation instructions.
import React from 'react'; import { StyleSheet, View, Text } from 'react-native'; import ViewPager from '@react-native-community/viewpager'; const MyPager = () => { return ( <View style={{ flex: 1 }}> <ViewPager style={styles.viewPager} initialPage={0}> <View style={styles.page} key="1"> <Text>First page</Text> <Text>Swipe ➡️</Text> </View> <View style={styles.page} key="2"> <Text>Second page</Text> </View> <View style={styles.page} key="3"> <Text>Third page</Text> </View> </ViewPager> </View> ); }; const styles = StyleSheet.create({ viewPager: { flex: 1, }, page: { justifyContent: 'center', alignItems: 'center', }, }); export default MyPager;