Skip to content

Commit

Permalink
sdp-tech#83 feat: set splash screen with lottieView
Browse files Browse the repository at this point in the history
  • Loading branch information
eujin-shin committed Jul 5, 2024
1 parent da994b7 commit 7279c21
Show file tree
Hide file tree
Showing 6 changed files with 89 additions and 17 deletions.
30 changes: 21 additions & 9 deletions App.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { useState } from 'react';
import { View, TouchableOpacity, Text } from 'react-native';
import {
NavigationContainer,
Expand All @@ -22,6 +22,7 @@ import { GestureHandlerRootView } from 'react-native-gesture-handler';
import { BottomBarProvider, useBottomBar } from './contexts/BottomBarContext';
import { LoginProvider } from './src/common/Context';
import Reformer from './src/components/Auth/Reformer/Reformer';
import SplashScreen from './src/common/SplashScreen';

export type StackProps = {
Home: undefined;
Expand All @@ -40,19 +41,30 @@ const GlobalTheme = {
};

function App(): React.JSX.Element {
const [isSplashFinished, setIsSplashFinished] = useState(false);

const finishSplash = () => {
console.log('finished');
setIsSplashFinished(true);
};

return (
<BottomBarProvider>
<GestureHandlerRootView style={{ flex: 1 }}>
<LoginProvider>
<NavigationContainer theme={GlobalTheme}>
<Stack.Navigator
screenOptions={() => ({
headerShown: false,
})}>
<Stack.Screen name="Home" component={HomeTab} />
<Stack.Screen name="Signin" component={SignIn} />
<Stack.Screen name="ReformProfile" component={Reformer} />
</Stack.Navigator>
{!isSplashFinished ? (
<SplashScreen onFinish={finishSplash} />
) : (
<Stack.Navigator
screenOptions={() => ({
headerShown: false,
})}>
<Stack.Screen name="Home" component={HomeTab} />
<Stack.Screen name="Signin" component={SignIn} />
<Stack.Screen name="ReformProfile" component={Reformer} />
</Stack.Navigator>
)}
</NavigationContainer>
</LoginProvider>
</GestureHandlerRootView>
Expand Down
12 changes: 12 additions & 0 deletions ios/Podfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,10 @@ PODS:
- hermes-engine/Pre-built (= 0.73.2)
- hermes-engine/Pre-built (0.73.2)
- libevent (2.1.12)
- lottie-ios (3.4.0)
- lottie-react-native (5.1.5):
- lottie-ios (~> 3.4.0)
- React-Core
- OpenSSL-Universal (1.1.1100)
- RCT-Folly (2022.05.16.00):
- boost
Expand Down Expand Up @@ -1186,6 +1190,8 @@ DEPENDENCIES:
- glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
- hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
- libevent (~> 2.1.12)
- lottie-ios (from `../node_modules/lottie-ios`)
- lottie-react-native (from `../node_modules/lottie-react-native`)
- OpenSSL-Universal (= 1.1.1100)
- RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
- RCT-Folly/Fabric (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`)
Expand Down Expand Up @@ -1277,6 +1283,10 @@ EXTERNAL SOURCES:
hermes-engine:
:podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec"
:tag: hermes-2023-11-17-RNv0.73.0-21043a3fc062be445e56a2c10ecd8be028dd9cc5
lottie-ios:
:path: "../node_modules/lottie-ios"
lottie-react-native:
:path: "../node_modules/lottie-react-native"
RCT-Folly:
:podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
RCTRequired:
Expand Down Expand Up @@ -1408,6 +1418,8 @@ SPEC CHECKSUMS:
glog: 035f1e36e53b355cf70f6434d161b36e7d21fecd
hermes-engine: b361c9ef5ef3cda53f66e195599b47e1f84ffa35
libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
lottie-ios: 69495122151a378fdc7d1bb4c5930347e37baf1f
lottie-react-native: 3e722c63015fdb9c27638b0a77969fc412067c18
OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
RCT-Folly: 7169b2b1c44399c76a47b5deaaba715eeeb476c0
RCTRequired: 9b1e7e262745fb671e33c51c1078d093bd30e322
Expand Down
3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@
"@react-navigation/native-stack": "^6.9.17",
"@react-navigation/stack": "^6.3.20",
"axios": "^1.6.3",
"lottie-react-native": "^6.7.2",
"lottie-ios": "3.4.0",
"lottie-react-native": "5.1.5",
"punycode": "^2.3.1",
"react": "18.2.0",
"react-dom": "^18.2.0",
Expand Down
1 change: 1 addition & 0 deletions src/assets/common/lottie/animation/SplashAnimation.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{"nm":"Happy face","ddd":0,"h":300,"w":279,"meta":{"g":"LottieFiles Figma v62"},"layers":[{"ty":4,"nm":"Ellipse 2","sr":1,"st":0,"op":163,"ip":0,"hd":false,"ddd":0,"bm":0,"hasMask":false,"ao":0,"ks":{"a":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[43.5,44.5],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[27.09,44.5],"t":18},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[43.5,44.5],"t":36},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[43.5,27.71],"t":54},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[43.5,44.5],"t":72},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[27.09,44.5],"t":90},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[43.5,44.5],"t":108},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[43.5,27.71],"t":126},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[43.5,44.5],"t":144},{"s":[43.5,44.5],"t":162}]},"s":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":18},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":36},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":54},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":72},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":90},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":108},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":126},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100,100],"t":144},{"s":[100,100],"t":162}]},"sk":{"a":0,"k":0},"p":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[139.5,149.5],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[138.09,149.5],"t":18},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[139.5,149.5],"t":36},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[139.5,132.71],"t":54},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[139.5,149.5],"t":72},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[155.91,149.5],"t":90},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[139.5,149.5],"t":108},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[139.5,166.29],"t":126},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[139.5,149.5],"t":144},{"s":[139.5,149.5],"t":162}]},"r":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":18},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":36},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":54},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":72},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":90},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":108},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":126},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0],"t":144},{"s":[0],"t":162}]},"sa":{"a":0,"k":0},"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":18},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":36},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":54},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":72},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":90},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":108},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":126},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":144},{"s":[100],"t":162}]}},"shapes":[{"ty":"sh","bm":0,"hd":false,"nm":"","d":1,"ks":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[24.02,0],[0,24.58],[-24.02,0],[0,-24.58]],"o":[[0,24.58],[-24.02,0],[0,-24.58],[24.02,0],[0,0]],"v":[[87,44.5],[43.5,89],[0,44.5],[43.5,0],[87,44.5]]}],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[24.02,0],[0,24.58],[-24.02,0],[0,-24.58]],"o":[[0,24.58],[-24.02,0],[0,-24.58],[24.02,0],[0,0]],"v":[[43.5,44.5],[43.5,89],[0,44.5],[43.5,0],[43.5,44.5]]}],"t":18},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[24.02,0],[0,24.58],[-24.02,0],[0,-24.58]],"o":[[0,24.58],[-24.02,0],[0,-24.58],[24.02,0],[0,0]],"v":[[87,44.5],[43.5,89],[0,44.5],[43.5,0],[87,44.5]]}],"t":36},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[24.02,0],[0,24.58],[-24.02,0],[0,-24.58]],"o":[[0,24.58],[-24.02,0],[0,-24.58],[24.02,0],[0,0]],"v":[[87,44.5],[43.5,44.5],[0,44.5],[43.5,0],[87,44.5]]}],"t":54},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[24.02,0],[0,24.58],[-24.02,0],[0,-24.58]],"o":[[0,24.58],[-24.02,0],[0,-24.58],[24.02,0],[0,0]],"v":[[87,44.5],[43.5,89],[0,44.5],[43.5,0],[87,44.5]]}],"t":72},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[24.02,0],[0,24.58],[-24.02,0],[0,-24.58]],"o":[[0,24.58],[-24.02,0],[0,-24.58],[24.02,0],[0,0]],"v":[[54.18,44.5],[10.68,89],[10.68,44.5],[10.68,0],[54.18,44.5]]}],"t":90},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[24.02,0],[0,24.58],[-24.02,0],[0,-24.58]],"o":[[0,24.58],[-24.02,0],[0,-24.58],[24.02,0],[0,0]],"v":[[87,44.5],[43.5,89],[0,44.5],[43.5,0],[87,44.5]]}],"t":108},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[24.02,0],[0,24.58],[-24.02,0],[0,-24.58]],"o":[[0,24.58],[-24.02,0],[0,-24.58],[24.02,0],[0,0]],"v":[[87,10.92],[43.5,55.42],[0,10.92],[43.5,10.92],[87,10.92]]}],"t":126},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[{"c":true,"i":[[0,0],[24.02,0],[0,24.58],[-24.02,0],[0,-24.58]],"o":[[0,24.58],[-24.02,0],[0,-24.58],[24.02,0],[0,0]],"v":[[87,44.5],[43.5,89],[0,44.5],[43.5,0],[87,44.5]]}],"t":144},{"s":[{"c":true,"i":[[0,0],[24.02,0],[0,24.58],[-24.02,0],[0,-24.58]],"o":[[0,24.58],[-24.02,0],[0,-24.58],[24.02,0],[0,0]],"v":[[87,44.5],[43.5,89],[0,44.5],[43.5,0],[87,44.5]]}],"t":162}]}},{"ty":"fl","bm":0,"hd":false,"nm":"","c":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0,0,0,1],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.0448,0.9952,0.0765,1],"t":18},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.1701,0.9699,0.1968,1],"t":36},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.3137,0.7569,0.3294,1],"t":54},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.3167,0.1701,0.9699,1],"t":72},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.1451,0,0.7686,1],"t":90},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.3167,0.1701,0.9699,1],"t":108},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0.2392,0.2824,0.3255,1],"t":126},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[0,0.4,0,1],"t":144},{"s":[0,0,0,1],"t":162}]},"r":1,"o":{"a":1,"k":[{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":0},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":18},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":36},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":54},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":72},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":90},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":108},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":126},{"o":{"x":0.33,"y":1},"i":{"x":0.68,"y":1},"s":[100],"t":144},{"s":[100],"t":162}]}}],"ind":1}],"v":"5.7.0","fr":60,"op":162,"ip":0,"assets":[]}
30 changes: 28 additions & 2 deletions src/common/SplashScreen.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,34 @@
import React from 'react';
import LottieView from 'lottie-react-native';
import { Dimensions, View } from 'react-native';
import { PURPLE } from '../styles/GlobalColor';

const SplashScreen = () => {
return <LottieView />;
const SplashScreen = ({ onFinish }: { onFinish: () => void }) => {
const { width, height } = Dimensions.get('screen');

return (
<View
style={{
height: height,
width: width,
backgroundColor: PURPLE,
justifyContent: 'center',
alignItems: 'center',
}}>
<View
style={{
width: '90%',
height: '80%',
}}>
<LottieView
source={require('../assets/common/lottie/animation/SplashAnimation.json')}
onAnimationFinish={onFinish}
loop={false}
autoPlay
/>
</View>
</View>
);
};

export default SplashScreen;
30 changes: 25 additions & 5 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -3686,6 +3686,11 @@ decode-uri-component@^0.2.2:
resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.2.tgz#e69dbe25d37941171dd540e024c444cd5188e1e9"
integrity sha512-FqUYQ+8o158GyGTrMFJms9qh3CqTKvAqgqsTnkLI8sKu0028orqBhxNMFkFen0zGyg6epACD32pjVk58ngIErQ==

dedent@^0.6.0:
version "0.6.0"
resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.6.0.tgz#0e6da8f0ce52838ef5cec5c8f9396b0c1b64a3cb"
integrity sha512-cSfRWjXJtZQeRuZGVvDrJroCR5V2UvBNUMHsPCdNYzuAG8b9V8aAy3KUcdQrGQPXs17Y+ojbPh1aOCplg9YR9g==

dedent@^1.0.0:
version "1.5.3"
resolved "https://registry.yarnpkg.com/dedent/-/dedent-1.5.3.tgz#99aee19eb9bae55a67327717b6e848d0bf777e5a"
Expand Down Expand Up @@ -4936,7 +4941,7 @@ internal-slot@^1.0.4, internal-slot@^1.0.7:
hasown "^2.0.0"
side-channel "^1.0.4"

[email protected], invariant@^2.2.4:
[email protected], invariant@^2.2.2, invariant@^2.2.4:
version "2.2.4"
resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
Expand Down Expand Up @@ -5901,10 +5906,18 @@ loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
dependencies:
js-tokens "^3.0.0 || ^4.0.0"

lottie-react-native@^6.7.2:
version "6.7.2"
resolved "https://registry.yarnpkg.com/lottie-react-native/-/lottie-react-native-6.7.2.tgz#615fc16f88970fcbdf63699537f499b5937afe8a"
integrity sha512-MZVx6N1EeO/EaSx8T44mJ0aHc5Mqee+xIfWwszni0oz8U2wlHdaWGjES44dHxaxgAp/0dRaFt3PkpZ6egTzcBg==
[email protected]:
version "3.4.0"
resolved "https://registry.yarnpkg.com/lottie-ios/-/lottie-ios-3.4.0.tgz#a23be299760aefb44298b9cb5f60df489030adbf"
integrity sha512-qnV8UrawwnBRf5V0no2yxlPUE69vzfFqpxEEXGTZhb1/WX1xewqVNYvtbguqwQkdu9IT9D5WC1U9CHZ1KbkGDw==

[email protected]:
version "5.1.5"
resolved "https://registry.yarnpkg.com/lottie-react-native/-/lottie-react-native-5.1.5.tgz#6696fb95773639d04bbba332d753ab69669bccd0"
integrity sha512-xl6uEo50joQeIqso5SvPKt1uGBqMhgNgs+36S4725Nfigf4zAY23/I9QEEkJF+1BHq7wKCeYha2KafLTm20gqA==
dependencies:
invariant "^2.2.2"
react-native-safe-modules "^1.0.3"

lower-case@^2.0.2:
version "2.0.2"
Expand Down Expand Up @@ -6945,6 +6958,13 @@ react-native-safe-area-context@^4.8.2:
resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.10.7.tgz#91d04e510bf96e3c38bec2beb7ae37347522a503"
integrity sha512-Lq+gtuIF28mMtBacFchGpO1KHMTvzeb3ji1HAVnMTPe3qWR46Tb4AlztZTvTwUnpZ8JVaC9sKXnJHKmuaIQwXA==

react-native-safe-modules@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/react-native-safe-modules/-/react-native-safe-modules-1.0.3.tgz#f5f29bb9d09d17581193843d4173ad3054f74890"
integrity sha512-DUxti4Z+AgJ/ZsO5U7p3uSCUBko8JT8GvFlCeOXk9bMd+4qjpoDvMYpfbixXKgL88M+HwmU/KI1YFN6gsQZyBA==
dependencies:
dedent "^0.6.0"

react-native-safearea-height@^1.0.6:
version "1.0.6"
resolved "https://registry.yarnpkg.com/react-native-safearea-height/-/react-native-safearea-height-1.0.6.tgz#ece54ae953ff08efe9eee7aa96581a3a9e76c930"
Expand Down

0 comments on commit 7279c21

Please sign in to comment.