animate transitions on web only

src/screens/Login/ScreenTransition.tsx

@@ -0,0 +1,10 @@
+import React from 'react'
+import Animated, {FadeInRight, FadeOutLeft} from 'react-native-reanimated'
+
+export function ScreenTransition({children}: {children: React.ReactNode}) {
+  return (
+    <Animated.View entering={FadeInRight} exiting={FadeOutLeft}>
+      {children}
+    </Animated.View>
+  )
+}

src/screens/Login/ScreenTransition.web.tsx

@@ -0,0 +1 @@
+export {Fragment as ScreenTransition} from 'react'

src/screens/Login/index.tsx

@@ -2,7 +2,6 @@ import React from 'react'
 import {KeyboardAvoidingView} from 'react-native'
 import {useAnalytics} from '#/lib/analytics/analytics'
 import {useLingui} from '@lingui/react'
-import Animated, {FadeInRight, FadeOutLeft} from 'react-native-reanimated'
 
 import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout'
 import {SessionAccount, useSession} from '#/state/session'
@@ -17,6 +16,7 @@ import {ForgotPasswordForm} from '#/screens/Login/ForgotPasswordForm'
 import {SetNewPasswordForm} from '#/screens/Login/SetNewPasswordForm'
 import {PasswordUpdatedForm} from '#/screens/Login/PasswordUpdatedForm'
 import {LoginForm} from '#/screens/Login/LoginForm'
+import {ScreenTransition} from './ScreenTransition'
 
 enum Forms {
   Login,
@@ -161,12 +161,7 @@ export const Login = ({onPressBack}: {onPressBack: () => void}) => {
   return (
     <KeyboardAvoidingView testID="signIn" behavior="padding" style={a.flex_1}>
       <LoggedOutLayout leadin="" title={title} description={description}>
-        <Animated.View
+        <ScreenTransition key={currentForm}>{content}</ScreenTransition>
-          entering={FadeInRight}
-          exiting={FadeOutLeft}
-          key={currentForm}>
-          {content}
-        </Animated.View>
       </LoggedOutLayout>
     </KeyboardAvoidingView>
   )