diff --git a/.github/ISSUE_TEMPLATE/bug-report.yml b/.github/ISSUE_TEMPLATE/bug-report.yml
index 0d261fd..b3f1c15 100644
--- a/.github/ISSUE_TEMPLATE/bug-report.yml
+++ b/.github/ISSUE_TEMPLATE/bug-report.yml
@@ -11,7 +11,15 @@ body:
   - type: input
     id: version
     attributes:
-      label: Version
+      label: Version of react-native-video-player
+      description: What version are you using? Put the exact version from your package.json
+    validations:
+      required: true
+
+  - type: input
+    id: rnv-version
+    attributes:
+      label: Version of react-native-video
       description: What version are you using? Put the exact version from your package.json
     validations:
       required: true
diff --git a/.github/scripts/validate.js b/.github/scripts/validate.js
index 7dc913c..8bcff6d 100644
--- a/.github/scripts/validate.js
+++ b/.github/scripts/validate.js
@@ -54,7 +54,7 @@ const MESSAGE = {
 const checkLatestVersion = async () => {
   try {
     const response = await fetch(
-      'https://registry.npmjs.org/react-native-video/latest'
+      'https://registry.npmjs.org/react-native-video-player/latest'
     );
     const data = await response.json();
     return data.version;
diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock
index 51e1963..6cf604c 100644
--- a/example/ios/Podfile.lock
+++ b/example/ios/Podfile.lock
@@ -970,6 +970,29 @@ PODS:
   - React-Mapbuffer (0.74.5):
     - glog
     - React-debug
+  - react-native-skia (1.5.10):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - RCT-Folly (= 2024.01.01.00)
+    - RCTRequired
+    - RCTTypeSafety
+    - React
+    - React-callinvoker
+    - 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
   - react-native-video (6.8.0):
     - DoubleConversion
     - glog
@@ -1242,6 +1265,93 @@ PODS:
     - React-logger (= 0.74.5)
     - React-perflogger (= 0.74.5)
     - React-utils (= 0.74.5)
+  - RNReanimated (3.16.6):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - 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
+    - RNReanimated/reanimated (= 3.16.6)
+    - RNReanimated/worklets (= 3.16.6)
+    - Yoga
+  - RNReanimated/reanimated (3.16.6):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - 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
+    - RNReanimated/reanimated/apple (= 3.16.6)
+    - Yoga
+  - RNReanimated/reanimated/apple (3.16.6):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - 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
+  - RNReanimated/worklets (3.16.6):
+    - DoubleConversion
+    - glog
+    - hermes-engine
+    - 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
   - SocketRocket (0.7.0)
   - Yoga (0.0.0)
 
@@ -1285,6 +1395,7 @@ DEPENDENCIES:
   - React-jsitracing (from `../node_modules/react-native/ReactCommon/hermes/executor/`)
   - React-logger (from `../node_modules/react-native/ReactCommon/logger`)
   - React-Mapbuffer (from `../node_modules/react-native/ReactCommon`)
+  - "react-native-skia (from `../node_modules/@shopify/react-native-skia`)"
   - react-native-video (from `../node_modules/react-native-video`)
   - React-nativeconfig (from `../node_modules/react-native/ReactCommon`)
   - React-NativeModulesApple (from `../node_modules/react-native/ReactCommon/react/nativemodule/core/platform/ios`)
@@ -1309,6 +1420,7 @@ DEPENDENCIES:
   - React-runtimescheduler (from `../node_modules/react-native/ReactCommon/react/renderer/runtimescheduler`)
   - React-utils (from `../node_modules/react-native/ReactCommon/react/utils`)
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
+  - RNReanimated (from `../../node_modules/react-native-reanimated`)
   - Yoga (from `../node_modules/react-native/ReactCommon/yoga`)
 
 SPEC REPOS:
@@ -1391,6 +1503,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/logger"
   React-Mapbuffer:
     :path: "../node_modules/react-native/ReactCommon"
+  react-native-skia:
+    :path: "../node_modules/@shopify/react-native-skia"
   react-native-video:
     :path: "../node_modules/react-native-video"
   React-nativeconfig:
@@ -1439,6 +1553,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/react/utils"
   ReactCommon:
     :path: "../node_modules/react-native/ReactCommon"
+  RNReanimated:
+    :path: "../../node_modules/react-native-reanimated"
   Yoga:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
@@ -1480,6 +1596,7 @@ SPEC CHECKSUMS:
   React-jsitracing: 3b6060bbf5317663667e1dd93560c7943ab86ccc
   React-logger: 257858bd55f3a4e1bc0cf07ddc8fb9faba6f8c7c
   React-Mapbuffer: 6c1cacdbf40b531f549eba249e531a7d0bfd8e7f
+  react-native-skia: 6e137273ac478a9c840b45ca53b7a248f9103fe2
   react-native-video: 854c3152eedf203fdbd5fea46298a307885061bf
   React-nativeconfig: ba9a2e54e2f0882cf7882698825052793ed4c851
   React-NativeModulesApple: 8d11ff8955181540585c944cf48e9e7236952697
@@ -1504,6 +1621,7 @@ SPEC CHECKSUMS:
   React-runtimescheduler: cfbe85c3510c541ec6dc815c7729b41304b67961
   React-utils: f242eb7e7889419d979ca0e1c02ccc0ea6e43b29
   ReactCommon: f7da14a8827b72704169a48c929bcde802698361
+  RNReanimated: 89f50dfc59d679f39debe0b00ccdb928dc655cb3
   SocketRocket: abac6f5de4d4d62d24e11868d7a2f427e0ef940d
   Yoga: 950bbfd7e6f04790fdb51149ed51df41f329fcc8
 
diff --git a/example/package.json b/example/package.json
index e1a24e5..4127eed 100644
--- a/example/package.json
+++ b/example/package.json
@@ -10,13 +10,16 @@
   },
   "dependencies": {
     "@expo/metro-runtime": "~3.2.3",
+    "@shopify/react-native-skia": "^1.5.10",
     "expo": "~51.0.28",
     "expo-status-bar": "~1.12.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-native": "0.74.5",
+    "react-native-reanimated": "^3.16.6",
     "react-native-video": "6.8.0",
-    "react-native-web": "~0.19.10"
+    "react-native-web": "~0.19.10",
+    "react-scan": "native"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",
diff --git a/example/src/App.tsx b/example/src/App.tsx
index 7b7e4f1..baebd59 100644
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@@ -6,8 +6,10 @@ import {
   SafeAreaView,
   ActivityIndicator,
   StyleSheet,
+  Platform,
 } from 'react-native';
 import VideoPlayer, { type VideoPlayerRef } from 'react-native-video-player';
+import { ReactScan } from 'react-scan/native';
 
 const App = () => {
   const playerRef = useRef<VideoPlayerRef>(null);
@@ -15,52 +17,58 @@ const App = () => {
 
   return (
     <SafeAreaView>
-      <Text style={{ fontSize: 22, marginTop: 22 }}>
-        React Native Video Player
-      </Text>
-      <VideoPlayer
-        endWithThumbnail
-        thumbnail={{
-          uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
+      <ReactScan
+        options={{
+          enabled: Platform.OS === 'ios',
         }}
-        // pauseOnPress={true}
-        // autoplay={true}
-        // repeat={true}
-        source={{
-          uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
-        }}
-        renderLoader={() => (
-          <View
-            style={{
-              flex: 1,
-              backgroundColor: 'black',
-              justifyContent: 'center',
-            }}
-          >
-            <ActivityIndicator size={'large'} />
-          </View>
-        )}
-        controlsTimeout={2000}
-        onProgress={({ currentTime }) => {
-          progress.current = currentTime;
-        }}
-        onError={(e) => console.log(e)}
-        showDuration={true}
-        ref={playerRef}
-      />
-      <View style={styles.btnContainer}>
-        <Button onPress={() => playerRef.current?.stop()} title="Stop" />
-        <Button onPress={() => playerRef.current?.pause()} title="Pause" />
-        <Button onPress={() => playerRef.current?.resume()} title="Resume" />
-        <Button
-          onPress={() => playerRef.current?.seek(progress.current + 10)}
-          title="Seek"
-        />
-        <Button
-          onPress={() => playerRef.current?.setFullScreen(true)}
-          title="Open fullscreen"
+      >
+        <Text style={{ fontSize: 22, marginTop: 22 }}>
+          React Native Video Player
+        </Text>
+        <VideoPlayer
+          endWithThumbnail
+          thumbnail={{
+            uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/images/BigBuckBunny.jpg',
+          }}
+          // pauseOnPress={true}
+          // autoplay={true}
+          // repeat={true}
+          source={{
+            uri: 'https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4',
+          }}
+          renderLoader={() => (
+            <View
+              style={{
+                flex: 1,
+                backgroundColor: 'black',
+                justifyContent: 'center',
+              }}
+            >
+              <ActivityIndicator size={'large'} />
+            </View>
+          )}
+          controlsTimeout={2000}
+          onProgress={({ currentTime }) => {
+            progress.current = currentTime;
+          }}
+          onError={(e) => console.log(e)}
+          showDuration={true}
+          ref={playerRef}
         />
-      </View>
+        <View style={styles.btnContainer}>
+          <Button onPress={() => playerRef.current?.stop()} title="Stop" />
+          <Button onPress={() => playerRef.current?.pause()} title="Pause" />
+          <Button onPress={() => playerRef.current?.resume()} title="Resume" />
+          <Button
+            onPress={() => playerRef.current?.seek(progress.current + 10)}
+            title="Seek"
+          />
+          <Button
+            onPress={() => playerRef.current?.setFullScreen(true)}
+            title="Open fullscreen"
+          />
+        </View>
+      </ReactScan>
     </SafeAreaView>
   );
 };
diff --git a/src/Thumbnail.tsx b/src/Thumbnail.tsx
new file mode 100644
index 0000000..5bf62ec
--- /dev/null
+++ b/src/Thumbnail.tsx
@@ -0,0 +1,89 @@
+import {
+  Image,
+  ImageBackground,
+  type ImageSourcePropType,
+  StyleSheet,
+  TouchableOpacity,
+} from 'react-native';
+import type { CustomStyles, VideoPlayerComponentProps } from './index';
+import { memo } from 'react';
+
+interface StartButtonProps {
+  onStart: () => void;
+  customStylesPlayButton: CustomStyles['playButton'];
+  customStylesPlayArrow: CustomStyles['playArrow'];
+}
+
+interface ThumbnailProps extends StartButtonProps {
+  thumbnailSource: ImageSourcePropType;
+  style: VideoPlayerComponentProps['style'];
+  sizeStyles: { height: number; width: number };
+  onStart: () => void;
+  customStylesThumbnail: CustomStyles['thumbnail'];
+  customStylesPlayButton: CustomStyles['playButton'];
+  customStylesPlayArrow: CustomStyles['playArrow'];
+}
+
+export const StartButton = ({
+  onStart,
+  customStylesPlayButton,
+  customStylesPlayArrow,
+}: StartButtonProps) => {
+  return (
+    <TouchableOpacity
+      style={[styles.playButton, customStylesPlayButton]}
+      onPress={onStart}
+    >
+      <Image
+        source={require('./img/play.png')}
+        style={[styles.playArrow, customStylesPlayArrow]}
+      />
+    </TouchableOpacity>
+  );
+};
+
+export const Thumbnail = memo(
+  ({
+    thumbnailSource,
+    style,
+    sizeStyles,
+    onStart,
+    customStylesThumbnail,
+    customStylesPlayButton,
+    customStylesPlayArrow,
+  }: ThumbnailProps) => {
+    return (
+      <ImageBackground
+        source={thumbnailSource}
+        style={[styles.thumbnail, sizeStyles, style, customStylesThumbnail]}
+      >
+        <StartButton
+          customStylesPlayButton={customStylesPlayButton}
+          onStart={onStart}
+          customStylesPlayArrow={customStylesPlayArrow}
+        />
+      </ImageBackground>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  thumbnail: {
+    backgroundColor: 'black',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  playButton: {
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    borderRadius: 32,
+    width: 64,
+    height: 64,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  playArrow: {
+    width: 28,
+    height: 28,
+    marginLeft: 2,
+  },
+});
diff --git a/src/Video.tsx b/src/Video.tsx
new file mode 100644
index 0000000..9f55ef0
--- /dev/null
+++ b/src/Video.tsx
@@ -0,0 +1,297 @@
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import type { VideoPlayerComponentProps } from './index';
+import Video, {
+  type OnLoadData,
+  type OnPlaybackStateChangedData,
+  type OnProgressData,
+  type VideoRef,
+} from 'react-native-video';
+import { Controls, type ProgressRef } from './controls/Controls';
+import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
+import type { AnimationRef } from './controls/ControlsAnimatedWrapper';
+
+export interface VideoInternalRef extends VideoRef {
+  onStart: () => void;
+}
+
+type RenderVideoProps = Pick<
+  VideoPlayerComponentProps,
+  | 'animationDuration'
+  | 'autoplay'
+  | 'controlsTimeout'
+  | 'customStyles'
+  | 'defaultMuted'
+  | 'disableControlsAutoHide'
+  | 'disableFullscreen'
+  | 'disableSeek'
+  | 'duration'
+  | 'fullScreenOnLongPress'
+  | 'hideControlsOnStart'
+  | 'muted'
+  | 'onEnd'
+  | 'onHideControls'
+  | 'onLoad'
+  | 'onMutePress'
+  | 'onPlayPress'
+  | 'onProgress'
+  | 'onShowControls'
+  | 'pauseOnPress'
+  | 'paused'
+  | 'repeat'
+  | 'resizeMode'
+  | 'showDuration'
+  | 'source'
+  | 'style'
+> & { sizeStyle: { width: number; height: number } };
+
+export const RenderVideo = memo(
+  forwardRef<VideoInternalRef, RenderVideoProps>((props, ref) => {
+    const {
+      animationDuration = 100,
+      autoplay = false,
+      controlsTimeout = 2000,
+      customStyles = {},
+      defaultMuted,
+      disableControlsAutoHide,
+      disableFullscreen,
+      disableSeek,
+      fullScreenOnLongPress,
+      hideControlsOnStart = false,
+      muted,
+      onEnd,
+      onHideControls,
+      onLoad,
+      onMutePress,
+      onPlayPress,
+      onProgress,
+      onShowControls,
+      pauseOnPress,
+      paused,
+      repeat = false,
+      resizeMode = 'contain',
+      showDuration = false,
+      source,
+      style,
+      sizeStyle,
+    } = props;
+
+    const [isPlaying, setIsPlaying] = useState(autoplay);
+    const [isMuted, setIsMuted] = useState(defaultMuted ?? false);
+    const [isControlsVisible, setIsControlsVisible] = useState(false);
+    const [duration, setDuration] = useState(0);
+
+    const videoRef = useRef<VideoRef>(null);
+    // ref to keeps progress to avoid re-rendering
+    const progressRef = useRef<number>(0);
+    // ref to pass progress to controls (in ref to avoid re-rendering) and to pass when controls wrapper should animate
+    const controlsRef = useRef<ProgressRef & AnimationRef>(null);
+    // ref to keep timeout id to clear it on unmount
+    const controlsTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+
+    const setProgress = useCallback((progress: number) => {
+      progressRef.current = progress;
+      controlsRef.current?.onProgress(progress);
+    }, []);
+
+    useImperativeHandle(ref, () => ({
+      ...videoRef.current!,
+      resume: () => {
+        setIsPlaying(true);
+        videoRef.current?.resume();
+      },
+      pause: () => {
+        setIsPlaying(false);
+        videoRef.current?.pause();
+      },
+      stop: () => {
+        setProgress(0);
+        videoRef.current?.dismissFullscreenPlayer();
+      },
+      onStart: () => {
+        setIsPlaying(true);
+        setProgress(progressRef.current >= 1 ? 0 : progressRef.current);
+        hideControlsOnStart ? _hideControls() : _showControls();
+      },
+    }));
+
+    const _hideControls = useCallback(() => {
+      if (controlsTimeoutRef.current) clearTimeout(controlsTimeoutRef.current);
+
+      controlsTimeoutRef.current = setTimeout(() => {
+        if (onHideControls) onHideControls();
+        if (disableControlsAutoHide) return;
+
+        controlsRef.current?.runControlsAnimation(0.1, () => {
+          setIsControlsVisible(false);
+          setProgress(progressRef.current);
+        });
+      }, controlsTimeout);
+    }, [controlsTimeout, onHideControls, disableControlsAutoHide, setProgress]);
+
+    const _showControls = useCallback(() => {
+      if (onShowControls && !isControlsVisible) onShowControls();
+      setIsControlsVisible(true);
+
+      _hideControls();
+
+      // force re-renders to make sure controls are mounted. ControlsRef is then available and setProgress is called correctly (It fixes the moment when controls are hidden during paused video. After clicking on the screen, controls are shown, but the current duration shows 00)
+      setTimeout(() => {
+        setProgress(progressRef.current);
+        controlsRef.current?.runControlsAnimation(1);
+      }, 0);
+    }, [onShowControls, isControlsVisible, _hideControls, setProgress]);
+
+    useEffect(() => {
+      if (autoplay) _hideControls();
+
+      return () => {
+        if (controlsTimeoutRef.current) {
+          clearTimeout(controlsTimeoutRef.current);
+          controlsTimeoutRef.current = null;
+        }
+      };
+    }, [_hideControls, autoplay]);
+
+    const _onProgress = useCallback(
+      (event: OnProgressData) => {
+        if (onProgress) onProgress(event);
+
+        if (isNaN(props?.duration || 0) && isNaN(duration)) {
+          throw new Error(
+            'Could not load video duration correctly, please add `duration` props'
+          );
+        }
+
+        setProgress(event.currentTime / (props.duration || duration));
+      },
+      [onProgress, props.duration, duration, setProgress]
+    );
+
+    const _onEnd = useCallback(() => {
+      if (onEnd) onEnd();
+      setProgress(1);
+      if (repeat) videoRef.current?.seek(0);
+      setIsPlaying(repeat);
+    }, [onEnd, setProgress, repeat]);
+
+    const _onLoad = useCallback(
+      (event: OnLoadData) => {
+        if (onLoad) onLoad(event);
+        setDuration(event.duration);
+      },
+      [onLoad]
+    );
+
+    const _onPlayPress = useCallback(() => {
+      if (onPlayPress) onPlayPress();
+      setIsPlaying((prev) => !prev);
+
+      if (progressRef.current >= 1) {
+        videoRef.current?.seek(0);
+      }
+
+      _showControls();
+    }, [_showControls, onPlayPress]);
+
+    const _onMutePress = useCallback(() => {
+      const newMutedState = !isMuted;
+      if (onMutePress) onMutePress(newMutedState);
+      setIsMuted(newMutedState);
+      _showControls();
+    }, [isMuted, onMutePress, _showControls]);
+
+    const _onPlaybackStateChanged = useCallback(
+      (data: OnPlaybackStateChangedData) => {
+        if (data.isPlaying !== isPlaying) setIsPlaying(data.isPlaying);
+      },
+      [isPlaying]
+    );
+
+    const onToggleFullScreen = useCallback(() => {
+      videoRef.current?.presentFullscreenPlayer();
+    }, []);
+
+    const seek = useCallback(
+      (progress: number) => {
+        videoRef.current?.seek(progress);
+        setProgress(progress / (props.duration || duration));
+      },
+      [duration, props.duration, setProgress]
+    );
+
+    return (
+      <View style={[{ overflow: 'hidden' }, customStyles.videoWrapper]}>
+        <Video
+          {...props}
+          ref={videoRef}
+          style={[styles.video, sizeStyle, style, customStyles.video]}
+          muted={muted || isMuted}
+          paused={paused || !isPlaying}
+          onProgress={_onProgress}
+          onEnd={_onEnd}
+          onLoad={_onLoad}
+          source={source}
+          resizeMode={resizeMode}
+          onPlaybackStateChanged={_onPlaybackStateChanged}
+        />
+        <TouchableOpacity
+          style={styles.overlayButton}
+          onPress={() => {
+            _showControls();
+            if (pauseOnPress) _onPlayPress();
+          }}
+          onLongPress={() => {
+            if (fullScreenOnLongPress) onToggleFullScreen();
+          }}
+        />
+        <Controls
+          ref={controlsRef}
+          customStyles={customStyles}
+          showDuration={showDuration}
+          disableFullscreen={disableFullscreen}
+          duration={props.duration || duration}
+          isPlaying={isPlaying}
+          isMuted={isMuted}
+          onPlayPress={_onPlayPress}
+          onMutePress={_onMutePress}
+          onToggleFullScreen={onToggleFullScreen}
+          animationDuration={animationDuration}
+          showControls={_showControls}
+          autoplay={autoplay}
+          disableSeek={disableSeek}
+          setIsPlaying={setIsPlaying}
+          onSeek={seek}
+          controlsTimeoutId={controlsTimeoutRef.current}
+          isControlsVisible={isControlsVisible}
+        />
+      </View>
+    );
+  })
+);
+
+const styles = StyleSheet.create({
+  video:
+    +Platform.Version >= 24
+      ? {}
+      : {
+          backgroundColor: 'black',
+        },
+  controls: {
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    height: 48,
+    marginTop: -48,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  overlayButton: {
+    ...StyleSheet.absoluteFillObject,
+  },
+});
diff --git a/src/controls/Controls.tsx b/src/controls/Controls.tsx
new file mode 100644
index 0000000..028f833
--- /dev/null
+++ b/src/controls/Controls.tsx
@@ -0,0 +1,132 @@
+import type { VideoPlayerComponentProps } from '../index';
+import { forwardRef, useImperativeHandle, useRef } from 'react';
+import { DurationText } from './Duration';
+import { Seekbar, type SeekbarProps } from './Seekbar';
+import { PlayButton } from './PlayButton';
+import { Mute } from './Mute';
+import { Fullscreen } from './Fullscreen';
+import { AnimatedWrapper, type AnimationRef } from './ControlsAnimatedWrapper';
+
+interface ControlsProps
+  extends Omit<SeekbarProps, 'customStyles' | 'onSeeking'> {
+  customStyles: VideoPlayerComponentProps['customStyles'];
+  showDuration: VideoPlayerComponentProps['showDuration'];
+  disableFullscreen: VideoPlayerComponentProps['disableFullscreen'];
+  animationDuration: number;
+  duration: number;
+  isPlaying: boolean;
+  isMuted: boolean;
+  onPlayPress: () => void;
+  onMutePress: () => void;
+  onToggleFullScreen: () => void;
+  isControlsVisible: boolean;
+}
+
+export interface ProgressRef {
+  onProgress: (progress: number) => void;
+}
+
+export const Controls = forwardRef<ProgressRef, ControlsProps>(
+  (
+    {
+      customStyles,
+      onPlayPress,
+      isPlaying,
+      showDuration,
+      onToggleFullScreen,
+      duration,
+      disableFullscreen,
+      onMutePress,
+      isMuted,
+      animationDuration,
+      controlsTimeoutId,
+      isControlsVisible,
+      ...seekbarProps
+    },
+    ref
+  ) => {
+    const durationRef = useRef<ProgressRef>(null);
+    const seekbarRef = useRef<ProgressRef>(null);
+    const animationRef = useRef<AnimationRef>(null);
+
+    useImperativeHandle(ref, () => ({
+      onProgress: (progress) => {
+        durationRef.current?.onProgress(progress);
+        seekbarRef.current?.onProgress(progress);
+      },
+      runControlsAnimation: (toValue: number, callback?: () => void) => {
+        animationRef.current?.runControlsAnimation(toValue, callback);
+      },
+    }));
+
+    if (!isControlsVisible) {
+      return (
+        <Seekbar
+          fullWidth={true}
+          ref={seekbarRef}
+          {...seekbarProps}
+          onSeeking={(progress) => durationRef.current?.onProgress(progress)}
+          isPlaying={isPlaying}
+          controlsTimeoutId={controlsTimeoutId}
+          duration={duration}
+          seekBarBackgroundCustomStyles={customStyles?.seekBarBackground}
+          seekBarCustomStyles={customStyles?.seekBar}
+          seekBarFullWidthCustomStyles={customStyles?.seekBarFullWidth}
+          seekBarKnobCustomStyles={customStyles?.seekBarKnob}
+          seekBarKnobSeekingCustomStyles={customStyles?.seekBarKnobSeeking}
+          seekBarProgressCustomStyles={customStyles?.seekBarProgress}
+        />
+      );
+    }
+
+    return (
+      <AnimatedWrapper
+        ref={animationRef}
+        animationDuration={animationDuration}
+        customStylesControls={customStyles?.controls}
+      >
+        <PlayButton
+          controlButtonCustomStyles={customStyles?.controlButton}
+          playControlCustomStyles={customStyles?.playControl}
+          isPlaying={isPlaying}
+          onPlayPress={onPlayPress}
+        />
+        <Seekbar
+          fullWidth={!isControlsVisible}
+          ref={seekbarRef}
+          {...seekbarProps}
+          onSeeking={(progress) => durationRef.current?.onProgress(progress)}
+          isPlaying={isPlaying}
+          controlsTimeoutId={controlsTimeoutId}
+          duration={duration}
+          seekBarBackgroundCustomStyles={customStyles?.seekBarBackground}
+          seekBarCustomStyles={customStyles?.seekBar}
+          seekBarFullWidthCustomStyles={customStyles?.seekBarFullWidth}
+          seekBarKnobCustomStyles={customStyles?.seekBarKnob}
+          seekBarKnobSeekingCustomStyles={customStyles?.seekBarKnobSeeking}
+          seekBarProgressCustomStyles={customStyles?.seekBarProgress}
+        />
+        {showDuration && (
+          <DurationText
+            ref={durationRef}
+            duration={duration}
+            durationTextCustomStyles={customStyles?.durationText}
+          />
+        )}
+        <Mute
+          controlButtonCustomStyles={customStyles?.controlButton}
+          controlIconCustomStyles={customStyles?.controlIcon}
+          isMuted={isMuted}
+          onMutePress={onMutePress}
+        />
+        {!disableFullscreen && (
+          <Fullscreen
+            onToggleFullScreen={onToggleFullScreen}
+            controlButtonCustomStyles={customStyles?.controlButton}
+            controlIconCustomStyles={customStyles?.controlIcon}
+          />
+        )}
+      </AnimatedWrapper>
+    );
+  }
+);
diff --git a/src/controls/ControlsAnimatedWrapper.tsx b/src/controls/ControlsAnimatedWrapper.tsx
new file mode 100644
index 0000000..50748c2
--- /dev/null
+++ b/src/controls/ControlsAnimatedWrapper.tsx
@@ -0,0 +1,69 @@
+import type { CustomStyles } from 'react-native-video-player';
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+} from 'react';
+import { Animated, StyleSheet } from 'react-native';
+
+export interface AnimationRef {
+  runControlsAnimation: (toValue: number, callback?: () => void) => void;
+}
+
+interface AnimatedWrapperProps {
+  animationDuration: number;
+  children: React.ReactNode;
+  customStylesControls: CustomStyles['controls'];
+}
+
+export const AnimatedWrapper = memo(
+  forwardRef<AnimationRef, AnimatedWrapperProps>(
+    ({ animationDuration, children, customStylesControls }, ref) => {
+      const animationValue = useRef(new Animated.Value(0)).current;
+
+      const runControlsAnimation = useCallback(
+        (toValue: number, callback?: () => void) => {
+          Animated.timing(animationValue, {
+            toValue,
+            duration: animationDuration,
+            useNativeDriver: true,
+          }).start(callback);
+        },
+        [animationDuration, animationValue]
+      );
+
+      useImperativeHandle(ref, () => ({
+        runControlsAnimation,
+      }));
+
+      const controlsTranslateY = animationValue.interpolate({
+        inputRange: [0, 1],
+        outputRange: [48, 0],
+      });
+
+      return (
+        <Animated.View
+          style={[
+            styles.controls,
+            customStylesControls,
+            { transform: [{ translateY: controlsTranslateY }] },
+          ]}
+        >
+          {children}
+        </Animated.View>
+      );
+    }
+  )
+);
+
+const styles = StyleSheet.create({
+  controls: {
+    backgroundColor: 'rgba(0, 0, 0, 0.6)',
+    height: 48,
+    marginTop: -48,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+});
diff --git a/src/controls/Duration.tsx b/src/controls/Duration.tsx
new file mode 100644
index 0000000..c90034b
--- /dev/null
+++ b/src/controls/Duration.tsx
@@ -0,0 +1,67 @@
+import { forwardRef, memo, useImperativeHandle, useState } from 'react';
+import type { CustomStyles } from 'react-native-video-player';
+import { StyleSheet, Text } from 'react-native';
+import type { ProgressRef } from './Controls';
+
+const getDurationTime = (duration: number): string => {
+  const padTimeValueString = (value: number): string =>
+    value.toString().padStart(2, '0');
+
+  if (!Number.isFinite(duration)) return '';
+
+  const seconds = Math.floor(duration % 60);
+  const minutes = Math.floor((duration / 60) % 60);
+  const hours = Math.floor((duration / 3600) % 24);
+
+  return hours
+    ? `${padTimeValueString(hours)}:${padTimeValueString(minutes)}:${padTimeValueString(seconds)}`
+    : `${padTimeValueString(minutes)}:${padTimeValueString(seconds)}`;
+};
+
+const ProgressingDuration = forwardRef<
+  ProgressRef,
+  {
+    duration: number;
+    durationTextCustomStyles: CustomStyles['durationText'];
+  }
+>(({ duration, durationTextCustomStyles }, ref) => {
+  const [progress, setProgress] = useState(0);
+
+  useImperativeHandle(ref, () => ({
+    onProgress: setProgress,
+  }));
+  return (
+    <Text style={[styles.durationText, durationTextCustomStyles]}>
+      {getDurationTime(progress * duration)}
+    </Text>
+  );
+});
+
+export const DurationText = memo(
+  forwardRef<
+    ProgressRef,
+    {
+      duration: number;
+      durationTextCustomStyles: CustomStyles['durationText'];
+    }
+  >(({ duration, durationTextCustomStyles }, ref) => {
+    return (
+      <>
+        <ProgressingDuration
+          ref={ref}
+          duration={duration}
+          durationTextCustomStyles={durationTextCustomStyles}
+        />
+        <Text style={[styles.durationText, durationTextCustomStyles]}>
+          {` / ${getDurationTime(duration)}`}
+        </Text>
+      </>
+    );
+  })
+);
+
+const styles = StyleSheet.create({
+  durationText: {
+    color: 'white',
+  },
+});
diff --git a/src/controls/Fullscreen.tsx b/src/controls/Fullscreen.tsx
new file mode 100644
index 0000000..72401c1
--- /dev/null
+++ b/src/controls/Fullscreen.tsx
@@ -0,0 +1,36 @@
+import type { CustomStyles } from 'react-native-video-player';
+import { memo } from 'react';
+import { Image, StyleSheet, TouchableOpacity } from 'react-native';
+
+interface FullscreenProps {
+  controlButtonCustomStyles: CustomStyles['controlButton'];
+  controlIconCustomStyles: CustomStyles['controlIcon'];
+  onToggleFullScreen: () => void;
+}
+
+export const Fullscreen = memo(
+  ({
+    onToggleFullScreen,
+    controlIconCustomStyles,
+    controlButtonCustomStyles,
+  }: FullscreenProps) => {
+    return (
+      <TouchableOpacity
+        onPress={onToggleFullScreen}
+        style={[styles.extraControl, controlButtonCustomStyles]}
+      >
+        <Image
+          style={controlIconCustomStyles}
+          source={require('../img/fullscreen.png')}
+        />
+      </TouchableOpacity>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  extraControl: {
+    color: 'white',
+    padding: 8,
+  },
+});
diff --git a/src/controls/Mute.tsx b/src/controls/Mute.tsx
new file mode 100644
index 0000000..adcafc8
--- /dev/null
+++ b/src/controls/Mute.tsx
@@ -0,0 +1,42 @@
+import { memo } from 'react';
+import type { CustomStyles } from 'react-native-video-player';
+import { Image, StyleSheet, TouchableOpacity } from 'react-native';
+
+interface MuteProps {
+  controlButtonCustomStyles: CustomStyles['controlButton'];
+  controlIconCustomStyles: CustomStyles['controlIcon'];
+  isMuted: boolean;
+  onMutePress: () => void;
+}
+
+export const Mute = memo(
+  ({
+    isMuted,
+    onMutePress,
+    controlButtonCustomStyles,
+    controlIconCustomStyles,
+  }: MuteProps) => {
+    return (
+      <TouchableOpacity
+        onPress={onMutePress}
+        style={[styles.extraControl, controlButtonCustomStyles]}
+      >
+        <Image
+          style={controlIconCustomStyles}
+          source={
+            isMuted
+              ? require('../img/volume_off.png')
+              : require('../img/volume_on.png')
+          }
+        />
+      </TouchableOpacity>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  extraControl: {
+    color: 'white',
+    padding: 8,
+  },
+});
diff --git a/src/controls/PlayButton.tsx b/src/controls/PlayButton.tsx
new file mode 100644
index 0000000..4df5211
--- /dev/null
+++ b/src/controls/PlayButton.tsx
@@ -0,0 +1,43 @@
+import { Image, StyleSheet, TouchableOpacity } from 'react-native';
+import type { CustomStyles } from 'react-native-video-player';
+import { memo } from 'react';
+
+interface PlayButtonProps {
+  controlButtonCustomStyles?: CustomStyles['controlButton'];
+  playControlCustomStyles?: CustomStyles['playControl'];
+  isPlaying: boolean;
+  onPlayPress: () => void;
+}
+
+export const PlayButton = memo(
+  ({
+    isPlaying,
+    onPlayPress,
+    playControlCustomStyles,
+    controlButtonCustomStyles,
+  }: PlayButtonProps) => {
+    return (
+      <TouchableOpacity
+        onPress={onPlayPress}
+        style={[
+          styles.playControl,
+          controlButtonCustomStyles,
+          playControlCustomStyles,
+        ]}
+      >
+        <Image
+          source={
+            isPlaying ? require('../img/pause.png') : require('../img/play.png')
+          }
+        />
+      </TouchableOpacity>
+    );
+  }
+);
+
+const styles = StyleSheet.create({
+  playControl: {
+    color: 'white',
+    padding: 8,
+  },
+});
diff --git a/src/controls/Seekbar.tsx b/src/controls/Seekbar.tsx
new file mode 100644
index 0000000..15e8d84
--- /dev/null
+++ b/src/controls/Seekbar.tsx
@@ -0,0 +1,221 @@
+import {
+  type DimensionValue,
+  type GestureResponderEvent,
+  type LayoutChangeEvent,
+  StyleSheet,
+  View,
+} from 'react-native';
+import type {
+  CustomStyles,
+  VideoPlayerComponentProps,
+} from 'react-native-video-player';
+import {
+  forwardRef,
+  memo,
+  useCallback,
+  useImperativeHandle,
+  useRef,
+  useState,
+} from 'react';
+import type { ProgressRef } from './Controls';
+
+const parsePadding = (value: DimensionValue, layoutWidth: number) => {
+  if (typeof value === 'number') return value;
+  if (typeof value === 'string' && value.endsWith('%')) {
+    return (parseFloat(value) / 100) * layoutWidth;
+  }
+  return 0;
+};
+
+export interface SeekbarProps {
+  autoplay: VideoPlayerComponentProps['autoplay'];
+  isPlaying: boolean;
+  setIsPlaying: (isPlaying: boolean) => void;
+  fullWidth?: boolean;
+  disableSeek: VideoPlayerComponentProps['disableSeek'];
+  showControls: () => void;
+  onSeek: (progress: number) => void;
+  onSeeking: (progress: number) => void;
+  controlsTimeoutId: NodeJS.Timeout | null;
+  duration: number;
+  // custom styles
+  seekBarCustomStyles?: CustomStyles['seekBar'];
+  seekBarFullWidthCustomStyles?: CustomStyles['seekBarFullWidth'];
+  seekBarProgressCustomStyles?: CustomStyles['seekBarProgress'];
+  seekBarKnobCustomStyles?: CustomStyles['seekBarKnob'];
+  seekBarKnobSeekingCustomStyles?: CustomStyles['seekBarKnobSeeking'];
+  seekBarBackgroundCustomStyles?: CustomStyles['seekBarBackground'];
+}
+
+export const Seekbar = memo(
+  forwardRef<ProgressRef, SeekbarProps>(
+    (
+      {
+        fullWidth,
+        autoplay,
+        isPlaying,
+        setIsPlaying,
+        disableSeek,
+        showControls,
+        controlsTimeoutId,
+        onSeek,
+        onSeeking,
+        duration,
+        seekBarCustomStyles,
+        seekBarFullWidthCustomStyles,
+        seekBarKnobCustomStyles,
+        seekBarKnobSeekingCustomStyles,
+        seekBarProgressCustomStyles,
+        seekBarBackgroundCustomStyles,
+      },
+      ref
+    ) => {
+      const [progress, setProgress] = useState(0);
+      const [isSeeking, setIsSeeking] = useState(false);
+
+      useImperativeHandle(ref, () => ({
+        onProgress: setProgress,
+      }));
+
+      const seekBarWidth = useRef<number>(200);
+      const seekTouchStart = useRef<number>(0);
+      const seekProgressStart = useRef<number>(0);
+      const wasPlayingBeforeSeek = useRef<boolean>(autoplay || isPlaying);
+
+      const _onSeekBarLayout = useCallback(
+        ({ nativeEvent }: LayoutChangeEvent) => {
+          const layoutWidth = nativeEvent.layout.width;
+          const customStyle = seekBarCustomStyles;
+          const paddingHorizontal = customStyle?.paddingHorizontal
+            ? parsePadding(customStyle.paddingHorizontal, layoutWidth) * 2
+            : 0;
+          const paddingLeft = customStyle?.paddingLeft
+            ? parsePadding(customStyle.paddingLeft, layoutWidth)
+            : 0;
+          const paddingRight = customStyle?.paddingRight
+            ? parsePadding(customStyle.paddingRight, layoutWidth)
+            : 0;
+
+          const totalPadding = paddingHorizontal || paddingLeft + paddingRight;
+          seekBarWidth.current = layoutWidth - totalPadding;
+        },
+        [seekBarCustomStyles]
+      );
+
+      const _onSeekGrant = useCallback(
+        (e: GestureResponderEvent) => {
+          seekTouchStart.current = e.nativeEvent.pageX;
+          seekProgressStart.current = progress ?? 0;
+          wasPlayingBeforeSeek.current = isPlaying;
+          setIsSeeking(true);
+          setIsPlaying(false);
+          if (controlsTimeoutId) clearTimeout(controlsTimeoutId);
+        },
+        [controlsTimeoutId, isPlaying, progress, setIsPlaying]
+      );
+
+      const _onSeekRelease = useCallback(() => {
+        setIsSeeking(false);
+        setIsPlaying(wasPlayingBeforeSeek.current);
+        onSeek(progress * duration);
+        showControls();
+      }, [duration, onSeek, progress, setIsPlaying, showControls]);
+
+      const _onSeek = useCallback(
+        (e: GestureResponderEvent) => {
+          const diff = e.nativeEvent.pageX - seekTouchStart.current;
+          const ratio = 100 / seekBarWidth.current;
+          const newProgress = seekProgressStart.current + (ratio * diff) / 100;
+          const fixedProgress = Math.min(Math.max(newProgress, 0), 1);
+          onSeeking(fixedProgress);
+          setProgress(fixedProgress);
+        },
+        [onSeeking]
+      );
+
+      return (
+        <View
+          style={[
+            styles.seekBar,
+            seekBarCustomStyles,
+            fullWidth && styles.seekBarFullWidth,
+            fullWidth && seekBarFullWidthCustomStyles,
+          ]}
+          onLayout={_onSeekBarLayout}
+        >
+          <View
+            style={[
+              !isNaN(progress ?? 0) ? { flexGrow: progress ?? 0 } : null,
+              styles.seekBarProgress,
+              seekBarProgressCustomStyles,
+            ]}
+          />
+          {!fullWidth && !disableSeek && (
+            <View
+              style={[
+                styles.seekBarKnob,
+                seekBarKnobCustomStyles,
+                isSeeking && styles.seekBarKnobSeeking,
+                isSeeking && seekBarKnobSeekingCustomStyles,
+              ]}
+              hitSlop={{ top: 20, bottom: 20, left: 10, right: 20 }}
+              onStartShouldSetResponder={() => true}
+              onMoveShouldSetResponder={() => true}
+              onResponderGrant={_onSeekGrant}
+              onResponderMove={_onSeek}
+              onResponderRelease={_onSeekRelease}
+              onResponderTerminate={_onSeekRelease}
+            />
+          )}
+          <View
+            style={[
+              styles.seekBarBackground,
+              !isNaN(progress) ? { flexGrow: 1 - progress } : null,
+              seekBarBackgroundCustomStyles,
+            ]}
+          />
+        </View>
+      );
+    }
+  )
+);
+
+const styles = StyleSheet.create({
+  seekBar: {
+    alignItems: 'center',
+    height: 30,
+    flexGrow: 1,
+    flexDirection: 'row',
+    paddingHorizontal: 10,
+    marginLeft: -10,
+    marginRight: -5,
+  },
+  seekBarFullWidth: {
+    marginLeft: 0,
+    marginRight: 0,
+    paddingHorizontal: 0,
+    marginTop: -3,
+    height: 3,
+  },
+  seekBarProgress: {
+    height: 3,
+    backgroundColor: '#F00',
+  },
+  seekBarKnob: {
+    width: 20,
+    height: 20,
+    marginHorizontal: -8,
+    marginVertical: -10,
+    borderRadius: 10,
+    backgroundColor: '#F00',
+    transform: [{ scale: 0.8 }],
+    zIndex: 1,
+  },
+  seekBarKnobSeeking: {
+    transform: [{ scale: 1 }],
+  },
+  seekBarBackground: {
+    backgroundColor: 'rgba(255, 255, 255, 0.5)',
+    height: 3,
+  },
+});
diff --git a/src/index.tsx b/src/index.tsx
index bdac106..4b46d6e 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,43 +1,37 @@
 import {
   useState,
-  useRef,
-  useEffect,
   useCallback,
-  useImperativeHandle,
   forwardRef,
+  useMemo,
+  useRef,
+  useImperativeHandle,
 } from 'react';
 import {
-  ImageBackground,
-  Platform,
   StyleSheet,
-  Text,
-  TextInput,
-  TouchableOpacity,
   View,
   type LayoutChangeEvent,
-  type GestureResponderEvent,
   type ImageSourcePropType,
   type StyleProp,
   type ViewStyle,
   type TextStyle,
-  type DimensionValue,
-  Image,
   type ImageStyle,
-  Animated,
 } from 'react-native';
-import Video, {
+import {
   ResizeMode,
   type OnProgressData,
   type OnLoadData,
   type VideoRef,
   type ReactVideoProps,
   type ReactVideoSource,
-  type OnPlaybackStateChangedData,
 } from 'react-native-video';
+import { StartButton, Thumbnail } from './Thumbnail';
+import { RenderVideo, type VideoInternalRef } from './Video';
 
-export type VideoPlayerRef = VideoRef & { stop: () => void };
+export interface VideoPlayerRef extends VideoRef {
+  stop: () => void;
+}
 
-interface CustomStyles {
+export interface CustomStyles {
   wrapper?: StyleProp<ViewStyle>;
   video?: StyleProp<ViewStyle>;
   videoWrapper?: StyleProp<ViewStyle>;
@@ -58,604 +52,158 @@ interface CustomStyles {
   durationText?: StyleProp<TextStyle>;
 }
 
-interface VideoPlayerComponentProps extends ReactVideoProps {
-  source: ReactVideoSource;
-  thumbnail?: ImageSourcePropType;
-  endThumbnail?: ImageSourcePropType;
-  videoWidth?: number;
-  videoHeight?: number;
-  duration?: number;
+export interface VideoPlayerComponentProps extends ReactVideoProps {
+  animationDuration?: number;
   autoplay?: boolean;
-  paused?: boolean;
-  defaultMuted?: boolean;
-  muted?: boolean;
-  style?: StyleProp<ViewStyle>;
   controlsTimeout?: number;
+  customStyles?: CustomStyles;
+  defaultMuted?: boolean;
   disableControlsAutoHide?: boolean;
   disableFullscreen?: boolean;
-  loop?: boolean;
-  resizeMode?: ResizeMode;
-  hideControlsOnStart?: boolean;
-  endWithThumbnail?: boolean;
   disableSeek?: boolean;
-  pauseOnPress?: boolean;
+  duration?: number;
+  endThumbnail?: ImageSourcePropType;
+  endWithThumbnail?: boolean;
   fullScreenOnLongPress?: boolean;
-  customStyles?: CustomStyles;
+  hideControlsOnStart?: boolean;
+  loop?: boolean;
+  muted?: boolean;
   onEnd?: () => void;
-  onProgress?: (event: OnProgressData) => void;
+  onHideControls?: () => void;
   onLoad?: (event: OnLoadData) => void;
-  onStart?: () => void;
+  onMutePress?: (isMuted: boolean) => void;
   onPlayPress?: () => void;
-  onHideControls?: () => void;
+  onProgress?: (event: OnProgressData) => void;
   onShowControls?: () => void;
-  onMutePress?: (isMuted: boolean) => void;
+  onStart?: () => void;
+  pauseOnPress?: boolean;
+  paused?: boolean;
+  resizeMode?: ResizeMode;
   showDuration?: boolean;
-  animationDuration?: number;
+  source: ReactVideoSource;
+  style?: StyleProp<ViewStyle>;
+  thumbnail?: ImageSourcePropType;
+  videoHeight?: number;
+  videoWidth?: number;
 }
 
-const getDurationTime = (duration: number): string => {
-  const padTimeValueString = (value: number): string =>
-    value.toString().padStart(2, '0');
-
-  if (!Number.isFinite(duration)) return '';
-
-  const seconds = Math.floor(duration % 60),
-    minutes = Math.floor((duration / 60) % 60),
-    hours = Math.floor((duration / 3600) % 24);
-
-  return hours
-    ? `${padTimeValueString(hours)}:${padTimeValueString(minutes)}:${padTimeValueString(seconds)}`
-    : `${padTimeValueString(minutes)}:${padTimeValueString(seconds)}`;
-};
-
-const parsePadding = (value: DimensionValue, layoutWidth: number) => {
-  if (typeof value === 'number') {
-    return value;
-  }
-  if (typeof value === 'string' && value.endsWith('%')) {
-    const percent = parseFloat(value) / 100;
-    return layoutWidth * percent;
-  }
-
-  return 0;
-};
-
-const VideoPlayerComponent = forwardRef(
-  (props: VideoPlayerComponentProps, ref) => {
-    const {
-      source,
-      thumbnail,
-      endThumbnail,
-      videoWidth = 1920,
-      videoHeight = 1080,
-      autoplay = false,
-      paused,
-      defaultMuted,
-      muted,
-      style,
-      controlsTimeout = 2000,
-      disableControlsAutoHide,
-      disableFullscreen,
-      repeat = false,
-      resizeMode = 'contain',
-      hideControlsOnStart = false,
-      endWithThumbnail,
-      disableSeek,
-      pauseOnPress,
-      fullScreenOnLongPress,
-      customStyles = {},
-      onEnd,
-      onProgress,
-      onLoad,
-      onStart,
-      onPlayPress,
-      onHideControls,
-      onShowControls,
-      onMutePress,
-      showDuration = false,
-      animationDuration = 100,
-    } = props;
-
-    const [isStarted, setIsStarted] = useState(autoplay);
-    const [isPlaying, setIsPlaying] = useState(autoplay);
-    const [hasEnded, setHasEnded] = useState(false);
-    const [width, setWidth] = useState(200);
-    const [progress, setProgress] = useState(0);
-    const [isMuted, setIsMuted] = useState(defaultMuted ?? false);
-    const [isControlsVisible, setIsControlsVisible] = useState(false);
-    const [duration, setDuration] = useState(0);
-    const [isSeeking, setIsSeeking] = useState(false);
-
-    const videoRef = useRef<VideoRef>(null);
-    const controlsTimeoutRef = useRef<NodeJS.Timeout | null>(null);
-
-    const seekBarWidth = useRef<number>(200);
-    const seekTouchStart = useRef<number>(0);
-    const seekProgressStart = useRef<number>(0);
-    const wasPlayingBeforeSeek = useRef<boolean>(autoplay);
-
-    const animationValue = useRef(new Animated.Value(0)).current;
-
-    const controlsTranslateY = animationValue.interpolate({
-      inputRange: [0, 1],
-      outputRange: [48, 0],
-    });
-
-    const getSizeStyles = useCallback(() => {
-      const ratio = videoHeight / videoWidth;
-      return { height: width * ratio, width: width };
-    }, [videoWidth, videoHeight, width]);
-
-    useImperativeHandle(ref, () => ({
-      ...videoRef.current,
-      resume: () => {
-        setIsPlaying(true);
-        if (!isStarted) setIsStarted(true);
-        videoRef.current?.resume();
-      },
-      pause: () => {
-        setIsPlaying(false);
-        videoRef.current?.pause();
-      },
-      stop: () => {
-        setIsStarted(false);
-        setHasEnded(true);
-        setProgress(0);
-        videoRef.current?.dismissFullscreenPlayer();
-      },
-    }));
-
-    const _hideControls = useCallback(() => {
-      if (controlsTimeoutRef.current) clearTimeout(controlsTimeoutRef.current);
-
-      controlsTimeoutRef.current = setTimeout(() => {
-        if (onHideControls) onHideControls();
-        if (disableControlsAutoHide) return;
-
-        Animated.timing(animationValue, {
-          toValue: 0.1,
-          duration: animationDuration,
-          useNativeDriver: true,
-        }).start(() => {
-          setIsControlsVisible(false);
-        });
-      }, controlsTimeout);
-    }, [
-      controlsTimeout,
-      onHideControls,
-      disableControlsAutoHide,
-      animationValue,
-      animationDuration,
-    ]);
-
-    const _showControls = useCallback(() => {
-      if (onShowControls && !isControlsVisible) onShowControls();
-      setIsControlsVisible(true);
-
-      Animated.timing(animationValue, {
-        toValue: 1,
-        duration: animationDuration,
-        useNativeDriver: true,
-      }).start();
-
-      _hideControls();
-    }, [
-      onShowControls,
-      isControlsVisible,
-      animationValue,
-      animationDuration,
-      _hideControls,
-    ]);
-
-    useEffect(() => {
-      if (autoplay) _hideControls();
-
-      return () => {
-        if (controlsTimeoutRef.current) {
-          clearTimeout(controlsTimeoutRef.current);
-          controlsTimeoutRef.current = null;
-        }
-      };
-    }, [_hideControls, autoplay]);
-
-    const onLayout = useCallback((event: LayoutChangeEvent) => {
-      const { width } = event.nativeEvent.layout;
-      setWidth(width);
-    }, []);
-
-    const _onStart = useCallback(() => {
-      if (onStart) onStart();
-      setIsPlaying(true);
-      setIsStarted(true);
-      setHasEnded(false);
-      setProgress((prev) => (prev >= 1 ? 0 : prev));
-      hideControlsOnStart ? _hideControls() : _showControls();
-    }, [_hideControls, _showControls, hideControlsOnStart, onStart]);
-
-    const _onProgress = useCallback(
-      (event: OnProgressData) => {
-        if (isSeeking) return;
-        if (onProgress) onProgress(event);
-
-        if (isNaN(props?.duration || 0) && isNaN(duration)) {
-          throw new Error(
-            'Could not load video duration correctly, please add `duration` props'
-          );
-        }
-
-        setProgress(event.currentTime / (props.duration || duration));
-      },
-      [isSeeking, onProgress, duration, props.duration]
-    );
-
-    const _onEnd = useCallback(() => {
-      if (onEnd) onEnd();
-      if (endWithThumbnail || endThumbnail) {
-        setIsStarted(false);
-        setHasEnded(true);
-        videoRef.current?.dismissFullscreenPlayer();
-      }
-      setProgress(1);
-      setIsPlaying(repeat);
-      if (repeat) videoRef.current?.seek(0);
-    }, [onEnd, endWithThumbnail, endThumbnail, repeat]);
-
-    const _onLoad = useCallback(
-      (event: OnLoadData) => {
-        if (onLoad) onLoad(event);
-        setDuration(event.duration);
-      },
-      [onLoad]
-    );
-
-    const _onPlayPress = useCallback(() => {
-      if (onPlayPress) onPlayPress();
-      setIsPlaying((prev) => !prev);
-
-      if (progress >= 1) {
-        videoRef.current?.seek(0);
-      }
-
-      _showControls();
-    }, [_showControls, onPlayPress, progress]);
-
-    const _onMutePress = useCallback(() => {
-      const newMutedState = !isMuted;
-      if (onMutePress) onMutePress(newMutedState);
-      setIsMuted(newMutedState);
-      _showControls();
-    }, [isMuted, onMutePress, _showControls]);
-
-    const onToggleFullScreen = useCallback(() => {
-      videoRef.current?.presentFullscreenPlayer();
-    }, []);
-
-    const onSeekBarLayout = useCallback(
-      ({ nativeEvent }: LayoutChangeEvent) => {
-        const layoutWidth = nativeEvent.layout.width;
-        const customStyle = customStyles.seekBar;
-
-        const paddingHorizontal = customStyle?.paddingHorizontal
-          ? parsePadding(customStyle.paddingHorizontal, layoutWidth) * 2
-          : 0;
-        const paddingLeft = customStyle?.paddingLeft
-          ? parsePadding(customStyle.paddingLeft, layoutWidth)
-          : 0;
-        const paddingRight = customStyle?.paddingRight
-          ? parsePadding(customStyle.paddingRight, layoutWidth)
-          : 0;
-
-        const totalPadding = paddingHorizontal || paddingLeft + paddingRight;
-        seekBarWidth.current = layoutWidth - totalPadding;
-      },
-      [customStyles.seekBar]
-    );
-
-    const onSeekGrant = useCallback(
-      (e: GestureResponderEvent) => {
-        seekTouchStart.current = e.nativeEvent.pageX;
-        seekProgressStart.current = progress;
-        wasPlayingBeforeSeek.current = isPlaying;
-        setIsSeeking(true);
-        setIsPlaying(false);
-
-        if (controlsTimeoutRef.current)
-          clearTimeout(controlsTimeoutRef.current);
-      },
-      [progress, isPlaying]
-    );
-
-    const onSeekRelease = useCallback(() => {
-      setIsSeeking(false);
-      setIsPlaying(wasPlayingBeforeSeek.current);
-      _showControls();
-    }, [_showControls]);
-
-    const onSeek = useCallback(
-      (e: GestureResponderEvent) => {
-        const diff = e.nativeEvent.pageX - seekTouchStart.current;
-        const ratio = 100 / seekBarWidth.current;
-        const newProgress = seekProgressStart.current + (ratio * diff) / 100;
-
-        const fixedProgress =
-          newProgress < 0 ? 0 : newProgress > 1 ? 1 : newProgress;
-
-        setProgress(fixedProgress);
-        videoRef.current?.seek(newProgress * duration);
-      },
-      [duration]
-    );
-
-    const _onPlaybackStateChanged = useCallback(
-      (data: OnPlaybackStateChangedData) => {
-        if (data.isPlaying !== isPlaying) setIsPlaying(data.isPlaying);
-      },
-      [isPlaying]
-    );
-
-    const renderStartButton = useCallback(
-      () => (
-        <TouchableOpacity
-          style={[styles.playButton, customStyles.playButton]}
-          onPress={_onStart}
-        >
-          <Image
-            source={require('./img/play.png')}
-            style={[styles.playArrow, customStyles.playArrow]}
-          />
-        </TouchableOpacity>
-      ),
-      [_onStart, customStyles.playArrow, customStyles.playButton]
-    );
-
-    const renderThumbnail = useCallback(
-      (thumbnailSource: ImageSourcePropType) => (
-        <ImageBackground
-          source={thumbnailSource}
-          style={[
-            styles.thumbnail,
-            getSizeStyles(),
-            style,
-            customStyles.thumbnail,
-          ]}
-        >
-          {renderStartButton()}
-        </ImageBackground>
-      ),
-      [getSizeStyles, renderStartButton, style, customStyles.thumbnail]
-    );
-
-    const renderSeekBar = useCallback(
-      (fullWidth?: boolean) => (
-        <View
-          style={[
-            styles.seekBar,
-            customStyles.seekBar,
-            fullWidth && styles.seekBarFullWidth,
-            fullWidth && customStyles.seekBarFullWidth,
-          ]}
-          onLayout={onSeekBarLayout}
-        >
-          <View
-            style={[
-              !isNaN(progress) ? { flexGrow: progress } : null,
-              styles.seekBarProgress,
-              customStyles.seekBarProgress,
-            ]}
-          />
-          {!fullWidth && !disableSeek && (
-            <View
-              style={[
-                styles.seekBarKnob,
-                customStyles.seekBarKnob,
-                isSeeking && styles.seekBarKnobSeeking,
-                isSeeking && customStyles.seekBarKnobSeeking,
-              ]}
-              hitSlop={{ top: 20, bottom: 20, left: 10, right: 20 }}
-              onStartShouldSetResponder={() => true}
-              onMoveShouldSetResponder={() => true}
-              onResponderGrant={onSeekGrant}
-              onResponderMove={onSeek}
-              onResponderRelease={onSeekRelease}
-              onResponderTerminate={onSeekRelease}
-            />
-          )}
-          <View
-            style={[
-              styles.seekBarBackground,
-              !isNaN(progress) ? { flexGrow: 1 - progress } : null,
-              customStyles.seekBarBackground,
-            ]}
+const VideoPlayerComponent = forwardRef<
+  VideoPlayerRef,
+  VideoPlayerComponentProps
+>((props, ref) => {
+  const {
+    autoplay = false,
+    customStyles = {},
+    endThumbnail,
+    endWithThumbnail,
+    onStart,
+    onEnd,
+    style,
+    thumbnail,
+    videoHeight = 1080,
+    videoWidth = 1920,
+    ...rest
+  } = props;
+
+  const videoRef = useRef<VideoInternalRef>(null);
+
+  useImperativeHandle(ref, () => ({
+    ...videoRef.current!,
+    resume: () => {
+      if (!isStarted) setIsStarted(true);
+      videoRef.current?.resume();
+    },
+    stop: () => {
+      setIsStarted(false);
+      setHasEnded(true);
+      videoRef.current?.dismissFullscreenPlayer();
+    },
+  }));
+
+  const [isStarted, setIsStarted] = useState(autoplay);
+  const [hasEnded, setHasEnded] = useState(false);
+  const [width, setWidth] = useState(200);
+
+  const sizeStyles = useMemo(() => {
+    const ratio = videoHeight / videoWidth;
+    return { height: width * ratio, width: width };
+  }, [videoWidth, videoHeight, width]);
+
+  const _onStart = useCallback(() => {
+    if (onStart) onStart();
+    setIsStarted(true);
+    setHasEnded(false);
+
+    // force re-render to make sure video is already mounted and videoRef is available
+    setTimeout(() => videoRef.current?.onStart(), 0);
+  }, [onStart]);
+
+  const _onEnd = useCallback(() => {
+    if (onEnd) onEnd();
+    if (endWithThumbnail || endThumbnail) {
+      setIsStarted(false);
+      setHasEnded(true);
+      videoRef.current?.dismissFullscreenPlayer();
+    }
+  }, [onEnd, endWithThumbnail, endThumbnail, setIsStarted, setHasEnded]);
+
+  const onLayout = useCallback((event: LayoutChangeEvent) => {
+    const { width } = event.nativeEvent.layout;
+    setWidth(width);
+  }, []);
+
+  const renderContent = useCallback(() => {
+    if ((hasEnded && endThumbnail) || (!isStarted && thumbnail))
+      return (
+        <Thumbnail
+          thumbnailSource={hasEnded && endThumbnail ? endThumbnail : thumbnail!}
+          style={style}
+          sizeStyles={sizeStyles}
+          onStart={_onStart}
+          customStylesThumbnail={customStyles.thumbnail}
+          customStylesPlayButton={customStyles.playButton}
+          customStylesPlayArrow={customStyles.playArrow}
+        />
+      );
+    if (!isStarted)
+      return (
+        <View style={[styles.preloadingPlaceholder, sizeStyles, style]}>
+          <StartButton
+            onStart={_onStart}
+            customStylesPlayButton={customStyles.playButton}
+            customStylesPlayArrow={customStyles.playArrow}
           />
         </View>
-      ),
-      [
-        customStyles.seekBar,
-        customStyles.seekBarFullWidth,
-        customStyles.seekBarProgress,
-        customStyles.seekBarKnob,
-        customStyles.seekBarKnobSeeking,
-        customStyles.seekBarBackground,
-        onSeekBarLayout,
-        progress,
-        disableSeek,
-        isSeeking,
-        onSeekGrant,
-        onSeek,
-        onSeekRelease,
-      ]
-    );
-
-    const renderControls = useCallback(
-      () => (
-        <Animated.View
-          style={[
-            styles.controls,
-            customStyles.controls,
-            { transform: [{ translateY: controlsTranslateY }] },
-          ]}
-        >
-          <TouchableOpacity
-            onPress={_onPlayPress}
-            style={[
-              styles.playControl,
-              customStyles.controlButton,
-              customStyles.playControl,
-            ]}
-          >
-            <Image
-              source={
-                isPlaying
-                  ? require('./img/pause.png')
-                  : require('./img/play.png')
-              }
-            />
-          </TouchableOpacity>
-          {renderSeekBar()}
-          {showDuration && (
-            <>
-              <TextInput
-                style={[styles.durationText, customStyles.durationText]}
-                editable={false}
-                value={getDurationTime(progress * (props.duration || duration))}
-              />
-              <Text style={[styles.durationText, customStyles.durationText]}>
-                {` / ${getDurationTime(props.duration || duration)}`}
-              </Text>
-            </>
-          )}
-          <TouchableOpacity
-            onPress={_onMutePress}
-            style={[styles.extraControl, customStyles.controlButton]}
-          >
-            <Image
-              style={customStyles.controlIcon}
-              source={
-                isMuted
-                  ? require('./img/volume_off.png')
-                  : require('./img/volume_on.png')
-              }
-            />
-          </TouchableOpacity>
-          {!disableFullscreen && (
-            <TouchableOpacity
-              onPress={onToggleFullScreen}
-              style={[styles.extraControl, customStyles.controlButton]}
-            >
-              <Image
-                style={customStyles.controlIcon}
-                source={require('./img/fullscreen.png')}
-              />
-            </TouchableOpacity>
-          )}
-        </Animated.View>
-      ),
-      [
-        customStyles.controls,
-        customStyles.controlButton,
-        customStyles.playControl,
-        customStyles.durationText,
-        customStyles.controlIcon,
-        controlsTranslateY,
-        _onPlayPress,
-        isPlaying,
-        renderSeekBar,
-        showDuration,
-        progress,
-        props.duration,
-        duration,
-        _onMutePress,
-        isMuted,
-        disableFullscreen,
-        onToggleFullScreen,
-      ]
-    );
-
-    const renderVideo = useCallback(
-      () => (
-        <View style={[{ overflow: 'hidden' }, customStyles.videoWrapper]}>
-          <Video
-            {...props}
-            ref={videoRef}
-            style={[styles.video, getSizeStyles(), style, customStyles.video]}
-            muted={muted || isMuted}
-            paused={paused || !isPlaying}
-            onProgress={_onProgress}
-            onEnd={_onEnd}
-            onLoad={_onLoad}
-            source={source}
-            resizeMode={resizeMode}
-            onPlaybackStateChanged={_onPlaybackStateChanged}
-          />
-          <TouchableOpacity
-            style={styles.overlayButton}
-            onPress={() => {
-              _showControls();
-              if (pauseOnPress) _onPlayPress();
-            }}
-            onLongPress={() => {
-              if (fullScreenOnLongPress) onToggleFullScreen();
-            }}
-          />
-          {isControlsVisible ? renderControls() : renderSeekBar(true)}
-        </View>
-      ),
-      [
-        customStyles.videoWrapper,
-        customStyles.video,
-        props,
-        getSizeStyles,
-        style,
-        muted,
-        isMuted,
-        paused,
-        isPlaying,
-        _onProgress,
-        _onEnd,
-        _onLoad,
-        source,
-        resizeMode,
-        _onPlaybackStateChanged,
-        isControlsVisible,
-        renderControls,
-        renderSeekBar,
-        _showControls,
-        pauseOnPress,
-        _onPlayPress,
-        fullScreenOnLongPress,
-        onToggleFullScreen,
-      ]
-    );
-
-    const renderContent = useCallback(() => {
-      if (hasEnded && endThumbnail) return renderThumbnail(endThumbnail);
-      if (!isStarted && thumbnail) return renderThumbnail(thumbnail);
-      if (!isStarted)
-        return (
-          <View style={[styles.preloadingPlaceholder, getSizeStyles(), style]}>
-            {renderStartButton()}
-          </View>
-        );
-      return renderVideo();
-    }, [
-      hasEnded,
-      endThumbnail,
-      isStarted,
-      thumbnail,
-      renderThumbnail,
-      getSizeStyles,
-      style,
-      renderStartButton,
-      renderVideo,
-    ]);
-
+      );
     return (
-      <View onLayout={onLayout} style={customStyles.wrapper}>
-        {renderContent()}
-      </View>
+      <RenderVideo
+        ref={videoRef}
+        {...rest}
+        onEnd={_onEnd}
+        sizeStyle={sizeStyles}
+      />
     );
-  }
-);
+  }, [
+    hasEnded,
+    endThumbnail,
+    isStarted,
+    thumbnail,
+    style,
+    sizeStyles,
+    _onStart,
+    customStyles.thumbnail,
+    customStyles.playButton,
+    customStyles.playArrow,
+    rest,
+    _onEnd,
+  ]);
+
+  return (
+    <View onLayout={onLayout} style={customStyles.wrapper}>
+      {renderContent()}
+    </View>
+  );
+});
 
 export default VideoPlayerComponent;
 
@@ -665,92 +213,4 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     alignItems: 'center',
   },
-  thumbnail: {
-    backgroundColor: 'black',
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  playButton: {
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
-    borderRadius: 32,
-    width: 64,
-    height: 64,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  playArrow: {
-    width: 28,
-    height: 28,
-    marginLeft: 2,
-  },
-  video:
-    +Platform.Version >= 24
-      ? {}
-      : {
-          backgroundColor: 'black',
-        },
-  controls: {
-    backgroundColor: 'rgba(0, 0, 0, 0.6)',
-    height: 48,
-    marginTop: -48,
-    flexDirection: 'row',
-    alignItems: 'center',
-  },
-  playControl: {
-    color: 'white',
-    padding: 8,
-  },
-  extraControl: {
-    color: 'white',
-    padding: 8,
-  },
-  seekBar: {
-    alignItems: 'center',
-    height: 30,
-    flexGrow: 1,
-    flexDirection: 'row',
-    paddingHorizontal: 10,
-    marginLeft: -10,
-    marginRight: -5,
-  },
-  seekBarFullWidth: {
-    marginLeft: 0,
-    marginRight: 0,
-    paddingHorizontal: 0,
-    marginTop: -3,
-    height: 3,
-  },
-  seekBarProgress: {
-    height: 3,
-    backgroundColor: '#F00',
-  },
-  seekBarKnob: {
-    width: 20,
-    height: 20,
-    marginHorizontal: -8,
-    marginVertical: -10,
-    borderRadius: 10,
-    backgroundColor: '#F00',
-    transform: [{ scale: 0.8 }],
-    zIndex: 1,
-  },
-  seekBarKnobSeeking: {
-    transform: [{ scale: 1 }],
-  },
-  seekBarBackground: {
-    backgroundColor: 'rgba(255, 255, 255, 0.5)',
-    height: 3,
-  },
-  overlayButton: {
-    ...StyleSheet.absoluteFillObject,
-  },
-  activeDurationText: {
-    paddingLeft: 8,
-    paddingRight: 0,
-    paddingBottom: 0,
-    paddingTop: 0,
-  },
-  durationText: {
-    color: 'white',
-  },
 });
diff --git a/yarn.lock b/yarn.lock
index 64ae6f1..c64da11 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1154,7 +1154,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-arrow-functions@npm:^7.0.0, @babel/plugin-transform-arrow-functions@npm:^7.25.9":
+"@babel/plugin-transform-arrow-functions@npm:^7.0.0, @babel/plugin-transform-arrow-functions@npm:^7.0.0-0, @babel/plugin-transform-arrow-functions@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-arrow-functions@npm:7.25.9"
   dependencies:
@@ -1213,7 +1213,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-properties@npm:^7.25.9":
+"@babel/plugin-transform-class-properties@npm:^7.0.0-0, @babel/plugin-transform-class-properties@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-class-properties@npm:7.25.9"
   dependencies:
@@ -1237,7 +1237,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-classes@npm:^7.0.0, @babel/plugin-transform-classes@npm:^7.25.9":
+"@babel/plugin-transform-classes@npm:^7.0.0, @babel/plugin-transform-classes@npm:^7.0.0-0, @babel/plugin-transform-classes@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-classes@npm:7.25.9"
   dependencies:
@@ -1500,7 +1500,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.25.9":
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.0.0-0, @babel/plugin-transform-nullish-coalescing-operator@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.25.9"
   dependencies:
@@ -1558,7 +1558,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-optional-chaining@npm:^7.25.9":
+"@babel/plugin-transform-optional-chaining@npm:^7.0.0-0, @babel/plugin-transform-optional-chaining@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-optional-chaining@npm:7.25.9"
   dependencies:
@@ -1750,7 +1750,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-shorthand-properties@npm:^7.0.0, @babel/plugin-transform-shorthand-properties@npm:^7.25.9":
+"@babel/plugin-transform-shorthand-properties@npm:^7.0.0, @babel/plugin-transform-shorthand-properties@npm:^7.0.0-0, @babel/plugin-transform-shorthand-properties@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-shorthand-properties@npm:7.25.9"
   dependencies:
@@ -1795,7 +1795,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-template-literals@npm:^7.25.9":
+"@babel/plugin-transform-template-literals@npm:^7.0.0-0, @babel/plugin-transform-template-literals@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-template-literals@npm:7.25.9"
   dependencies:
@@ -1855,7 +1855,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-unicode-regex@npm:^7.0.0, @babel/plugin-transform-unicode-regex@npm:^7.25.9":
+"@babel/plugin-transform-unicode-regex@npm:^7.0.0, @babel/plugin-transform-unicode-regex@npm:^7.0.0-0, @babel/plugin-transform-unicode-regex@npm:^7.25.9":
   version: 7.25.9
   resolution: "@babel/plugin-transform-unicode-regex@npm:7.25.9"
   dependencies:
@@ -2000,7 +2000,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.21.0, @babel/preset-typescript@npm:^7.23.0, @babel/preset-typescript@npm:^7.24.7, @babel/preset-typescript@npm:^7.25.9":
+"@babel/preset-typescript@npm:^7.13.0, @babel/preset-typescript@npm:^7.16.7, @babel/preset-typescript@npm:^7.21.0, @babel/preset-typescript@npm:^7.23.0, @babel/preset-typescript@npm:^7.24.7, @babel/preset-typescript@npm:^7.25.9":
   version: 7.26.0
   resolution: "@babel/preset-typescript@npm:7.26.0"
   dependencies:
@@ -2092,6 +2092,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@clack/core@npm:0.3.5, @clack/core@npm:^0.3.5":
+  version: 0.3.5
+  resolution: "@clack/core@npm:0.3.5"
+  dependencies:
+    picocolors: ^1.0.0
+    sisteransi: ^1.0.5
+  checksum: 50f9665bd5fdda557aed355be36498c71d3b211a9791b8ded1f5fe49532dbed0db2c9e851e3664c0430a3115177df745d719348455748f6ab582fb9c983d1465
+  languageName: node
+  linkType: hard
+
+"@clack/prompts@npm:^0.8.2":
+  version: 0.8.2
+  resolution: "@clack/prompts@npm:0.8.2"
+  dependencies:
+    "@clack/core": 0.3.5
+    picocolors: ^1.0.0
+    sisteransi: ^1.0.5
+  checksum: 1786107c8d73413206d59dfc6236406c8e8e54425cd7f1602137bff7e56f49e347e1a167c49efb69fffefa4a8ba298b09142fe47be2082f45a5a6c1d7bac59ed
+  languageName: node
+  linkType: hard
+
 "@colors/colors@npm:1.5.0":
   version: 1.5.0
   resolution: "@colors/colors@npm:1.5.0"
@@ -5039,6 +5060,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@shopify/react-native-skia@npm:^1.5.10":
+  version: 1.7.6
+  resolution: "@shopify/react-native-skia@npm:1.7.6"
+  dependencies:
+    canvaskit-wasm: 0.39.1
+    react-reconciler: 0.27.0
+  peerDependencies:
+    react: ">=18.0"
+    react-native: ">=0.64"
+    react-native-reanimated: ">=2.0.0"
+  peerDependenciesMeta:
+    react-native:
+      optional: true
+    react-native-reanimated:
+      optional: true
+  bin:
+    setup-skia-web: ./scripts/setup-canvaskit.js
+  checksum: 2735073ded0fabdd4c5a031796e3555c6cea7dc389edf91f769c0c5fc3f8f93b2c40ed40a0c1d0ee444c010cc6344e614819aab01d1d814380edec22515c2235
+  languageName: node
+  linkType: hard
+
 "@sideway/address@npm:^4.1.5":
   version: 4.1.5
   resolution: "@sideway/address@npm:4.1.5"
@@ -6222,6 +6264,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webgpu/types@npm:0.1.21":
+  version: 0.1.21
+  resolution: "@webgpu/types@npm:0.1.21"
+  checksum: b16ddc4d46a3c507a7f243f14b08b96ebbdb4495f9ea703441ad3525dd5e7e4a5f743f2879e51d74c78846f950e7d60c1349670f75cb7ca03ac3ddf51d46aabe
+  languageName: node
+  linkType: hard
+
 "@xmldom/xmldom@npm:^0.8.8":
   version: 0.8.10
   resolution: "@xmldom/xmldom@npm:0.8.10"
@@ -7565,6 +7614,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"canvaskit-wasm@npm:0.39.1":
+  version: 0.39.1
+  resolution: "canvaskit-wasm@npm:0.39.1"
+  dependencies:
+    "@webgpu/types": 0.1.21
+  checksum: da62926fc81f424a781e148b4d76bb5fc9b0188f136090b3b287522dc653cb002bfb406e2eff45b55fcc1cafbc7629f988e20ad6c777bab85c1bb09e1091a5e2
+  languageName: node
+  linkType: hard
+
 "ccount@npm:^2.0.0":
   version: 2.0.1
   resolution: "ccount@npm:2.0.1"
@@ -11223,6 +11281,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fsevents@npm:2.3.2":
+  version: 2.3.2
+  resolution: "fsevents@npm:2.3.2"
+  dependencies:
+    node-gyp: latest
+  checksum: 97ade64e75091afee5265e6956cb72ba34db7819b4c3e94c431d4be2b19b8bb7a2d4116da417950c3425f17c8fe693d25e20212cac583ac1521ad066b77ae31f
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
 "fsevents@npm:^2.3.2, fsevents@npm:~2.3.2":
   version: 2.3.3
   resolution: "fsevents@npm:2.3.3"
@@ -11233,6 +11301,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fsevents@patch:fsevents@2.3.2#~builtin<compat/fsevents>":
+  version: 2.3.2
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin<compat/fsevents>::version=2.3.2&hash=df0bf1"
+  dependencies:
+    node-gyp: latest
+  conditions: os=darwin
+  languageName: node
+  linkType: hard
+
 "fsevents@patch:fsevents@^2.3.2#~builtin<compat/fsevents>, fsevents@patch:fsevents@~2.3.2#~builtin<compat/fsevents>":
   version: 2.3.3
   resolution: "fsevents@patch:fsevents@npm%3A2.3.3#~builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
@@ -14177,7 +14254,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"kleur@npm:^4.1.4":
+"kleur@npm:^4.1.4, kleur@npm:^4.1.5":
   version: 4.1.5
   resolution: "kleur@npm:4.1.5"
   checksum: 1dc476e32741acf0b1b5b0627ffd0d722e342c1b0da14de3e8ae97821327ca08f9fb944542fb3c126d90ac5f27f9d804edbe7c585bf7d12ef495d115e0f22c12
@@ -16202,6 +16279,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"mri@npm:^1.2.0":
+  version: 1.2.0
+  resolution: "mri@npm:1.2.0"
+  checksum: 83f515abbcff60150873e424894a2f65d68037e5a7fcde8a9e2b285ee9c13ac581b63cfc1e6826c4732de3aeb84902f7c1e16b7aff46cd3f897a0f757a894e85
+  languageName: node
+  linkType: hard
+
 "mrmime@npm:^2.0.0":
   version: 2.0.0
   resolution: "mrmime@npm:2.0.0"
@@ -17385,6 +17469,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"playwright-core@npm:1.49.1":
+  version: 1.49.1
+  resolution: "playwright-core@npm:1.49.1"
+  bin:
+    playwright-core: cli.js
+  checksum: a940f4b10ff1de033b4b8594b5104b02849a892d9adda0d42330a872cd3d8d287ffd2b01fc33f33ccd34f8904bb8ae8220b878b62e899f3d9bcd1b0945ab45c7
+  languageName: node
+  linkType: hard
+
+"playwright@npm:^1.49.0":
+  version: 1.49.1
+  resolution: "playwright@npm:1.49.1"
+  dependencies:
+    fsevents: 2.3.2
+    playwright-core: 1.49.1
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  bin:
+    playwright: cli.js
+  checksum: c136d42d625e32614f90e5228a165dc8be48c5bfb52aca9210c6ff04161a409dbe42fe5ae4f05a2653f6a1b836876a04d3b0f24bcbbc053d1509c1d605b7c8d5
+  languageName: node
+  linkType: hard
+
 "plist@npm:^3.0.5":
   version: 3.1.0
   resolution: "plist@npm:3.1.0"
@@ -18796,20 +18904,46 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-native-reanimated@npm:^3.16.6":
+  version: 3.16.6
+  resolution: "react-native-reanimated@npm:3.16.6"
+  dependencies:
+    "@babel/plugin-transform-arrow-functions": ^7.0.0-0
+    "@babel/plugin-transform-class-properties": ^7.0.0-0
+    "@babel/plugin-transform-classes": ^7.0.0-0
+    "@babel/plugin-transform-nullish-coalescing-operator": ^7.0.0-0
+    "@babel/plugin-transform-optional-chaining": ^7.0.0-0
+    "@babel/plugin-transform-shorthand-properties": ^7.0.0-0
+    "@babel/plugin-transform-template-literals": ^7.0.0-0
+    "@babel/plugin-transform-unicode-regex": ^7.0.0-0
+    "@babel/preset-typescript": ^7.16.7
+    convert-source-map: ^2.0.0
+    invariant: ^2.2.4
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+    react: "*"
+    react-native: "*"
+  checksum: 507ed4fbd0d0e31fb04b8d3ed9de71cb52d412dda00ea63afa98815599df67911f93f2ff274a809d0dbc99556181177549079ae9f7cf0f0eba4f8623e69bf12a
+  languageName: node
+  linkType: hard
+
 "react-native-video-player-example@workspace:example":
   version: 0.0.0-use.local
   resolution: "react-native-video-player-example@workspace:example"
   dependencies:
     "@babel/core": ^7.20.0
     "@expo/metro-runtime": ~3.2.3
+    "@shopify/react-native-skia": ^1.5.10
     expo: ~51.0.28
     expo-status-bar: ~1.12.1
     react: 18.2.0
     react-dom: 18.2.0
     react-native: 0.74.5
     react-native-builder-bob: ^0.31.0
+    react-native-reanimated: ^3.16.6
     react-native-video: 6.8.0
     react-native-web: ~0.19.10
+    react-scan: native
   languageName: unknown
   linkType: soft
 
@@ -18935,6 +19069,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-reconciler@npm:0.27.0":
+  version: 0.27.0
+  resolution: "react-reconciler@npm:0.27.0"
+  dependencies:
+    loose-envify: ^1.1.0
+    scheduler: ^0.21.0
+  peerDependencies:
+    react: ^18.0.0
+  checksum: c2ae111f150c2a46970182df12ea8254719fdfec5e26574711b1838fc37863c63671460a351570fd359c088d891e7bb0ff89023c2f7c1582393b57dd517b92c2
+  languageName: node
+  linkType: hard
+
 "react-refresh@npm:^0.14.0, react-refresh@npm:^0.14.2":
   version: 0.14.2
   resolution: "react-refresh@npm:0.14.2"
@@ -18990,6 +19136,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-scan@npm:native":
+  version: 0.0.36-native
+  resolution: "react-scan@npm:0.0.36-native"
+  dependencies:
+    "@clack/core": ^0.3.5
+    "@clack/prompts": ^0.8.2
+    kleur: ^4.1.5
+    mri: ^1.2.0
+    playwright: ^1.49.0
+  peerDependenciesMeta:
+    "@shopify/react-native-skia":
+      optional: true
+    babel-preset-expo:
+      optional: true
+    react-native:
+      optional: true
+    react-native-reanimated:
+      optional: true
+  bin:
+    react-scan: bin/cli.js
+  checksum: 5948db4ae00eb056e1e4a5037c8aea2cb5823c74ba30a3b9fe465dd1e7f444cdd438a2d5dbe4adb3250ad3e0506cb3bc43447e3a4dce127a07cadb1d4a75a894
+  languageName: node
+  linkType: hard
+
 "react-shallow-renderer@npm:^16.15.0":
   version: 16.15.0
   resolution: "react-shallow-renderer@npm:16.15.0"
@@ -19934,6 +20104,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scheduler@npm:^0.21.0":
+  version: 0.21.0
+  resolution: "scheduler@npm:0.21.0"
+  dependencies:
+    loose-envify: ^1.1.0
+  checksum: 4f8285076041ed2c81acdd1faa987f1655fdbd30554bc667c1ea64743fc74fb3a04ca7d27454b3d678735df5a230137a3b84756061b43dc5796e80701b66d124
+  languageName: node
+  linkType: hard
+
 "scheduler@npm:^0.23.0, scheduler@npm:^0.23.2":
   version: 0.23.2
   resolution: "scheduler@npm:0.23.2"