src/components/StarterPack/Wizard/ScreenTransition.tsx


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

import {type StyleProp, type ViewStyle} from 'react-native'
import Animated, {
  FadeIn,
  FadeOut,
  SlideInLeft,
  SlideInRight,
} from 'react-native-reanimated'
import type React from 'react'

import {isWeb} from '#/platform/detection'

export function ScreenTransition({
  direction,
  style,
  children,
}: {
  direction: 'Backward' | 'Forward'
  style?: StyleProp<ViewStyle>
  children: React.ReactNode
}) {
  const entering = direction === 'Forward' ? SlideInRight : SlideInLeft

  return (
    <Animated.View
      entering={isWeb ? FadeIn.duration(90) : entering}
      exiting={FadeOut.duration(90)} // Totally vibes based
      style={style}>
      {children}
    </Animated.View>
  )
}