forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
Super secret changes don't look (#2218)
* Swap in new assets
* Refine
authored by
Eric Bailey
and committed by
GitHub
dd074371
ce6d3fa0
+26
-16
assets/icon-android-background.png
assets/icon-android-background.png
This is a binary file and will not be displayed.
assets/icon.png
assets/icon.png
This is a binary file and will not be displayed.
assets/splash-with-logo.png
assets/splash-with-logo.png
This is a binary file and will not be displayed.
assets/splash.png
assets/splash.png
This is a binary file and will not be displayed.
+26
-16
src/Splash.tsx
+26
-16
src/Splash.tsx
···
1
1
import React, {useCallback, useEffect} from 'react'
2
-
import {View, StyleSheet} from 'react-native'
2
+
import {View, StyleSheet, Image as RNImage} from 'react-native'
3
3
import * as SplashScreen from 'expo-splash-screen'
4
-
import LinearGradient from 'react-native-linear-gradient'
4
+
import {Image} from 'expo-image'
5
5
import Animated, {
6
6
interpolate,
7
7
runOnJS,
···
13
13
import MaskedView from '@react-native-masked-view/masked-view'
14
14
import {useSafeAreaInsets} from 'react-native-safe-area-context'
15
15
import Svg, {Path, SvgProps} from 'react-native-svg'
16
+
17
+
// @ts-ignore
18
+
import splashImagePointer from '../assets/splash.png'
19
+
const splashImageUri = RNImage.resolveAssetSource(splashImagePointer).uri
16
20
17
21
export const Logo = React.forwardRef(function LogoImpl(props: SvgProps, ref) {
18
22
const width = 1000
···
46
50
const outroLogo = useSharedValue(0)
47
51
const outroApp = useSharedValue(0)
48
52
const [isAnimationComplete, setIsAnimationComplete] = React.useState(false)
53
+
const [isImageLoaded, setIsImageLoaded] = React.useState(false)
54
+
const isReady = props.isReady && isImageLoaded
49
55
50
56
const logoAnimations = useAnimatedStyle(() => {
51
57
return {
···
57
63
scale: interpolate(
58
64
outroLogo.value,
59
65
[0, 0.06, 0.08, 1],
60
-
[1, 0.8, 0.8, 800],
66
+
[1, 0.8, 0.8, 400],
61
67
'clamp',
62
68
),
63
69
},
···
70
76
return {
71
77
transform: [
72
78
{
73
-
scale: interpolate(
74
-
outroApp.value,
75
-
[0, 0.7, 1],
76
-
[1.1, 1.1, 1],
77
-
'clamp',
78
-
),
79
+
scale: interpolate(outroApp.value, [0, 1], [1.1, 1], 'clamp'),
79
80
},
80
81
],
81
-
opacity: interpolate(outroApp.value, [0, 0.7, 1], [0, 0, 1], 'clamp'),
82
+
opacity: interpolate(outroApp.value, [0, 0.7, 1], [0, 1, 1], 'clamp'),
82
83
}
83
84
})
84
85
85
86
const onFinish = useCallback(() => setIsAnimationComplete(true), [])
86
87
87
88
useEffect(() => {
88
-
if (props.isReady) {
89
+
if (isReady) {
89
90
// hide on mount
90
91
SplashScreen.hideAsync().catch(() => {})
91
92
92
93
intro.value = withTiming(
93
94
1,
94
-
{duration: 200, easing: Easing.out(Easing.cubic)},
95
+
{duration: 800, easing: Easing.out(Easing.cubic)},
95
96
async () => {
97
+
// set these values to check animation at specific point
98
+
// outroLogo.value = 0.1
99
+
// outroApp.value = 0.1
96
100
outroLogo.value = withTiming(
97
101
1,
98
102
{duration: 1200, easing: Easing.in(Easing.cubic)},
···
110
114
},
111
115
)
112
116
}
113
-
}, [onFinish, intro, outroLogo, outroApp, props.isReady])
117
+
}, [onFinish, intro, outroLogo, outroApp, isReady])
118
+
119
+
const onLoadEnd = useCallback(() => {
120
+
setIsImageLoaded(true)
121
+
}, [setIsImageLoaded])
114
122
115
123
return (
116
124
<View style={{flex: 1}}>
117
125
{!isAnimationComplete && (
118
-
<LinearGradient
119
-
colors={['#0A7AFF', '#59B9FF']}
120
-
style={[StyleSheet.absoluteFillObject]}
126
+
<Image
127
+
accessibilityIgnoresInvertColors
128
+
onLoadEnd={onLoadEnd}
129
+
source={{uri: splashImageUri}}
130
+
style={StyleSheet.absoluteFillObject}
121
131
/>
122
132
)}
123
133