forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
animate transitions on web only
+13
-7
+10
src/screens/Login/ScreenTransition.tsx
+10
src/screens/Login/ScreenTransition.tsx
···
1
+
import React from 'react'
2
+
import Animated, {FadeInRight, FadeOutLeft} from 'react-native-reanimated'
3
+
4
+
export function ScreenTransition({children}: {children: React.ReactNode}) {
5
+
return (
6
+
<Animated.View entering={FadeInRight} exiting={FadeOutLeft}>
7
+
{children}
8
+
</Animated.View>
9
+
)
10
+
}
+1
src/screens/Login/ScreenTransition.web.tsx
+1
src/screens/Login/ScreenTransition.web.tsx
···
1
+
export {Fragment as ScreenTransition} from 'react'
+2
-7
src/screens/Login/index.tsx
+2
-7
src/screens/Login/index.tsx
···
2
2
import {KeyboardAvoidingView} from 'react-native'
3
3
import {useAnalytics} from '#/lib/analytics/analytics'
4
4
import {useLingui} from '@lingui/react'
5
-
import Animated, {FadeInRight, FadeOutLeft} from 'react-native-reanimated'
6
5
7
6
import {LoggedOutLayout} from '#/view/com/util/layouts/LoggedOutLayout'
8
7
import {SessionAccount, useSession} from '#/state/session'
···
17
16
import {SetNewPasswordForm} from '#/screens/Login/SetNewPasswordForm'
18
17
import {PasswordUpdatedForm} from '#/screens/Login/PasswordUpdatedForm'
19
18
import {LoginForm} from '#/screens/Login/LoginForm'
19
+
import {ScreenTransition} from './ScreenTransition'
20
20
21
21
enum Forms {
22
22
Login,
···
161
161
return (
162
162
<KeyboardAvoidingView testID="signIn" behavior="padding" style={a.flex_1}>
163
163
<LoggedOutLayout leadin="" title={title} description={description}>
164
-
<Animated.View
165
-
entering={FadeInRight}
166
-
exiting={FadeOutLeft}
167
-
key={currentForm}>
168
-
{content}
169
-
</Animated.View>
164
+
<ScreenTransition key={currentForm}>{content}</ScreenTransition>
170
165
</LoggedOutLayout>
171
166
</KeyboardAvoidingView>
172
167
)