1 files changed, 69 insertions, 0 deletions
diff --git a/src/view/com/pager/Pager.web.tsx b/src/view/com/pager/Pager.web.tsx
new file mode 100644
index 000000000..3c2805833
--- /dev/null
+++ b/src/view/com/pager/Pager.web.tsx
@@ -0,0 +1,69 @@
+import React from 'react'
+import {Animated, View} from 'react-native'
+import {useAnimatedValue} from 'lib/hooks/useAnimatedValue'
+import {s} from 'lib/styles'
+
+export interface RenderTabBarFnProps {
+  selectedPage: number
+  position: Animated.Value
+  offset: Animated.Value
+  onSelect?: (index: number) => void
+}
+export type RenderTabBarFn = (props: RenderTabBarFnProps) => JSX.Element
+
+interface Props {
+  tabBarPosition?: 'top' | 'bottom'
+  initialPage?: number
+  renderTabBar: RenderTabBarFn
+  onPageSelected?: (index: number) => void
+}
+export const Pager = ({
+  children,
+  tabBarPosition = 'top',
+  initialPage = 0,
+  renderTabBar,
+  onPageSelected,
+}: React.PropsWithChildren<Props>) => {
+  const [selectedPage, setSelectedPage] = React.useState(initialPage)
+  const position = useAnimatedValue(0)
+  const offset = useAnimatedValue(0)
+
+  const onTabBarSelect = React.useCallback(
+    (index: number) => {
+      setSelectedPage(index)
+      onPageSelected?.(index)
+      Animated.timing(position, {
+        toValue: index,
+        duration: 200,
+        useNativeDriver: true,
+      }).start()
+    },
+    [setSelectedPage, onPageSelected, position],
+  )
+
+  return (
+    <View>
+      {tabBarPosition === 'top' &&
+        renderTabBar({
+          selectedPage,
+          position,
+          offset,
+          onSelect: onTabBarSelect,
+        })}
+      {children.map((child, i) => (
+        <View
+          style={selectedPage === i ? undefined : s.hidden}
+          key={`page-${i}`}>
+          {child}
+        </View>
+      ))}
+      {tabBarPosition === 'bottom' &&
+        renderTabBar({
+          selectedPage,
+          position,
+          offset,
+          onSelect: onTabBarSelect,
+        })}
+    </View>
+  )
+}