55 lines
1.4 KiB
JavaScript
55 lines
1.4 KiB
JavaScript
import { useState, useEffect, createContext, useRef } from 'react'
|
|
import { StyleSheet, Animated } from 'react-native'
|
|
import { Palette, Style } from '../styles'
|
|
import { Image } from 'expo-image'
|
|
|
|
export const SplashAnimationContext = createContext()
|
|
|
|
const SplashAnimationProvider = ({ children }) => {
|
|
const [isFullyLoaded, setIsFullyLoaded] = useState(false)
|
|
const [showOverlay, setShowOverlay] = useState(true)
|
|
|
|
const fadeAnim = useRef(new Animated.Value(1)).current
|
|
|
|
useEffect(() => {
|
|
if (isFullyLoaded) {
|
|
Animated.timing(fadeAnim, {
|
|
toValue: 0,
|
|
duration: 500,
|
|
useNativeDriver: true,
|
|
}).start(() => {
|
|
setShowOverlay(false)
|
|
})
|
|
}
|
|
}, [isFullyLoaded])
|
|
|
|
return (
|
|
<SplashAnimationContext.Provider value={{ isFullyLoaded, setIsFullyLoaded }}>
|
|
{children}
|
|
|
|
{showOverlay && (
|
|
<Animated.View
|
|
style={{
|
|
...StyleSheet.absoluteFillObject,
|
|
flex: 1,
|
|
...Style.containerCenter,
|
|
backgroundColor: Palette.darkPurple,
|
|
opacity: fadeAnim,
|
|
}}
|
|
>
|
|
<Image
|
|
source={require('../../assets/splash.png')}
|
|
contentFit={'contain'}
|
|
style={{
|
|
width: 250,
|
|
height: 250,
|
|
}}
|
|
/>
|
|
</Animated.View>
|
|
)}
|
|
</SplashAnimationContext.Provider>
|
|
)
|
|
}
|
|
|
|
export default SplashAnimationProvider
|