Skip to content

Commit

Permalink
test
Browse files Browse the repository at this point in the history
  • Loading branch information
ansh committed Dec 13, 2023
1 parent 40a74dd commit b976857
Show file tree
Hide file tree
Showing 3 changed files with 110 additions and 37 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@
"@react-native-clipboard/clipboard": "^1.10.0",
"@react-native-community/blur": "^4.3.0",
"@react-native-community/datetimepicker": "7.2.0",
"@react-native-masked-view/masked-view": "^0.3.1",
"@react-native-menu/menu": "^0.8.0",
"@react-native-picker/picker": "2.4.10",
"@react-navigation/bottom-tabs": "^6.5.7",
Expand Down
141 changes: 104 additions & 37 deletions src/Splash.tsx
Original file line number Diff line number Diff line change
@@ -1,9 +1,17 @@
import React from 'react'
import {View, Image, StyleSheet, Animated, Easing} from 'react-native'
import Constants from 'expo-constants'
import React, {useCallback, useEffect} from 'react'
import {View, Image, StyleSheet} from 'react-native'
import * as SplashScreen from 'expo-splash-screen'
// @ts-ignore
import splashImagePointer from '../assets/splash.png'
import splashImagePointer from '../assets/icon-android-foreground.png'
import LinearGradient from 'react-native-linear-gradient'
import Animated, {
interpolate,
runOnJS,
useAnimatedStyle,
useSharedValue,
withTiming,
} from 'react-native-reanimated'
import MaskedView from '@react-native-masked-view/masked-view'

const splashImageUri = Image.resolveAssetSource(splashImagePointer).uri

Expand All @@ -14,48 +22,107 @@ type Props = {
SplashScreen.preventAutoHideAsync().catch(() => {})

export function Splash(props: React.PropsWithChildren<Props>) {
const animation = React.useMemo(() => new Animated.Value(1), [])
const progress = useSharedValue(0)
const [isAnimationComplete, setIsAnimationComplete] = React.useState(false)

React.useEffect(() => {
if (props.isReady) {
Animated.timing(animation, {
toValue: 1.5,
duration: 500,
useNativeDriver: true,
easing: Easing.cubic,
}).start(() => setIsAnimationComplete(true))
}
}, [animation, props.isReady, setIsAnimationComplete])
const onFinish = useCallback(() => {
SplashScreen.hideAsync().catch(() => {})
setIsAnimationComplete(true)
}, [])

const onLoadEnd = React.useCallback(() => {
SplashScreen.hideAsync().catch(() => {})
}, [])

useEffect(() => {
if (props.isReady) {
progress.value = withTiming(1, {duration: 1000}, () => {
runOnJS(onFinish)()
})
}
}, [onFinish, progress, props.isReady])

const imageScale = useAnimatedStyle(() => {
return {
transform: [
{
scale: interpolate(
progress.value,
[0, 0.2, 1],
[1, 0.8, 100],
'clamp',
),
},
],
}
})

const appScale = useAnimatedStyle(() => {
return {
transform: [
{
scale: interpolate(progress.value, [0, 1], [1.1, 1]),
},
],
}
})

const opacityScale = useAnimatedStyle(() => {
return {
opacity: interpolate(progress.value, [0, 0.15, 0.3], [0, 0, 1], 'clamp'),
}
})

return (
<View>
{props.children}

{!isAnimationComplete && (
<View style={[StyleSheet.absoluteFillObject]}>
<Animated.Image
onLoadEnd={onLoadEnd}
style={[
{
width: '100%',
height: '100%',
resizeMode: Constants.expoConfig?.splash?.resizeMode || 'cover',
transform: [
{
scale: animation,
},
],
},
]}
source={{uri: splashImageUri}}
/>
</View>
<View style={{flex: 1}}>
{isAnimationComplete ? null : (
<LinearGradient
colors={['#0A7AFF', '#59B9FF']}
style={[StyleSheet.absoluteFillObject]}
/>
)}
<MaskedView
style={{flex: 1}}
maskElement={
<View
style={{
// Transparent background because mask is based off alpha channel.
backgroundColor: 'transparent',
flex: 1,
justifyContent: 'center',
alignItems: 'center',
}}>
<Animated.Image
onLoadEnd={onLoadEnd}
style={[
{
resizeMode: 'contain',
width: '50%',
height: '50%',
position: 'absolute',
top: '25%',
left: '25%',
},
imageScale,
]}
source={{uri: splashImageUri}}
/>
</View>
}>
<Animated.View style={[{flex: 1}, opacityScale, appScale]}>
{props.children}
</Animated.View>
</MaskedView>
</View>
)
}

import Svg, {SvgProps, Path} from 'react-native-svg'
const Logo = (props: SvgProps) => (
<Svg width={'100%'} height={'100%'} fill="none" {...props}>
<Path
fill="#fff"
d="M180 141.964c-16.301-31.702-60.692-90.782-101.965-119.92C38.497-5.868 23.414-1.032 13.526 3.436 2.081 8.608 0 26.178 0 36.516c0 10.338 5.667 84.756 9.364 97.178 12.215 41.044 55.696 54.913 95.74 50.462 2.047-.304 4.123-.584 6.225-.844-2.062.33-4.139.612-6.225.844-58.684 8.691-110.8 30.077-42.446 106.174 75.19 77.85 103.047-16.693 117.342-64.628 14.295 47.935 30.76 139.069 115.995 64.628 64.005-64.628 17.585-97.48-41.099-106.172a131.118 131.118 0 0 1-6.225-.843c2.102.259 4.178.54 6.225.843 40.044 4.452 83.525-9.418 95.74-50.461 3.697-12.422 9.364-86.84 9.364-97.178 0-10.338-2.081-27.909-13.526-33.08-9.888-4.468-24.971-9.305-64.509 18.608C240.692 51.184 196.301 110.262 180 141.964Z"
/>
</Svg>
)
5 changes: 5 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -4434,6 +4434,11 @@
resolved "https://registry.yarnpkg.com/@react-native-community/eslint-plugin/-/eslint-plugin-1.3.0.tgz#9e558170c106bbafaa1ef502bd8e6d4651012bf9"
integrity sha512-+zDZ20NUnSWghj7Ku5aFphMzuM9JulqCW+aPXT6IfIXFbb8tzYTTOSeRFOtuekJ99ibW2fUCSsjuKNlwDIbHFg==

"@react-native-masked-view/masked-view@^0.3.1":
version "0.3.1"
resolved "https://registry.yarnpkg.com/@react-native-masked-view/masked-view/-/masked-view-0.3.1.tgz#5bd76f17004a6ccbcec03856893777ee91f23d29"
integrity sha512-uVm8U6nwFIlUd1iDIB5cS+lDadApKR+l8k4k84d9hn+GN4lzAIJhUZ9syYX7c022MxNgAlbxoFLt0pqKoyaAGg==

"@react-native-menu/menu@^0.8.0":
version "0.8.0"
resolved "https://registry.yarnpkg.com/@react-native-menu/menu/-/menu-0.8.0.tgz#dbf227c2081e5ffd3d2073ee68ecc84cf8639727"
Expand Down

0 comments on commit b976857

Please sign in to comment.