From 3d87a274040cfdf9ad088e69671ace3a84962a1b Mon Sep 17 00:00:00 2001 From: Hailey Date: Sun, 1 Dec 2024 15:47:12 -0800 Subject: [PATCH 1/2] rm --- package.json | 1 - src/Splash.tsx | 155 +++++++++++++++++-------------------------------- yarn.lock | 5 -- 3 files changed, 54 insertions(+), 107 deletions(-) diff --git a/package.json b/package.json index ddb90c4f65..b7f3e4d492 100644 --- a/package.json +++ b/package.json @@ -80,7 +80,6 @@ "@radix-ui/react-focus-guards": "^1.1.1", "@radix-ui/react-focus-scope": "^1.1.0", "@react-native-async-storage/async-storage": "1.23.1", - "@react-native-masked-view/masked-view": "0.3.0", "@react-native-menu/menu": "^1.1.0", "@react-native-picker/picker": "2.6.1", "@react-navigation/bottom-tabs": "^6.5.20", diff --git a/src/Splash.tsx b/src/Splash.tsx index a52b8837d1..6b8df336fd 100644 --- a/src/Splash.tsx +++ b/src/Splash.tsx @@ -18,9 +18,7 @@ import {useSafeAreaInsets} from 'react-native-safe-area-context' import Svg, {Path, SvgProps} from 'react-native-svg' import {Image} from 'expo-image' import * as SplashScreen from 'expo-splash-screen' -import MaskedView from '@react-native-masked-view/masked-view' -import {isAndroid} from '#/platform/detection' import {Logotype} from '#/view/icons/Logotype' // @ts-ignore import splashImagePointer from '../assets/splash.png' @@ -53,8 +51,6 @@ type Props = { isReady: boolean } -const AnimatedLogo = Animated.createAnimatedComponent(Logo) - export function Splash(props: React.PropsWithChildren) { 'use no memo' const insets = useSafeAreaInsets() @@ -81,40 +77,40 @@ export function Splash(props: React.PropsWithChildren) { return { transform: [ { - scale: interpolate(intro.get(), [0, 1], [0.8, 1], 'clamp'), + scale: interpolate(intro.value, [0, 1], [0.8, 1], 'clamp'), }, { scale: interpolate( - outroLogo.get(), + outroLogo.value, [0, 0.08, 1], [1, 0.8, 500], 'clamp', ), }, ], - opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'), + opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'), } }) const bottomLogoAnimation = useAnimatedStyle(() => { return { - opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'), + opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'), } }) const reducedLogoAnimation = useAnimatedStyle(() => { return { transform: [ { - scale: interpolate(intro.get(), [0, 1], [0.8, 1], 'clamp'), + scale: interpolate(intro.value, [0, 1], [0.8, 1], 'clamp'), }, ], - opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'), + opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'), } }) const logoWrapperAnimation = useAnimatedStyle(() => { return { opacity: interpolate( - outroAppOpacity.get(), + outroAppOpacity.value, [0, 0.1, 0.2, 1], [1, 1, 0, 0], 'clamp', @@ -126,11 +122,11 @@ export function Splash(props: React.PropsWithChildren) { return { transform: [ { - scale: interpolate(outroApp.get(), [0, 1], [1.1, 1], 'clamp'), + scale: interpolate(outroApp.value, [0, 1], [1.1, 1], 'clamp'), }, ], opacity: interpolate( - outroAppOpacity.get(), + outroAppOpacity.value, [0, 0.1, 0.2, 1], [0, 0, 1, 1], 'clamp', @@ -146,37 +142,29 @@ export function Splash(props: React.PropsWithChildren) { if (isReady) { SplashScreen.hideAsync() .then(() => { - intro.set(() => - withTiming( - 1, - {duration: 400, easing: Easing.out(Easing.cubic)}, - async () => { - // set these values to check animation at specific point - // outroLogo.set(0.1) - // outroApp.set(0.1) - outroLogo.set(() => - withTiming( - 1, - {duration: 1200, easing: Easing.in(Easing.cubic)}, - () => { - runOnJS(onFinish)() - }, - ), - ) - outroApp.set(() => - withTiming(1, { - duration: 1200, - easing: Easing.inOut(Easing.cubic), - }), - ) - outroAppOpacity.set(() => - withTiming(1, { - duration: 1200, - easing: Easing.in(Easing.cubic), - }), - ) - }, - ), + intro.value = withTiming( + 1, + {duration: 400, easing: Easing.out(Easing.cubic)}, + async () => { + // set these values to check animation at specific point + // outroLogo.value = 0.1 + // outroApp.value = 0.1 + outroLogo.value = withTiming( + 1, + {duration: 1200, easing: Easing.in(Easing.cubic)}, + () => { + runOnJS(onFinish)() + }, + ) + outroApp.value = withTiming(1, { + duration: 1200, + easing: Easing.inOut(Easing.cubic), + }) + outroAppOpacity.value = withTiming(1, { + duration: 1200, + easing: Easing.in(Easing.cubic), + }) + }, ) }) .catch(() => {}) @@ -221,66 +209,31 @@ export function Splash(props: React.PropsWithChildren) { )} - {isReady && - (isAndroid || reduceMotion === true ? ( - // Use a simple fade on older versions of android (work around a bug) - <> - - {props.children} - + {isReady && ( + <> + + {props.children} + - {!isAnimationComplete && ( - - + {!isAnimationComplete && ( + + + - )} - - ) : ( - - - - }> - {!isAnimationComplete && ( - - )} - - {props.children} - - ))} + )} + + )} ) } diff --git a/yarn.lock b/yarn.lock index f70489e179..54e0ddd33f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5655,11 +5655,6 @@ prompts "^2.4.2" semver "^7.5.2" -"@react-native-masked-view/masked-view@0.3.0": - version "0.3.0" - resolved "https://registry.yarnpkg.com/@react-native-masked-view/masked-view/-/masked-view-0.3.0.tgz#bd29fae18d148a685331910a3c7b766ce87eafcc" - integrity sha512-qLyoObcjzrkpNcoJjXquUePXfL1dXjHtuv+yX0zZ0Q4kG5yvVqd620+tSh7WbRoHkjpXhFBfLwvGhcWB2I0Lpw== - "@react-native-menu/menu@^1.1.0": version "1.1.0" resolved "https://registry.yarnpkg.com/@react-native-menu/menu/-/menu-1.1.0.tgz#e89c0850f7e5aa4c671c44a9c10edafadb23c35a" From 3f81d262e1f9ffddfa7329374049217340e5778c Mon Sep 17 00:00:00 2001 From: Hailey Date: Sun, 1 Dec 2024 16:00:27 -0800 Subject: [PATCH 2/2] use .set/.set --- src/Splash.tsx | 70 +++++++++++++++++++++++++++----------------------- 1 file changed, 38 insertions(+), 32 deletions(-) diff --git a/src/Splash.tsx b/src/Splash.tsx index 6b8df336fd..c31723aaa1 100644 --- a/src/Splash.tsx +++ b/src/Splash.tsx @@ -77,40 +77,40 @@ export function Splash(props: React.PropsWithChildren) { return { transform: [ { - scale: interpolate(intro.value, [0, 1], [0.8, 1], 'clamp'), + scale: interpolate(intro.get(), [0, 1], [0.8, 1], 'clamp'), }, { scale: interpolate( - outroLogo.value, + outroLogo.get(), [0, 0.08, 1], [1, 0.8, 500], 'clamp', ), }, ], - opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'), + opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'), } }) const bottomLogoAnimation = useAnimatedStyle(() => { return { - opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'), + opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'), } }) const reducedLogoAnimation = useAnimatedStyle(() => { return { transform: [ { - scale: interpolate(intro.value, [0, 1], [0.8, 1], 'clamp'), + scale: interpolate(intro.get(), [0, 1], [0.8, 1], 'clamp'), }, ], - opacity: interpolate(intro.value, [0, 1], [0, 1], 'clamp'), + opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'), } }) const logoWrapperAnimation = useAnimatedStyle(() => { return { opacity: interpolate( - outroAppOpacity.value, + outroAppOpacity.get(), [0, 0.1, 0.2, 1], [1, 1, 0, 0], 'clamp', @@ -122,11 +122,11 @@ export function Splash(props: React.PropsWithChildren) { return { transform: [ { - scale: interpolate(outroApp.value, [0, 1], [1.1, 1], 'clamp'), + scale: interpolate(outroApp.get(), [0, 1], [1.1, 1], 'clamp'), }, ], opacity: interpolate( - outroAppOpacity.value, + outroAppOpacity.get(), [0, 0.1, 0.2, 1], [0, 0, 1, 1], 'clamp', @@ -142,29 +142,35 @@ export function Splash(props: React.PropsWithChildren) { if (isReady) { SplashScreen.hideAsync() .then(() => { - intro.value = withTiming( - 1, - {duration: 400, easing: Easing.out(Easing.cubic)}, - async () => { - // set these values to check animation at specific point - // outroLogo.value = 0.1 - // outroApp.value = 0.1 - outroLogo.value = withTiming( - 1, - {duration: 1200, easing: Easing.in(Easing.cubic)}, - () => { - runOnJS(onFinish)() - }, - ) - outroApp.value = withTiming(1, { - duration: 1200, - easing: Easing.inOut(Easing.cubic), - }) - outroAppOpacity.value = withTiming(1, { - duration: 1200, - easing: Easing.in(Easing.cubic), - }) - }, + intro.set(() => + withTiming( + 1, + {duration: 400, easing: Easing.out(Easing.cubic)}, + async () => { + // set these values to check animation at specific point + outroLogo.set(() => + withTiming( + 1, + {duration: 1200, easing: Easing.in(Easing.cubic)}, + () => { + runOnJS(onFinish)() + }, + ), + ) + outroApp.set(() => + withTiming(1, { + duration: 1200, + easing: Easing.inOut(Easing.cubic), + }), + ) + outroAppOpacity.set(() => + withTiming(1, { + duration: 1200, + easing: Easing.in(Easing.cubic), + }), + ) + }, + ), ) }) .catch(() => {})