Way to switch scroll animation

[vanilla-dd]

However, when you navigate between multiple pages the animation is different now (it cycles through the pages instead of just swiping like it's the next one). That's why we decided to go with a major release.

The animation of previous version was way more subtle and clean. The new one is way too fast and looks glitchy.

i would love to know if there a way to switch to scroll animation that was in v7.

Thanks for the works. Its a great lib.

[SSHristow]

I found a way, but it comes with different behaviour.

If you render only the page that is selected, it works like before (isActive does the trick).
And the only issue is that if you want to persist your state while switching tabs it won't work. Because the component unmounts on page change

here is my component

import { Dispatch, SetStateAction, useCallback, useMemo, useRef } from 'react'

import { Platform, View } from 'react-native'
import PagerView from 'react-native-pager-view'

import TabBar from './TabBar'
import { Box } from '../ui'

import { ThemeSpaces } from '~/lib/theme'

type TabViewProps = {
  gap?: keyof ThemeSpaces
  index: number
  onIndexChange: Dispatch<SetStateAction<number>>
  routes: {
    component: React.ReactNode
    key: string
    title: string
  }[]
}

const TabView = ({ index, onIndexChange, routes, gap = 0 }: TabViewProps) => {
  const pagerRef = useRef<PagerView>(null)

  const handleTabPress = useCallback(
    (index: number) => {
      if (Platform.OS === 'android') {
        pagerRef.current?.setPageWithoutAnimation(index)
      } else {
        pagerRef.current?.setPage(index)
      }

      onIndexChange(index)
    },
    [onIndexChange],
  )

  const handlePageSelected = useCallback(
    ({ nativeEvent }: { nativeEvent: { position: number } }) => {
      onIndexChange(nativeEvent.position)
    },
    [onIndexChange],
  )

  const memoizedRoutes = useMemo(() => {
    return routes.map((route, routeIndex) => {
      const isActive = routeIndex === index

      return <View key={route.key}>{isActive ? route.component : null}</View>
    })
  }, [index, routes])

  const tabRoutes = useMemo(
    () => routes.map(route => ({ key: route.key, title: route.title })),
    [routes],
  )

  return (
    <Box.Column flex={1} gap={gap}>
      <TabBar routes={tabRoutes} activeIndex={index} onTabPress={handleTabPress} />
      <PagerView
        ref={pagerRef}
        style={{ flex: 1 }}
        initialPage={0}
        onPageSelected={handlePageSelected}
      >
        {memoizedRoutes}
      </PagerView>
    </Box.Column>
  )
}

export default TabView

then I use it like this

const [index, setIndex] = useState<number>(0)

  const routes = useMemo(
    () => [
      {
        key: 'screen1',
        title: t('screen1'),
        component: <Screen1 />,
      },
      { key: 'screen2', title: t('screen2'), component: <Screen2 /> },
      { key: 'screen3', title: t('screen3'), component: <Screen3 /> },
    ],
    [t],
  )

  return (
    <Box.Screen>
      <TabView index={index} onIndexChange={setIndex} routes={routes} gap={24} />
    </Box.Screen>
  )