react-native-pager-view/example/src/NestedPagerView.tsx at main · 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
98
99
100
101
102
103
import React, { useMemo } from 'react';
import { StyleSheet, View, SafeAreaView, Animated } from 'react-native';

import PagerView from 'react-native-pager-view';

import { LikeCount } from './component/LikeCount';
import { BGCOLOR } from './utils';
import { useNavigationPanel } from './hook/useNavigationPanel';
import { PagerViewContent } from './component/PagerViewContent';

const AnimatedPagerView = Animated.createAnimatedComponent(PagerView);

export function NestedPagerView() {
  const { ...navigationPanel } = useNavigationPanel();
  return (
    <SafeAreaView testID="safe-area-view" style={styles.container}>
      <AnimatedPagerView
        style={styles.PagerView}
        testID="pager-view"
        initialPage={0}
        layoutDirection="ltr"
        pageMargin={10}
        orientation="horizontal"
      >
        <View
          testID="1-st-page"
          key="1"
          style={{ backgroundColor: BGCOLOR[0] }}
          collapsable={false}
        >
          <LikeCount />
        </View>
        <View key="2" testID="2-nd-nested" collapsable={false}>
          <AnimatedPagerView
            style={styles.PagerView}
            initialPage={0}
            testID="nested-horizontal-pager"
          >
            {useMemo(
              () =>
                navigationPanel.pages
                  .slice(1, 3)
                  .map((page, index) => (
                    <PagerViewContent
                      prefix="Horizontal "
                      key={page.key}
                      style={page.style}
                      index={index}
                    />
                  )),
              [navigationPanel.pages]
            )}
          </AnimatedPagerView>
          <AnimatedPagerView
            style={styles.PagerView}
            initialPage={0}
            orientation="vertical"
            testID="nested-vertical-pager"
          >
            {useMemo(
              () =>
                navigationPanel.pages
                  .slice(3, 5)
                  .map((page, index) => (
                    <PagerViewContent
                      prefix="Vertical "
                      key={page.key}
                      style={page.style}
                      index={index}
                    />
                  )),
              [navigationPanel.pages]
            )}
          </AnimatedPagerView>
        </View>
        <View
          testID="3-rd-pager-view"
          key="3"
          style={{ backgroundColor: BGCOLOR[3] }}
          collapsable={false}
        >
          <LikeCount />
        </View>
      </AnimatedPagerView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  image: {
    width: 300,
    height: 200,
    padding: 20,
  },
  PagerView: {
    flex: 1,
  },
  title: { fontSize: 22, paddingVertical: 10 },
});