diff --git a/cpp/RNSkSkottieView.h b/cpp/RNSkSkottieView.h
index bb48b9e..2baf9e8 100644
--- a/cpp/RNSkSkottieView.h
+++ b/cpp/RNSkSkottieView.h
@@ -28,6 +28,8 @@
 #include "SkCanvas.h"
 #include "SkPictureRecorder.h"
 #include <modules/skottie/include/Skottie.h>
+#include <vector>
+#include <algorithm>
 
 #pragma clang diagnostic pop
 
@@ -81,7 +83,7 @@ class RNSkSkottieRenderer : public RNSkRenderer, public std::enable_shared_from_
   }
 
   bool isPaused() {
-    return _lastPauseTime > 0.0;
+    return _lastPauseTime > 0.0 || _startTime == -1.0;
   }
 
   void pause() {
@@ -181,39 +183,45 @@ class RNSkSkottieView : public RNSkView {
 
     RNSkView::setJsiProperties(props);
 
-    for (auto& prop : props) {
+      // We need to make sure .start gets called last.
+      // It might happen that setJsiProperties gets called multiple times before the view is actually ready.
+      // In this case all our "props" will be stored, and then once its ready setJsiProperties gets called
+      // with all the props at once. Then .start has to be called last, otherwise the animation will not play.
+      std::vector<std::pair<std::string, RNJsi::JsiValueWrapper>> sortedProps(props.begin(), props.end());
+      if (sortedProps.size() > 1) {
+          // Custom sort function to place 'start' at the end
+          std::sort(sortedProps.begin(), sortedProps.end(),
+                    [](const auto& a, const auto& b) {
+              return !(a.first == "start") && (b.first == "start" || a.first < b.first);
+          });
+      }
+
+    for (auto& prop : sortedProps) {
       if (prop.first == "src" && prop.second.getType() == RNJsi::JsiWrapperValueType::HostObject) {
         std::static_pointer_cast<RNSkSkottieRenderer>(getRenderer())->setSrc(prop.second.getAsHostObject());
         renderImmediate(); // Draw the first frame
-      }
-      if (prop.first == "scaleType") {
+      } else if (prop.first == "scaleType") {
         std::static_pointer_cast<RNSkSkottieRenderer>(getRenderer())->setResizeMode(prop.second.getAsString());
-      }
-    }
-  }
+      } else if (prop.first == "setProgress") {
+        // Get first argument as number as it contains the updated value
+        auto progressValue = prop.second.getAsNumber();
+        std::static_pointer_cast<RNSkSkottieRenderer>(getRenderer())->setProgress(progressValue);
+        requestRedraw();
+      } else if (prop.first == "start") {
+        std::static_pointer_cast<RNSkSkottieRenderer>(getRenderer())->setStartTime(RNSkTime::GetSecs());
+        setDrawingMode(RNSkDrawingMode::Continuous);
+      } else if (prop.first == "pause") {
+        if (std::static_pointer_cast<RNSkSkottieRenderer>(getRenderer())->isPaused()) {
+            continue;
+        }
 
-  jsi::Value callJsiMethod(jsi::Runtime& runtime, const std::string& name, const jsi::Value* arguments, size_t count) override {
-    if (name == "setProgress") {
-      // Get first argument as number as it contains the updated value
-      auto progressValue = arguments[0].asNumber();
-      std::static_pointer_cast<RNSkSkottieRenderer>(getRenderer())->setProgress(progressValue);
-      requestRedraw();
-    } else if (name == "start") {
-      std::static_pointer_cast<RNSkSkottieRenderer>(getRenderer())->setStartTime(RNSkTime::GetSecs());
-      setDrawingMode(RNSkDrawingMode::Continuous);
-    } else if (name == "pause") {
-      if (std::static_pointer_cast<RNSkSkottieRenderer>(getRenderer())->isPaused()) {
-        return {};
+        setDrawingMode(RNSkDrawingMode::Default);
+        std::static_pointer_cast<RNSkSkottieRenderer>(getRenderer())->pause();
+      } else if (prop.first == "reset") {
+        std::static_pointer_cast<RNSkSkottieRenderer>(getRenderer())->resetPlayback();
+        setDrawingMode(RNSkDrawingMode::Default); // This will also trigger a requestRedraw
       }
-
-      setDrawingMode(RNSkDrawingMode::Default);
-      std::static_pointer_cast<RNSkSkottieRenderer>(getRenderer())->pause();
-    } else if (name == "reset") {
-      std::static_pointer_cast<RNSkSkottieRenderer>(getRenderer())->resetPlayback();
-      setDrawingMode(RNSkDrawingMode::Default); // This will also trigger a requestRedraw
     }
-
-    return {};
   }
 };
 } // namespace RNSkia
