[FEAT] #38 스탬프 모달 lottie 적용

BinVoyage · Dec 1, 2024 · 00c8d72 · 00c8d72
1 parent 14b878e
commit 00c8d72
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 8 deletions.
diff --git a/app/ios/Podfile.lock b/app/ios/Podfile.lock
@@ -122,6 +122,29 @@ PODS:
   - hermes-engine (0.74.3):
     - hermes-engine/Pre-built (= 0.74.3)
   - hermes-engine/Pre-built (0.74.3)
+  - lottie-ios (4.5.0)
+  - lottie-react-native (7.1.0):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - lottie-ios (= 4.5.0)
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React-Codegen
+    - React-Core
+    - React-debug
+    - React-Fabric
+    - React-featureflags
+    - React-graphics
+    - React-ImageManager
+    - React-NativeModulesApple
+    - React-RCTFabric
+    - React-rendererdebug
+    - React-utils
+    - ReactCommon/turbomodule/bridging
+    - ReactCommon/turbomodule/core
+    - Yoga
   - nanopb (3.30910.0):
     - nanopb/decode (= 3.30910.0)
     - nanopb/encode (= 3.30910.0)
@@ -1342,14 +1365,14 @@ PODS:
     - React-Core
   - RNCMaskedView (0.1.11):
     - React
-  - RNFBAnalytics (21.6.1):
+  - RNFBAnalytics (21.5.0):
     - Firebase/Analytics (= 11.5.0)
     - React-Core
     - RNFBApp
-  - RNFBApp (21.6.1):
+  - RNFBApp (21.5.0):
     - Firebase/CoreOnly (= 11.5.0)
     - React-Core
-  - RNFBAuth (21.6.1):
+  - RNFBAuth (20.1.0):
     - Firebase/Auth (= 11.5.0)
     - React-Core
     - RNFBApp
@@ -1457,6 +1480,7 @@ DEPENDENCIES:
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
   - GoogleSignIn
   - hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`)
+  - lottie-react-native (from `../node_modules/lottie-react-native`)
   - 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`)
   - RCTDeprecation (from `../node_modules/react-native/ReactApple/Libraries/RCTFoundation/RCTDeprecation`)
@@ -1546,6 +1570,7 @@ SPEC REPOS:
     - GoogleUtilities
     - GTMAppAuth
     - GTMSessionFetcher
+    - lottie-ios
     - nanopb
     - PromisesObjC
     - RecaptchaInterop
@@ -1568,6 +1593,8 @@ EXTERNAL SOURCES:
   hermes-engine:
     :podspec: "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec"
     :tag: hermes-2024-06-28-RNv0.74.3-7bda0c267e76d11b68a585f84cfdd65000babf85
+  lottie-react-native:
+    :path: "../node_modules/lottie-react-native"
   RCT-Folly:
     :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
   RCTDeprecation:
@@ -1730,6 +1757,8 @@ SPEC CHECKSUMS:
   GTMAppAuth: f69bd07d68cd3b766125f7e072c45d7340dea0de
   GTMSessionFetcher: 5aea5ba6bd522a239e236100971f10cb71b96ab6
   hermes-engine: 1f547997900dd0752dc0cc0ae6dd16173c49e09b
+  lottie-ios: a881093fab623c467d3bce374367755c272bdd59
+  lottie-react-native: 7dac0f0fc60d1665816f3ccfc64f63ba5ace2746
   nanopb: fad817b59e0457d11a5dfbde799381cd727c1275
   PromisesObjC: f5707f49cb48b9636751c5b2e7d227e43fba9f47
   RCT-Folly: 02617c592a293bd6d418e0a88ff4ee1f88329b47
@@ -1789,9 +1818,9 @@ SPEC CHECKSUMS:
   RNAppleAuthentication: e99eaf3c4c01ad8ecb6125dd6f0cfd98871685b5
   RNCAsyncStorage: ec53e44dc3e75b44aa2a9f37618a49c3bc080a7a
   RNCMaskedView: 0e1bc4bfa8365eba5fbbb71e07fbdc0555249489
-  RNFBAnalytics: 2db198b84b1809770b1ddfafd1113f351ac459d1
-  RNFBApp: 1de631bffe154f4f8b56f8dbfb13d6305d658e97
-  RNFBAuth: aa53108a283606c560e4380d75d093c35a13d8dd
+  RNFBAnalytics: f98ce013c02aa018d70902610e1685b4ab22a7d0
+  RNFBApp: 4a9c103e65ea4de297e9b80df6f8d21974b0ce9d
+  RNFBAuth: c5a850d78766be5f575c005fd304a83cdf71b2b1
   RNFS: 4ac0f0ea233904cb798630b3c077808c06931688
   RNGestureHandler: 5538c370587d7e757667b9283ca867dd7635f154
   RNGoogleSignin: 08dc4ba7eac2096c7fecfe109f0950fa4683c803
@@ -1805,6 +1834,6 @@ SPEC CHECKSUMS:
   VisionCamera: 104de00dce2e04dec51bfb6027eff0312fa3174e
   Yoga: bd92064a0d558be92786820514d74fc4dddd1233
 
-PODFILE CHECKSUM: 1c9e88596830bf92f911af1f3daaee492171e984
+PODFILE CHECKSUM: 132beabad8474ae5cd00454405c0031280578d1f
 
 COCOAPODS: 1.15.2
diff --git a/app/package-lock.json b/app/package-lock.json
diff --git a/app/package.json b/app/package.json
@@ -24,6 +24,8 @@
     "@react-navigation/native": "^6.1.17",
     "@react-navigation/native-stack": "^6.10.0",
     "axios": "^1.7.2",
+    "lottie-ios": "^3.1.8",
+    "lottie-react-native": "^7.1.0",
     "patch-package": "^8.0.0",
     "postinstall-postinstall": "^2.1.0",
     "react": "^18.2.0",

diff --git a/app/src/assets/images/stamp/stamp_lottie.json b/app/src/assets/images/stamp/stamp_lottie.json
diff --git a/app/src/components/modalVerifyVisit/ModalStamp.tsx b/app/src/components/modalVerifyVisit/ModalStamp.tsx
@@ -1,15 +1,26 @@
 import {NavigationProp, useNavigation} from '@react-navigation/native';
 import * as S from 'components/modalVerifyVisit/ModalVerifyVisit.style';
 import {Image} from 'react-native';
+import LottieView from 'lottie-react-native';
 
 export default function ModalStamp() {
   const navigation = useNavigation<NavigationProp<RootTabParamList>>();
+  let animation;
   return (
     <S.Background>
       <S.Container>
         <S.Title>Thanks for your BinVoyage!</S.Title>
         <S.TextAddress>New stamp added!</S.TextAddress>
-        <Image source={require('assets/images/img-verify-stamp.png')} style={{width: 181, height: 176}} />
+        <LottieView
+          // ref={animation => {
+          //   this.animation = animation;
+          // }}
+          source={require('assets/images/stamp/stamp_lottie.json')} // 애니메이션 파일 경로
+          autoPlay
+          loop={false}
+          style={{width: 181, height: 176}}
+        />
+        {/* <Image source={require('assets/images/img-verify-stamp.png')} style={{width: 181, height: 176}} /> */}
         <S.TextB1>Check your passport in HOME</S.TextB1>
         <S.Button isPrimary onPress={() => navigation.navigate('HomeNavigator', {screen: 'Home'})}>
           <S.ButtonText isPrimary>Okay!</S.ButtonText>