chore: add to react native examples

lottie-react-native · Apr 12, 2024 · d53a613 · d53a613
1 parent 016cea0
commit d53a613
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 13 deletions.
diff --git a/apps/fabric/src/App.tsx b/apps/fabric/src/App.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import {StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import { StyleSheet, Text, TouchableOpacity, View } from 'react-native';
 import LottieView from 'lottie-react-native';
 
 const color = {
@@ -30,11 +30,14 @@ const App = () => {
         resizeMode={'contain'}
         colorFilters={colorFilter}
         enableMergePathsAndroidForKitKatAndAbove
+        onAnimationLoadStart={() => {
+          console.log('I can see this!')
+        }}
         onAnimationFinish={() => {
           console.log('Finished');
         }}
         onAnimationFailure={e => {
-          console.log('Error ', {e});
+          console.log('Error ', { e });
         }}
       />
       <View style={styles.controlsContainer}>
@@ -78,14 +81,14 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     paddingVertical: 32,
   },
-  controlsContainer: {marginTop: 24, gap: 12},
+  controlsContainer: { marginTop: 24, gap: 12 },
   button: {
     backgroundColor: color.primary,
     paddingHorizontal: 24,
     paddingVertical: 16,
   },
-  text: {color: 'white', textAlign: 'center'},
-  lottie: {width: 400, height: 400},
+  text: { color: 'white', textAlign: 'center' },
+  lottie: { width: 400, height: 400 },
 });
 
 const colorFilter = [

diff --git a/apps/paper/src/LottieAnimatedExample.tsx b/apps/paper/src/LottieAnimatedExample.tsx
@@ -1,6 +1,6 @@
 import Slider from '@react-native-community/slider';
-import LottieView, {LottieViewProps} from 'lottie-react-native';
-import React, {useEffect, useRef, useState} from 'react';
+import LottieView, { LottieViewProps } from 'lottie-react-native';
+import React, { useEffect, useRef, useState } from 'react';
 import {
   Animated,
   Button,
@@ -10,7 +10,7 @@ import {
   TouchableOpacity,
   View,
 } from 'react-native';
-import {ExamplePicker} from './ExamplePicker';
+import { ExamplePicker } from './ExamplePicker';
 import RenderModePicker from './RenderModePicker';
 import {
   EXAMPLES,
@@ -48,6 +48,10 @@ const LottieAnimatedExample = () => {
     console.log('Animation looped');
   };
 
+  const onAnimationLoadStart = () => {
+    console.log('Animation load started');
+  };
+
   const onPlayPress = () => {
     if (isPlaying) {
       anim.current?.pause();
@@ -87,19 +91,19 @@ const LottieAnimatedExample = () => {
   }
 
   return (
-    <View style={{flex: 1}}>
+    <View style={{ flex: 1 }}>
       <ExamplePicker
         example={example}
         examples={EXAMPLES}
         onChange={setExample}
       />
-      <View style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}>
+      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
         <AnimatedLottieView
           ref={anim}
           autoPlay={isImperative ? false : isPlaying}
           style={[
             isInverse ? styles.lottieViewInverse : {},
-            {width: '100%', height: '100%'},
+            { width: '100%', height: '100%' },
           ]}
           source={example?.getSource()}
           progress={isImperative ? progress : undefined}
@@ -108,12 +112,13 @@ const LottieAnimatedExample = () => {
           onAnimationFailure={onAnimationFailure}
           onAnimationFinish={onAnimationFinish}
           onAnimationLoop={onAnimationLoop}
+          onAnimationLoadStart={onAnimationLoadStart}
           enableMergePathsAndroidForKitKatAndAbove
           renderMode={renderMode}
           resizeMode={'contain'}
         />
       </View>
-      <View style={{paddingBottom: 20, paddingHorizontal: 10}}>
+      <View style={{ paddingBottom: 20, paddingHorizontal: 10 }}>
         <View style={styles.controlsRow}>
           <TouchableOpacity onPress={onLoopPress} disabled={isImperative}>
             <Image
@@ -167,7 +172,7 @@ const LottieAnimatedExample = () => {
             <Text>Duration: ({Math.round(duration)}ms)</Text>
           </View>
           <Slider
-            style={{height: 30}}
+            style={{ height: 30 }}
             step={50}
             minimumValue={50}
             maximumValue={6000}