Better screen transitions for auth flow (#7803)

2025-09-23 20:04:22 +03:00
parent 6d85fe05d1
commit 7916c73b09
13 changed files with 265 additions and 216 deletions
@@ -1,5 +1,6 @@
 import {type StyleProp, type ViewStyle} from 'react-native'
 import Animated, {
+  Easing,
  FadeIn,
  FadeOut,
  SlideInLeft,
@@ -13,17 +14,25 @@ export function ScreenTransition({
  direction,
  style,
  children,
+  enabledWeb,
 }: {
  direction: 'Backward' | 'Forward'
  style?: StyleProp<ViewStyle>
  children: React.ReactNode
+  enabledWeb?: boolean
 }) {
-  const entering = direction === 'Forward' ? SlideInRight : SlideInLeft
+  const entering =
+    direction === 'Forward'
+      ? SlideInRight.easing(Easing.out(Easing.exp))
+      : SlideInLeft.easing(Easing.out(Easing.exp))
+  const webEntering = enabledWeb ? FadeIn.duration(90) : undefined
+  const exiting = FadeOut.duration(90) // Totally vibes based
+  const webExiting = enabledWeb ? FadeOut.duration(90) : undefined

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