From fb76d2ee708114fda872323cf992280e3f7e6530 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Hanno=20J=2E=20G=C3=B6decke?= <die.drei99@yahoo.de>
Date: Fri, 3 Jun 2022 09:42:19 +0200
Subject: [PATCH] fix: src->source, isAutoPlay->autoPlay & pass require source
 directly

---
 example/App.tsx |  4 ++--
 src/index.tsx   | 34 ++++++++++++++++++++++++++++------
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/example/App.tsx b/example/App.tsx
index 4f249a1..28ce1be 100644
--- a/example/App.tsx
+++ b/example/App.tsx
@@ -2,14 +2,14 @@ import React from 'react';
 import {SafeAreaView, StatusBar, StyleSheet, Text} from 'react-native';
 import RLottieView from 'react-native-rlottie';
 
-const lottieAnim = JSON.stringify(require('./assets/icon_trophy.json'));
+const lottieAnim = require('./assets/icon_trophy.json');
 
 const App = () => {
   return (
     <SafeAreaView>
       <StatusBar />
       <Text>RLottie using new arch</Text>
-      <RLottieView src={lottieAnim} isAutoPlay style={styles.animation} />
+      <RLottieView source={lottieAnim} style={styles.animation} />
     </SafeAreaView>
   );
 };
diff --git a/src/index.tsx b/src/index.tsx
index 2af5df8..d5c18fb 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,3 +1,4 @@
+import * as React from 'react';
 import {
   Animated,
   requireNativeComponent,
@@ -9,15 +10,15 @@ import {
 const isFabricEnabled = global.nativeFabricUIManager != null;
 
 export type RLottieViewProps = ViewProps & {
-  src: string;
+  source: string; // TODO: support "AnimationObject | { uri: string }" as well;
   /**
-   * @default false
+   * @default true
    */
-  isAutoPlay?: boolean;
+  autoPlay?: boolean;
   progress?: number | Animated.Value | Animated.AnimatedInterpolation;
 };
 
-const RLottieView = isFabricEnabled
+const NativeRLottieView = isFabricEnabled
   ? require('./RLottieViewNativeComponent').default
   : requireNativeComponent<RLottieViewProps>('RLottieView');
 
@@ -27,8 +28,29 @@ const LINKING_ERROR =
   '- You rebuilt the app after installing the package\n' +
   '- You are not using Expo managed workflow\n';
 
-if (RLottieView == null) {
+if (NativeRLottieView == null) {
   throw new Error(LINKING_ERROR);
 }
 
-export default RLottieView;
+export default class RLottieView extends React.PureComponent<RLottieViewProps> {
+  static displayName = 'RLottieView';
+
+  constructor(props: RLottieViewProps) {
+    super(props);
+  }
+
+  render() {
+    const { source, autoPlay = true, ...otherProps } = this.props;
+
+    const sourceJson =
+      typeof source === 'object' ? JSON.stringify(source) : source;
+
+    return (
+      <NativeRLottieView
+        src={sourceJson}
+        isAutoPlay={autoPlay}
+        {...otherProps}
+      />
+    );
+  }
+}