diff --git a/app.config.js b/app.config.js index 7528e9010c..8f2cff720f 100644 --- a/app.config.js +++ b/app.config.js @@ -310,26 +310,24 @@ module.exports = function (_config) { [ 'expo-splash-screen', { - ios: { - enableFullScreenImage_legacy: true, - backgroundColor: '#ffffff', - image: './assets/splash.png', + enableFullScreenImage_legacy: true, // iOS only + backgroundColor: '#EEF5FF', + image: './assets/splash/splash-mobile.png', + resizeMode: 'cover', + dark: { + enableFullScreenImage_legacy: true, // iOS only + backgroundColor: '#446DA9', + image: './assets/splash/splash-mobile-dark.png', resizeMode: 'cover', - dark: { - enableFullScreenImage_legacy: true, - backgroundColor: '#001429', - image: './assets/splash-dark.png', - resizeMode: 'cover', - }, }, android: { - backgroundColor: '#0c7cff', - image: './assets/splash-android-icon.png', - imageWidth: 150, + backgroundColor: '#EEF5FF', + image: './assets/splash/android-splash-logo-light.png', + imageWidth: 100, dark: { - backgroundColor: '#0c2a49', - image: './assets/splash-android-icon-dark.png', - imageWidth: 150, + backgroundColor: '#335890', + image: './assets/splash/android-splash-logo-dark.png', + imageWidth: 100, }, }, }, diff --git a/assets/splash-android-icon-dark.png b/assets/splash-android-icon-dark.png deleted file mode 100644 index c19a01dc6d..0000000000 Binary files a/assets/splash-android-icon-dark.png and /dev/null differ diff --git a/assets/splash-android-icon.png b/assets/splash-android-icon.png deleted file mode 100644 index 280386c900..0000000000 Binary files a/assets/splash-android-icon.png and /dev/null differ diff --git a/assets/splash-dark.png b/assets/splash-dark.png deleted file mode 100644 index 95176b3ff4..0000000000 Binary files a/assets/splash-dark.png and /dev/null differ diff --git a/assets/splash.png b/assets/splash.png deleted file mode 100644 index 05a7392b37..0000000000 Binary files a/assets/splash.png and /dev/null differ diff --git a/assets/splash/android-splash-logo-dark.png b/assets/splash/android-splash-logo-dark.png new file mode 100644 index 0000000000..b2b570b933 Binary files /dev/null and b/assets/splash/android-splash-logo-dark.png differ diff --git a/assets/splash/android-splash-logo-light.png b/assets/splash/android-splash-logo-light.png new file mode 100644 index 0000000000..e780e15a19 Binary files /dev/null and b/assets/splash/android-splash-logo-light.png differ diff --git a/assets/splash/splash-mobile-dark.png b/assets/splash/splash-mobile-dark.png new file mode 100644 index 0000000000..948a33c11c Binary files /dev/null and b/assets/splash/splash-mobile-dark.png differ diff --git a/assets/splash/splash-mobile.png b/assets/splash/splash-mobile.png new file mode 100644 index 0000000000..4a56835fda Binary files /dev/null and b/assets/splash/splash-mobile.png differ diff --git a/src/Splash.tsx b/src/Splash.tsx index 47e70b375f..7fc09d7ab9 100644 --- a/src/Splash.tsx +++ b/src/Splash.tsx @@ -9,55 +9,30 @@ import { import Animated, { Easing, interpolate, - runOnJS, useAnimatedStyle, useSharedValue, withTiming, } from 'react-native-reanimated' -import {useSafeAreaInsets} from 'react-native-safe-area-context' -import Svg, {Path, type SvgProps} from 'react-native-svg' import {Image} from 'expo-image' import * as SplashScreen from 'expo-splash-screen' -import {Logotype} from '#/view/icons/Logotype' // @ts-ignore -import splashImagePointer from '../assets/splash.png' +import splashImagePointer from '../assets/splash/splash-mobile.png' // @ts-ignore -import darkSplashImagePointer from '../assets/splash-dark.png' +import darkSplashImagePointer from '../assets/splash/splash-mobile-dark.png' const splashImageUri = RNImage.resolveAssetSource(splashImagePointer).uri const darkSplashImageUri = RNImage.resolveAssetSource( darkSplashImagePointer, ).uri -export const Logo = React.forwardRef(function LogoImpl(props: SvgProps, ref) { - const width = 1000 - const height = width * (67 / 64) - return ( - - - - ) -}) - type Props = { isReady: boolean } export function Splash(props: React.PropsWithChildren) { 'use no memo' - const insets = useSafeAreaInsets() - const intro = useSharedValue(0) - const outroLogo = useSharedValue(0) - const outroApp = useSharedValue(0) const outroAppOpacity = useSharedValue(0) + const colorScheme = useColorScheme() const [isAnimationComplete, setIsAnimationComplete] = React.useState(false) const [isImageLoaded, setIsImageLoaded] = React.useState(false) const [isLayoutReady, setIsLayoutReady] = React.useState(false) @@ -69,62 +44,10 @@ export function Splash(props: React.PropsWithChildren) { isImageLoaded && isLayoutReady && reduceMotion !== undefined - - const colorScheme = useColorScheme() const isDarkMode = colorScheme === 'dark' - const logoAnimation = useAnimatedStyle(() => { - return { - transform: [ - { - scale: interpolate(intro.get(), [0, 1], [0.8, 1], 'clamp'), - }, - { - scale: interpolate( - outroLogo.get(), - [0, 0.08, 1], - [1, 0.8, 500], - 'clamp', - ), - }, - ], - opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'), - } - }) - const bottomLogoAnimation = useAnimatedStyle(() => { - return { - opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'), - } - }) - const reducedLogoAnimation = useAnimatedStyle(() => { - return { - transform: [ - { - scale: interpolate(intro.get(), [0, 1], [0.8, 1], 'clamp'), - }, - ], - opacity: interpolate(intro.get(), [0, 1], [0, 1], 'clamp'), - } - }) - - const logoWrapperAnimation = useAnimatedStyle(() => { - return { - opacity: interpolate( - outroAppOpacity.get(), - [0, 0.1, 0.2, 1], - [1, 1, 0, 0], - 'clamp', - ), - } - }) - const appAnimation = useAnimatedStyle(() => { return { - transform: [ - { - scale: interpolate(outroApp.get(), [0, 1], [1.1, 1], 'clamp'), - }, - ], opacity: interpolate( outroAppOpacity.get(), [0, 0.1, 0.2, 1], @@ -142,50 +65,21 @@ 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(() => - 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), - }), - ) - }, - ), + outroAppOpacity.set(() => + withTiming(1, { + duration: 1200, + easing: Easing.in(Easing.cubic), + }), ) }) .catch(() => {}) } - }, [onFinish, intro, outroLogo, outroApp, outroAppOpacity, isReady]) + }, [onFinish, outroAppOpacity, isReady]) useEffect(() => { AccessibilityInfo.isReduceMotionEnabled().then(setReduceMotion) }, []) - const logoAnimations = - reduceMotion === true ? reducedLogoAnimation : logoAnimation - // special off-spec color for dark mode - const logoBg = isDarkMode ? '#0F1824' : '#fff' - return ( {!isAnimationComplete && ( @@ -196,22 +90,6 @@ export function Splash(props: React.PropsWithChildren) { source={{uri: isDarkMode ? darkSplashImageUri : splashImageUri}} style={StyleSheet.absoluteFillObject} /> - - - - )} @@ -220,24 +98,6 @@ export function Splash(props: React.PropsWithChildren) { {props.children} - - {!isAnimationComplete && ( - - - - - - )} )}