react-native-pager-view

import React, { useMemo } from 'react';
import { StyleSheet, View, Animated, Text } from 'react-native';
import PagerView from '@amazon-devices/react-native-pager-view';

const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);

export function App() {
  const pages = useMemo(
    () => [
      { key: 'page1', style: { backgroundColor: 'powderblue' } },
      { key: 'page2', style: { backgroundColor: 'skyblue' } },
      { key: 'page3', style: { backgroundColor: 'steelblue' } },
    ],
    []
  );

  return (
    <View style={styles.container}>
      <AnimatedPagerView
        style={styles.PagerView}
        initialPage={0}
        pageMargin={10}
      >
        {useMemo(
          () =>
            pages.map((page, index) => (
              <View
                testID="pager-view-content"
                key={page.key}
                style={page.style}
                collapsable={false}
              >
                <Text>{`ページ番号${index}`}</Text>
              </View>
            )),
          [pages]
        )}
      </AnimatedPagerView>
    </View >
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  PagerView: {
    flex: 1,
  },
});