diff --git a/example/src/App.tsx b/example/src/App.tsx
index f910514..391e51e 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -6,6 +6,7 @@ import {
   StyleSheet,
   SafeAreaView,
   ScrollView,
+  Switch,
 } from 'react-native';
 import {
   SkiaSkottieView,
@@ -15,6 +16,7 @@ import {
 import * as Animations from './animations';
 import LottieView from 'lottie-react-native';
 import DotLottieAnimation from './animations/Hands.lottie';
+import { useMemo } from 'react';
 
 const animations = {
   ...Animations,
@@ -79,6 +81,61 @@ function SkottieImperativeAPI({ source }: { source: AnimationObject }) {
   );
 }
 
+function SkottiePropsAPI({ source }: { source: AnimationObject }) {
+  const [loop, setLoop] = React.useState(true);
+  const [autoPlay, setAutoPlay] = React.useState(false);
+  const [speed, setSpeed] = React.useState(1);
+  const [_progress, setProgress] = React.useState(0);
+
+  return (
+    <View style={styles.flex1}>
+      <Button
+        title="Play"
+        onPress={() => {
+          setAutoPlay(true);
+        }}
+      />
+      <Button
+        title="Pause"
+        onPress={() => {
+          setAutoPlay(false);
+        }}
+      />
+      <Button
+        title="Reset"
+        onPress={() => {
+          setProgress(0);
+        }}
+      />
+      <Button
+        title={`Toggle loop (its ${loop ? 'on' : 'off'})`}
+        onPress={() => {
+          setLoop((p) => !p);
+        }}
+      />
+      <Button
+        title="Speed +1"
+        onPress={() => {
+          setSpeed((p) => p + 1);
+        }}
+      />
+      <SkiaSkottieView
+        resizeMode="contain"
+        style={styles.flex1}
+        source={source}
+        loop={loop}
+        autoPlay={autoPlay}
+        speed={speed}
+        // TODO: that wouldn't work at the minute, and the imperative API should be used!
+        // progress={progress}
+        onAnimationFinish={() => {
+          console.log('onAnimationFinish');
+        }}
+      />
+    </View>
+  );
+}
+
 function LottieImperativeAPI({ source }: { source: AnimationObject }) {
   const lottieRef = React.useRef<LottieView>(null);
 
@@ -120,35 +177,100 @@ function LottieImperativeAPI({ source }: { source: AnimationObject }) {
   );
 }
 
+type ExampleType =
+  | 'default'
+  | 'imperative'
+  | 'props-controlled'
+  | 'progress-controlled';
+
+function ExampleTypeSwitches({
+  exampleType,
+  setExampleType,
+}: {
+  exampleType: ExampleType;
+  setExampleType: (type: ExampleType) => void;
+}) {
+  return (
+    <View>
+      <View style={styles.switchOption}>
+        <Switch
+          value={exampleType === 'default'}
+          onValueChange={() => setExampleType('default')}
+        />
+        <Text>None</Text>
+      </View>
+      <View style={styles.switchOption}>
+        <Switch
+          value={exampleType === 'imperative'}
+          onValueChange={() => setExampleType('imperative')}
+        />
+        <Text>Imperative API</Text>
+      </View>
+      <View style={styles.switchOption}>
+        <Switch
+          value={exampleType === 'props-controlled'}
+          onValueChange={() => setExampleType('props-controlled')}
+        />
+        <Text>Props controlled</Text>
+      </View>
+      <View style={styles.switchOption}>
+        <Switch
+          value={exampleType === 'progress-controlled'}
+          onValueChange={() => setExampleType('progress-controlled')}
+        />
+        <Text>Progress controlled</Text>
+      </View>
+    </View>
+  );
+}
+
 export default function App() {
   const [type, setType] = React.useState<'skottie' | 'lottie'>('skottie');
-  const [isImperativeAPI, setIsImperativeAPI] = React.useState(false);
+  const [exampleType, setExampleType] = React.useState<ExampleType>('default');
   const [animation, setAnimation] = React.useState<
     AnimationObject | undefined
   >();
 
+  const animationContent = useMemo(() => {
+    if (animation == null) return null;
+
+    if (type === 'skottie') {
+      switch (exampleType) {
+        case 'default':
+          return <SkottieAnimation source={animation} />;
+        case 'imperative':
+          return <SkottieImperativeAPI source={animation} />;
+        case 'props-controlled':
+          return <SkottiePropsAPI source={animation} />;
+        case 'progress-controlled':
+          return <SkottieAnimation source={animation} />;
+      }
+    }
+    if (type === 'lottie') {
+      switch (exampleType) {
+        case 'default':
+          return <LottieAnimation source={animation} />;
+        case 'imperative':
+          return <LottieImperativeAPI source={animation} />;
+        case 'props-controlled':
+          return <LottieAnimation source={animation} />;
+        case 'progress-controlled':
+          return <LottieAnimation source={animation} />;
+      }
+    }
+  }, [animation, exampleType, type]);
+
   return (
     <SafeAreaView style={styles.flex1}>
       {animation == null ? (
         <ScrollView style={styles.flex1}>
-          <Button
-            title="Skottie imperative API"
-            onPress={() => {
-              setType('skottie');
-              setAnimation(animations.Hands);
-              setIsImperativeAPI(true);
-            }}
-          />
-          <Button
-            title="Lottie imperative API"
-            onPress={() => {
-              setType('lottie');
-              setAnimation(animations.FastMoney);
-              setIsImperativeAPI(true);
-            }}
+          <Text style={styles.heading}>Example type</Text>
+          <ExampleTypeSwitches
+            exampleType={exampleType}
+            setExampleType={setExampleType}
           />
 
-          <Text>Skottie</Text>
+          <Text style={styles.heading}>Skottie</Text>
           {Object.keys(animations).map((key) => (
             <View key={`skottie-${key}`}>
               <Button
@@ -161,7 +283,7 @@ export default function App() {
               />
             </View>
           ))}
-          <Text>Lottie</Text>
+          <Text style={styles.heading}>Lottie</Text>
           {Object.keys(animations).map((key) => (
             <View key={`lottie-${key}`}>
               <Button
@@ -177,21 +299,10 @@ export default function App() {
         </ScrollView>
       ) : (
         <View style={styles.flex1}>
-          {type === 'skottie' ? (
-            isImperativeAPI ? (
-              <SkottieImperativeAPI source={animation} />
-            ) : (
-              <SkottieAnimation source={animation} />
-            )
-          ) : isImperativeAPI ? (
-            <LottieImperativeAPI source={animation} />
-          ) : (
-            <LottieAnimation source={animation} />
-          )}
+          {animationContent}
           <Button
             title="Back"
             onPress={() => {
-              setIsImperativeAPI(false);
               setAnimation(undefined);
             }}
           />
@@ -205,4 +316,14 @@ const styles = StyleSheet.create({
   flex1: {
     flex: 1,
   },
+  heading: {
+    marginTop: 16,
+    marginBottom: 8,
+    fontSize: 24,
+    fontWeight: 'bold',
+  },
+  switchOption: {
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
 });
diff --git a/src/SkiaSkottieView.tsx b/src/SkiaSkottieView.tsx
index 1852e61..33354d6 100644
--- a/src/SkiaSkottieView.tsx
+++ b/src/SkiaSkottieView.tsx
@@ -108,32 +108,8 @@ export const SkiaSkottieView = React.forwardRef<
   }, [source]);
 
   const progress = props.progress;
-
-  const updateAnimation = useCallback(
-    (animation: SkSkottie) => {
-      assertSkiaViewApi();
-      SkiaViewApi.setJsiProperty(nativeId, 'src', animation);
-    },
-    [nativeId]
-  );
-
-  const updateResizeMode = useCallback(
-    (resizeMode: ResizeMode) => {
-      assertSkiaViewApi();
-      SkiaViewApi.setJsiProperty(nativeId, 'scaleType', resizeMode);
-    },
-    [nativeId]
-  );
   //#endregion
 
-  useLayoutEffect(() => {
-    updateResizeMode(props.resizeMode ?? 'contain');
-  }, [nativeId, props.resizeMode, updateResizeMode]);
-
-  useLayoutEffect(() => {
-    updateAnimation(skottieAnimation);
-  }, [nativeId, skottieAnimation, source, updateAnimation]);
-
   // Handle animation updates
   useEffect(() => {
     const _progress = progress;
@@ -145,7 +121,7 @@ export const SkiaSkottieView = React.forwardRef<
     const mapperId = startMapper(() => {
       'worklet';
       try {
-        SkiaViewApi.callJsiMethod(nativeId, 'setProgress', _progress.value);
+        SkiaViewApi.setJsiProperty(nativeId, 'setProgress', _progress.value);
       } catch (e) {
         // ignored, view might not be ready yet
         if (props.debug) {
@@ -159,22 +135,62 @@ export const SkiaSkottieView = React.forwardRef<
     };
   }, [nativeId, progress, props.debug]);
 
-  //#region Imperative API
+  //#region Callbacks / Imperative API
   const start = useCallback(() => {
     assertSkiaViewApi();
-    SkiaViewApi.callJsiMethod(nativeId, 'start');
+    SkiaViewApi.setJsiProperty(nativeId, 'start', null);
+  }, [nativeId]);
+
+  const pause = useCallback(() => {
+    assertSkiaViewApi();
+    SkiaViewApi.setJsiProperty(nativeId, 'pause', null);
   }, [nativeId]);
+
+  const updateAnimation = useCallback(
+    (animation: SkSkottie) => {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(nativeId, 'src', animation);
+    },
+    [nativeId]
+  );
+
+  const updateResizeMode = useCallback(
+    (resizeMode: ResizeMode) => {
+      assertSkiaViewApi();
+      SkiaViewApi.setJsiProperty(nativeId, 'scaleType', resizeMode);
+    },
+    [nativeId]
+  );
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      play: start,
+      pause: pause,
+      reset: () => {
+        assertSkiaViewApi();
+        SkiaViewApi.setJsiProperty(nativeId, 'reset', null);
+      },
+    }),
+    [nativeId, start, pause]
+  );
   //#endregion
 
+  useLayoutEffect(() => {
+    updateResizeMode(props.resizeMode ?? 'contain');
+  }, [nativeId, props.resizeMode, updateResizeMode]);
+
+  useLayoutEffect(() => {
+    updateAnimation(skottieAnimation);
+  }, [nativeId, skottieAnimation, source, updateAnimation]);
+
+  // #region Prop controlled animation
   // Start the animation
   const shouldPlay = progress == null && props.autoPlay;
+  const initialShouldPlayRef = useRef(shouldPlay);
   useEffect(() => {
     if (shouldPlay) {
-      setTimeout(() => {
-        requestAnimationFrame(() => {
-          start();
-        });
-      }, 1);
+      start();
     }
 
     // const speed = props.speed ?? 1;
@@ -190,22 +206,20 @@ export const SkiaSkottieView = React.forwardRef<
     start,
   ]);
 
-  //#region Imperative API handling
-  useImperativeHandle(
-    ref,
-    () => ({
-      play: start,
-      pause: () => {
-        assertSkiaViewApi();
-        SkiaViewApi.callJsiMethod(nativeId, 'pause');
-      },
-      reset: () => {
-        assertSkiaViewApi();
-        SkiaViewApi.callJsiMethod(nativeId, 'reset');
-      },
-    }),
-    [nativeId, start]
-  );
+  // Pause the animation
+  const shouldPause = progress == null && !props.autoPlay;
+  useEffect(() => {
+    if (shouldPause) {
+      pause();
+    }
+  }, [shouldPause, pause]);
+
+  // TODO: loop mode isn't supported yet, it will always loop right now
+  // Toggle loop mode
+  useEffect(() => {
+    assertSkiaViewApi();
+    SkiaViewApi.setJsiProperty(nativeId, 'loop', props.loop);
+  }, [nativeId, props.loop]);
   //#endregion
 
   const { debug = false, ...viewProps } = props;
@@ -216,6 +230,7 @@ export const SkiaSkottieView = React.forwardRef<
       nativeID={`${nativeId}`}
       debug={debug}
       {...viewProps}
+      mode={initialShouldPlayRef.current ? 'continuous' : undefined}
     />
   );
 });