about summary refs log tree commit diff
path: root/src/view/com/util/Pager.tsx
blob: 1a3ff642c1a1ba8b3a5d76de1f0d77e9dbfd618c (plain) (blame)
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
import React from 'react'
import {Animated, StyleSheet, View} from 'react-native'
import PagerView, {PagerViewOnPageSelectedEvent} from 'react-native-pager-view'
import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
import {TabBar} from './TabBar'

export type PageSelectedEvent = PagerViewOnPageSelectedEvent
const AnimatedPagerView = Animated.createAnimatedComponent(PagerView)

interface Props {
  onPageSelected?: (e: PageSelectedEvent) => void
}
export const Pager = ({
  children,
  onPageSelected,
}: React.PropsWithChildren<Props>) => {
  const [selectedPage, setSelectedPage] = React.useState(0)
  const position = useAnimatedValue(0)
  const offset = useAnimatedValue(0)
  const pagerView = React.useRef<PagerView>()

  const onPageSelectedInner = React.useCallback(
    (e: PageSelectedEvent) => {
      setSelectedPage(e.nativeEvent.position)
      onPageSelected?.(e)
    },
    [setSelectedPage, onPageSelected],
  )

  const onTabBarSelect = React.useCallback(
    (index: number) => {
      pagerView.current?.setPage(index)
    },
    [pagerView],
  )

  return (
    <View>
      <TabBar
        position={position}
        offset={offset}
        items={['One', 'Two', 'Three']}
        selectedPage={selectedPage}
        onSelect={onTabBarSelect}
      />
      <AnimatedPagerView
        ref={pagerView}
        style={{height: '100%'}}
        initialPage={0}
        onPageSelected={onPageSelectedInner}
        onPageScroll={Animated.event(
          [
            {
              nativeEvent: {
                position: position,
                offset: offset,
              },
            },
          ],
          {useNativeDriver: false},
        )}>
        {children}
      </AnimatedPagerView>
    </View>
  )
}

const styles = StyleSheet.create({
  tabBar: {
    flexDirection: 'row',
  },
})