[RNKC-055] - lottie example (#59)

* [RNKC-055] - lottie example * [RNKC-055] - always specify a color for text elements (otherwise using dark theme on Android the text can be not visible)
kirillzyusko · Aug 22, 2022 · 6b051f9 · 6b051f9
1 parent 5101a8a
commit 6b051f9
Show file tree

Hide file tree

Showing 10 changed files with 101 additions and 2 deletions.
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
@@ -74,6 +74,10 @@ PODS:
   - fmt (6.2.1)
   - glog (0.3.5)
   - libevent (2.1.12)
+  - lottie-ios (3.4.1)
+  - lottie-react-native (5.1.4):
+    - lottie-ios (~> 3.4.0)
+    - React-Core
   - OpenSSL-Universal (1.1.1100)
   - RCT-Folly (2021.06.28.00-v2):
     - boost
@@ -424,6 +428,7 @@ DEPENDENCIES:
   - FlipperKit/FlipperKitUserDefaultsPlugin (= 0.125.0)
   - FlipperKit/SKIOSNetworkPlugin (= 0.125.0)
   - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`)
+  - 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`)
   - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`)
@@ -475,6 +480,7 @@ SPEC REPOS:
     - FlipperKit
     - fmt
     - libevent
+    - lottie-ios
     - OpenSSL-Universal
     - SocketRocket
     - YogaKit
@@ -490,6 +496,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/React/FBReactNativeSpec"
   glog:
     :podspec: "../node_modules/react-native/third-party-podspecs/glog.podspec"
+  lottie-react-native:
+    :path: "../node_modules/lottie-react-native"
   RCT-Folly:
     :podspec: "../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec"
   RCTRequired:
@@ -575,6 +583,8 @@ SPEC CHECKSUMS:
   fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9
   glog: 476ee3e89abb49e07f822b48323c51c57124b572
   libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913
+  lottie-ios: 016449b5d8be0c3dcbcfa0a9988469999cd04c5d
+  lottie-react-native: b702fab740cdb952a8e2354713d3beda63ff97b0
   OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c
   RCT-Folly: 4d8508a426467c48885f1151029bc15fa5d7b3b8
   RCTRequired: bd9d2ab0fda10171fcbcf9ba61a7df4dc15a28f4

diff --git a/example/package.json b/example/package.json
@@ -13,6 +13,7 @@
     "@react-navigation/bottom-tabs": "^6.3.2",
     "@react-navigation/native": "^6.0.11",
     "@react-navigation/stack": "^6.2.2",
+    "lottie-react-native": "^5.1.4",
     "react": "18.0.0",
     "react-native": "0.69.4",
     "react-native-gesture-handler": "^2.5.0",

diff --git a/example/src/constants/screenNames.ts b/example/src/constants/screenNames.ts
@@ -4,6 +4,7 @@ export enum ScreenNames {
   EVENTS = 'EVENTS',
   AWARE_SCROLL_VIEW = 'AWARE_SCROLL_VIEW',
   STATUS_BAR = 'STATUS_BAR',
+  LOTTIE = 'LOTTIE',
   EXAMPLES_STACK = 'EXAMPLES_STACK',
   EXAMPLES = 'EXAMPLES',
 }
diff --git a/example/src/navigation/ExamplesStack/index.tsx b/example/src/navigation/ExamplesStack/index.tsx
@@ -8,13 +8,15 @@ import ReanimatedChat from '../../screens/Examples/ReanimatedChat';
 import Events from '../../screens/Examples/Events';
 import AwareScrollView from '../../screens/Examples/AwareScrollView';
 import StatusBar from '../../screens/Examples/StatusBar';
+import LottieAnimation from '../../screens/Examples/Lottie';
 
 type ExamplesStackParamList = {
   [ScreenNames.ANIMATED_EXAMPLE]: undefined;
   [ScreenNames.REANIMATED_CHAT]: undefined;
   [ScreenNames.EVENTS]: undefined;
   [ScreenNames.AWARE_SCROLL_VIEW]: undefined;
   [ScreenNames.STATUS_BAR]: undefined;
+  [ScreenNames.LOTTIE]: undefined;
 };
 
 const Stack = createStackNavigator<ExamplesStackParamList>();
@@ -36,6 +38,9 @@ const options = {
     headerShown: false,
     title: 'Status bar manipulation',
   },
+  [ScreenNames.LOTTIE]: {
+    title: 'Lottie animation',
+  },
 };
 
 const ExamplesStack = () => (
@@ -65,6 +70,11 @@ const ExamplesStack = () => (
       component={StatusBar}
       options={options[ScreenNames.STATUS_BAR]}
     />
+    <Stack.Screen
+      name={ScreenNames.LOTTIE}
+      component={LottieAnimation}
+      options={options[ScreenNames.LOTTIE]}
+    />
   </Stack.Navigator>
 );
 

diff --git a/example/src/screens/Examples/Lottie/animation.json b/example/src/screens/Examples/Lottie/animation.json
diff --git a/example/src/screens/Examples/Lottie/index.tsx b/example/src/screens/Examples/Lottie/index.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+import { StyleSheet, TextInput, View } from 'react-native';
+import Lottie from 'lottie-react-native';
+import { useKeyboardAnimation } from 'react-native-keyboard-controller';
+
+// animation is taken from lottie public animations: https://lottiefiles.com/46216-lock-debit-card-morph
+import LockDebitCardMorph from './animation.json';
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  input: {
+    width: '100%',
+    height: 40,
+    backgroundColor: '#5C5C5C',
+  },
+  lottie: {
+    height: 200,
+  },
+});
+
+function LottieAnimation() {
+  const { progress } = useKeyboardAnimation();
+
+  const animation = progress.interpolate({
+    inputRange: [0, 1],
+    // 104 - total frames
+    // 7 frame - transition begins
+    // 35 frame - transition ends
+    outputRange: [7 / 104, 35 / 104],
+  });
+
+  return (
+    <View style={styles.container}>
+      <Lottie
+        style={styles.lottie}
+        source={LockDebitCardMorph}
+        progress={animation}
+      />
+      <TextInput style={styles.input} />
+    </View>
+  );
+}
+
+export default LottieAnimation;
diff --git a/example/src/screens/Examples/Main/components/ExampleLink/index.tsx b/example/src/screens/Examples/Main/components/ExampleLink/index.tsx
@@ -17,7 +17,7 @@ const ExampleLink: FC<Props> = (props) => {
   return (
     <TouchableOpacity onPress={onCardPress} style={styles.container}>
       <View style={styles.row}>
-        <Text>
+        <Text style={styles.text}>
           {index}. {title}
         </Text>
         <Text>{icons}</Text>

diff --git a/example/src/screens/Examples/Main/components/ExampleLink/styles.ts b/example/src/screens/Examples/Main/components/ExampleLink/styles.ts
@@ -13,4 +13,7 @@ export default StyleSheet.create({
     flexDirection: 'row',
     alignContent: 'center',
   },
+  text: {
+    color: '#000000',
+  },
 });
diff --git a/example/src/screens/Examples/Main/constants.ts b/example/src/screens/Examples/Main/constants.ts
@@ -19,4 +19,9 @@ export const examples: Example[] = [
     info: ScreenNames.STATUS_BAR,
     icons: '🔋',
   },
+  {
+    title: 'Lottie',
+    info: ScreenNames.LOTTIE,
+    icons: '⚠️ 🎞',
+  },
 ];
diff --git a/example/yarn.lock b/example/yarn.lock
@@ -1804,6 +1804,11 @@ decode-uri-component@^0.2.0:
   resolved "https://registry.yarnpkg.com/decode-uri-component/-/decode-uri-component-0.2.0.tgz#eb3913333458775cb84cd1a1fae062106bb87545"
   integrity sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==
 
+dedent@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/dedent/-/dedent-0.6.0.tgz#0e6da8f0ce52838ef5cec5c8f9396b0c1b64a3cb"
+  integrity sha512-cSfRWjXJtZQeRuZGVvDrJroCR5V2UvBNUMHsPCdNYzuAG8b9V8aAy3KUcdQrGQPXs17Y+ojbPh1aOCplg9YR9g==
+
 deepmerge@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.3.0.tgz#d3c47fd6f3a93d517b14426b0628a17b0125f5f7"
@@ -2343,7 +2348,7 @@ inherits@2, inherits@2.0.4, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
-invariant@^2.2.4:
+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==
@@ -2792,6 +2797,14 @@ 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@^5.1.4:
+  version "5.1.4"
+  resolved "https://registry.yarnpkg.com/lottie-react-native/-/lottie-react-native-5.1.4.tgz#9340a4f63ed115d5f050f1af69e53242e6e63840"
+  integrity sha512-Lu6mSG92Wck+vXEX6gfj/9ciqqoz0tJQZqgX0SumGvX/oZu4MbKO/oLApyHdy2V9Rb7qvwF9whOtitADxTswPA==
+  dependencies:
+    invariant "^2.2.2"
+    react-native-safe-modules "^1.0.3"
+
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -3645,6 +3658,13 @@ react-native-safe-area-context@^4.3.1:
   resolved "https://registry.yarnpkg.com/react-native-safe-area-context/-/react-native-safe-area-context-4.3.1.tgz#5cf97b25b395e0d09bc1f828920cd7da0d792ade"
   integrity sha512-cEr7fknJCToTrSyDCVNg0GRdRMhyLeQa2NZwVCuzEQcWedOw/59ExomjmzCE4rxrKXs6OJbyfNtFRNyewDaHuA==
 
+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-screens@^3.15.0:
   version "3.15.0"
   resolved "https://registry.yarnpkg.com/react-native-screens/-/react-native-screens-3.15.0.tgz#78e42c8df72851b1ff235ddf5434b961ae123ca5"