react-native-pager-view/example/src/OnPageScrollExample.tsx at 4f8dce7ba0765eae3aa432a16d71a1007eaf2300 · callstack/react-native-pager-view · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
import React from 'react';
import { StyleSheet, Text, View, SafeAreaView, Animated, ScrollView, TouchableOpacity } from 'react-native';
import PagerView from 'react-native-pager-view';
import { ProgressBar } from './component/ProgressBar';
import { useNavigationPanel } from './hook/useNavigationPanel';

const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);

export function OnPageScrollExample() {
  const { ref, ...navigationPanel } = useNavigationPanel(5);
  const { activePage, setPage, progress, pages } = navigationPanel;

  return (
    <SafeAreaView testID="safe-area-view" style={styles.flex}>
      <View testID="container" style={styles.container}>
        <ScrollView testID="scroll-view" horizontal>
          {pages.map((_v, index) => (
            <TouchableOpacity
              testID={`touchable-view-${index}`}
              key={index}
              onPress={() => setPage(index)}
            >
              <View testID={`container-view-${index}`} style={styles.separator}>
                <Text
                  style={[
                    styles.touchableTitle,
                    activePage === index && styles.touchableTitleActive,
                  ]}
                >
                  Page {index}
                </Text>
              </View>
            </TouchableOpacity>
          ))}
        </ScrollView>
      </View>

      <AnimatedPagerView
        testID={'pager-view'}
        {...navigationPanel}
        ref={ref}
        style={styles.PagerView}
        initialPage={0}
      >
        {navigationPanel.pages.map(({ key, style }) => (
          <View
            testID={`pager-view-child-${key}`}
            key={key}
            style={[style, styles.center]}
          >
            <Text
              testID={`pager-view-child-text-${key}`}
              style={styles.text}
            >{`Page Index: ${key}`}</Text>
          </View>
        ))}
      </AnimatedPagerView>
      <View style={styles.progressContainer}>
        <ProgressBar numberOfPages={pages.length} progress={progress} />
      </View>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  flex: {
    flex: 1,
  },
  PagerView: {
    flex: 1,
  },
  container: {
    flexDirection: 'row',
    backgroundColor: '#63a4ff',
  },
  progressContainer: { flex: 0.1, backgroundColor: '#63a4ff' },
  center: {
    justifyContent: 'center',
    alignItems: 'center',
    alignContent: 'center',
    padding: 20,
  },
  text: {
    fontSize: 30,
  },
  separator: {
    paddingVertical: 16,
    paddingHorizontal: 10,
  },
  touchableTitle: {
    textAlign: 'center',
    color: '#000',
  },
  touchableTitleActive: {
    color: '#fff',
  },
});