diff --git a/package.json b/package.json
index 2734e91..20adc83 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "react-native-animated-stopwatch",
   "version": "0.1.0",
-  "description": "test",
+  "description": "React Native Stopwatch component that smoothly animates the digits change",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
   "types": "lib/typescript/index.d.ts",
diff --git a/src/AnimatedStopwatch.tsx b/src/AnimatedStopwatch.tsx
new file mode 100644
index 0000000..7701aae
--- /dev/null
+++ b/src/AnimatedStopwatch.tsx
@@ -0,0 +1,223 @@
+import React, {
+  ForwardedRef,
+  forwardRef,
+  useEffect,
+  useImperativeHandle,
+} from 'react';
+import Animated, {
+  EntryAnimationsValues,
+  ExitAnimationsValues,
+  SharedValue,
+  useSharedValue,
+  withDelay,
+  withTiming,
+} from 'react-native-reanimated';
+import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
+import useStopwatch from './useStopwatch';
+
+const DEFAULT_ANIMATION_DELAY = 0;
+const DEFAULT_ANIMATION_DISTANCE = 80;
+const DEFAULT_ANIMATION_DURATION = 200;
+
+export interface StopwatchProps {
+  /**
+   * The enter/exit animation duration in milliseconds of a stopwatch digit.
+   */
+  animationDuration?: number;
+  /**
+   * The enter/exit animation delay in milliseconds of a stopwatch digit.
+   */
+  animationDelay?: number;
+  /**
+   * The enter/exit animation distance in dp of a stopwatch digit.
+   */
+  animationDistance?: number;
+  /**
+   * The style of the stopwatch View container.
+   */
+  containerStyle?: StyleProp<ViewStyle>;
+  /**
+   * The number of zeros for the minutes.
+   */
+  leadingZeros?: 1 | 2;
+  /**
+   * Whether the new digit should enter from the top or the bottom.
+   */
+  enterAnimationType?: 'slide-in-up' | 'slide-in-down';
+  /**
+   * A snapshot of the stopwatch digits and the current ms Elapsed
+   */
+  onPaused?: (elapsedInMs: number) => void;
+  /**
+   * The style of the stopwatch Text.
+   */
+  textStyle?: StyleProp<TextStyle>;
+  /**
+   * If 0, the stopwatch will only display seconds and minutes.
+   * If 1, the stopwatch will display seconds, minutes and hundredth of ms.
+   */
+  trailingZeros?: 0 | 1 | 2;
+}
+
+export interface StopWatchMethods {
+  /**
+   * Pauses the stopwatch.
+   */
+  pause: () => void;
+  /**
+   * Starts the stopwatch. Has no effect if the stopwatch is already running.
+   */
+  start: () => void;
+  /**
+   * Resets the stopwatch.
+   */
+  reset: () => void;
+}
+
+function Stopwatch(
+  {
+    animationDelay = DEFAULT_ANIMATION_DELAY,
+    animationDistance = DEFAULT_ANIMATION_DISTANCE,
+    animationDuration = DEFAULT_ANIMATION_DURATION,
+    containerStyle,
+    enterAnimationType = 'slide-in-up',
+    leadingZeros = 1,
+    onPaused,
+    textStyle,
+    trailingZeros = 1,
+  }: StopwatchProps,
+  ref: ForwardedRef<StopWatchMethods>
+) {
+  const { tensOfMs, lastDigit, tens, minutes, start, reset, pause } =
+    useStopwatch(onPaused);
+
+  useImperativeHandle(ref, () => ({
+    pause,
+    start,
+    reset,
+  }));
+
+  const oldLastDigit = useSharedValue<number>(-1);
+  const oldTens = useSharedValue<number>(-1);
+  const oldMinutes = useSharedValue<number>(-1);
+
+  const newLastDigit = useSharedValue<number>(lastDigit);
+  const newTens = useSharedValue<number>(tens);
+  const newMinutes = useSharedValue<number>(minutes);
+
+  useEffect(() => {
+    newLastDigit.value = lastDigit;
+    newTens.value = tens;
+    newMinutes.value = minutes;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [lastDigit, tens, minutes]);
+
+  const createEntering =
+    (oldValue: SharedValue<number>, numericValue: number) =>
+    (values: EntryAnimationsValues) => {
+      'worklet';
+      if (oldValue.value === -1) {
+        // skip entering animation on first render
+        oldValue.value = numericValue;
+        return { initialValues: {}, animations: {} };
+      }
+      oldValue.value = numericValue;
+      const animations = {
+        originY: withDelay(
+          animationDelay,
+          withTiming(values.targetOriginY, {
+            duration: animationDuration,
+          })
+        ),
+      };
+      const enterDirection = enterAnimationType === 'slide-in-up' ? -1 : 1;
+      const initialValues = {
+        originY: values.targetOriginY + animationDistance * enterDirection,
+      };
+      return {
+        initialValues,
+        animations,
+      };
+    };
+
+  const exiting = (values: ExitAnimationsValues) => {
+    'worklet';
+    const exitDirection = enterAnimationType === 'slide-in-up' ? 1 : -1;
+    const animations = {
+      originY: withDelay(
+        animationDelay,
+        withTiming(values.currentOriginY + animationDistance * exitDirection, {
+          duration: animationDuration,
+        })
+      ),
+    };
+    const initialValues = {
+      originY: values.currentOriginY,
+    };
+    return {
+      initialValues,
+      animations,
+    };
+  };
+
+  return (
+    <View style={[styles.container, containerStyle]}>
+      {leadingZeros === 2 && <Text style={textStyle}>0</Text>}
+      <Animated.Text
+        key={`${minutes}-minutes`}
+        style={textStyle}
+        entering={createEntering(oldMinutes, minutes)}
+        exiting={exiting}
+      >
+        {minutes}
+      </Animated.Text>
+      <Text style={textStyle}>:</Text>
+      <Animated.Text
+        key={`${tens}-tens`}
+        style={textStyle}
+        entering={createEntering(oldTens, tens)}
+        exiting={exiting}
+      >
+        {tens}
+      </Animated.Text>
+      <Animated.Text
+        key={`${lastDigit}-count`}
+        style={textStyle}
+        entering={createEntering(oldLastDigit, lastDigit)}
+        exiting={exiting}
+      >
+        {lastDigit}
+      </Animated.Text>
+      {trailingZeros > 0 && (
+        <>
+          <Text style={textStyle}>,</Text>
+          <Text style={textStyle}>
+            {tensOfMs >= 10 ? String(tensOfMs).charAt(0) : 0}
+          </Text>
+          {trailingZeros === 2 && (
+            <Text style={textStyle}>
+              {tensOfMs >= 10
+                ? String(tensOfMs).charAt(1)
+                : String(tensOfMs).charAt(0)}
+            </Text>
+          )}
+        </>
+      )}
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    overflow: 'hidden',
+  },
+});
+
+const AnimatedStopwatch = forwardRef<StopWatchMethods, StopwatchProps>(
+  Stopwatch
+);
+
+export default AnimatedStopwatch;
diff --git a/src/index.tsx b/src/index.tsx
index 7701aae..ef21d01 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,223 +1,8 @@
-import React, {
-  ForwardedRef,
-  forwardRef,
-  useEffect,
-  useImperativeHandle,
-} from 'react';
-import Animated, {
-  EntryAnimationsValues,
-  ExitAnimationsValues,
-  SharedValue,
-  useSharedValue,
-  withDelay,
-  withTiming,
-} from 'react-native-reanimated';
-import type { StyleProp, TextStyle, ViewStyle } from 'react-native';
-import { StyleSheet, Text, View } from 'react-native';
-import useStopwatch from './useStopwatch';
-
-const DEFAULT_ANIMATION_DELAY = 0;
-const DEFAULT_ANIMATION_DISTANCE = 80;
-const DEFAULT_ANIMATION_DURATION = 200;
-
-export interface StopwatchProps {
-  /**
-   * The enter/exit animation duration in milliseconds of a stopwatch digit.
-   */
-  animationDuration?: number;
-  /**
-   * The enter/exit animation delay in milliseconds of a stopwatch digit.
-   */
-  animationDelay?: number;
-  /**
-   * The enter/exit animation distance in dp of a stopwatch digit.
-   */
-  animationDistance?: number;
-  /**
-   * The style of the stopwatch View container.
-   */
-  containerStyle?: StyleProp<ViewStyle>;
-  /**
-   * The number of zeros for the minutes.
-   */
-  leadingZeros?: 1 | 2;
-  /**
-   * Whether the new digit should enter from the top or the bottom.
-   */
-  enterAnimationType?: 'slide-in-up' | 'slide-in-down';
-  /**
-   * A snapshot of the stopwatch digits and the current ms Elapsed
-   */
-  onPaused?: (elapsedInMs: number) => void;
-  /**
-   * The style of the stopwatch Text.
-   */
-  textStyle?: StyleProp<TextStyle>;
-  /**
-   * If 0, the stopwatch will only display seconds and minutes.
-   * If 1, the stopwatch will display seconds, minutes and hundredth of ms.
-   */
-  trailingZeros?: 0 | 1 | 2;
-}
-
-export interface StopWatchMethods {
-  /**
-   * Pauses the stopwatch.
-   */
-  pause: () => void;
-  /**
-   * Starts the stopwatch. Has no effect if the stopwatch is already running.
-   */
-  start: () => void;
-  /**
-   * Resets the stopwatch.
-   */
-  reset: () => void;
-}
-
-function Stopwatch(
-  {
-    animationDelay = DEFAULT_ANIMATION_DELAY,
-    animationDistance = DEFAULT_ANIMATION_DISTANCE,
-    animationDuration = DEFAULT_ANIMATION_DURATION,
-    containerStyle,
-    enterAnimationType = 'slide-in-up',
-    leadingZeros = 1,
-    onPaused,
-    textStyle,
-    trailingZeros = 1,
-  }: StopwatchProps,
-  ref: ForwardedRef<StopWatchMethods>
-) {
-  const { tensOfMs, lastDigit, tens, minutes, start, reset, pause } =
-    useStopwatch(onPaused);
-
-  useImperativeHandle(ref, () => ({
-    pause,
-    start,
-    reset,
-  }));
-
-  const oldLastDigit = useSharedValue<number>(-1);
-  const oldTens = useSharedValue<number>(-1);
-  const oldMinutes = useSharedValue<number>(-1);
-
-  const newLastDigit = useSharedValue<number>(lastDigit);
-  const newTens = useSharedValue<number>(tens);
-  const newMinutes = useSharedValue<number>(minutes);
-
-  useEffect(() => {
-    newLastDigit.value = lastDigit;
-    newTens.value = tens;
-    newMinutes.value = minutes;
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [lastDigit, tens, minutes]);
-
-  const createEntering =
-    (oldValue: SharedValue<number>, numericValue: number) =>
-    (values: EntryAnimationsValues) => {
-      'worklet';
-      if (oldValue.value === -1) {
-        // skip entering animation on first render
-        oldValue.value = numericValue;
-        return { initialValues: {}, animations: {} };
-      }
-      oldValue.value = numericValue;
-      const animations = {
-        originY: withDelay(
-          animationDelay,
-          withTiming(values.targetOriginY, {
-            duration: animationDuration,
-          })
-        ),
-      };
-      const enterDirection = enterAnimationType === 'slide-in-up' ? -1 : 1;
-      const initialValues = {
-        originY: values.targetOriginY + animationDistance * enterDirection,
-      };
-      return {
-        initialValues,
-        animations,
-      };
-    };
-
-  const exiting = (values: ExitAnimationsValues) => {
-    'worklet';
-    const exitDirection = enterAnimationType === 'slide-in-up' ? 1 : -1;
-    const animations = {
-      originY: withDelay(
-        animationDelay,
-        withTiming(values.currentOriginY + animationDistance * exitDirection, {
-          duration: animationDuration,
-        })
-      ),
-    };
-    const initialValues = {
-      originY: values.currentOriginY,
-    };
-    return {
-      initialValues,
-      animations,
-    };
-  };
-
-  return (
-    <View style={[styles.container, containerStyle]}>
-      {leadingZeros === 2 && <Text style={textStyle}>0</Text>}
-      <Animated.Text
-        key={`${minutes}-minutes`}
-        style={textStyle}
-        entering={createEntering(oldMinutes, minutes)}
-        exiting={exiting}
-      >
-        {minutes}
-      </Animated.Text>
-      <Text style={textStyle}>:</Text>
-      <Animated.Text
-        key={`${tens}-tens`}
-        style={textStyle}
-        entering={createEntering(oldTens, tens)}
-        exiting={exiting}
-      >
-        {tens}
-      </Animated.Text>
-      <Animated.Text
-        key={`${lastDigit}-count`}
-        style={textStyle}
-        entering={createEntering(oldLastDigit, lastDigit)}
-        exiting={exiting}
-      >
-        {lastDigit}
-      </Animated.Text>
-      {trailingZeros > 0 && (
-        <>
-          <Text style={textStyle}>,</Text>
-          <Text style={textStyle}>
-            {tensOfMs >= 10 ? String(tensOfMs).charAt(0) : 0}
-          </Text>
-          {trailingZeros === 2 && (
-            <Text style={textStyle}>
-              {tensOfMs >= 10
-                ? String(tensOfMs).charAt(1)
-                : String(tensOfMs).charAt(0)}
-            </Text>
-          )}
-        </>
-      )}
-    </View>
-  );
-}
-
-const styles = StyleSheet.create({
-  container: {
-    flexDirection: 'row',
-    alignItems: 'center',
-    overflow: 'hidden',
-  },
-});
-
-const AnimatedStopwatch = forwardRef<StopWatchMethods, StopwatchProps>(
-  Stopwatch
-);
+import AnimatedStopwatch, {
+  StopwatchProps,
+  StopWatchMethods,
+} from './AnimatedStopwatch';
 
 export default AnimatedStopwatch;
+
+export type { StopwatchProps, StopWatchMethods };
diff --git a/src/useStopwatch.ts b/src/useStopwatch.ts
index 0eb696c..77522e5 100644
--- a/src/useStopwatch.ts
+++ b/src/useStopwatch.ts
@@ -1,5 +1,5 @@
 import { useRef, useState } from 'react';
-import type { StopwatchProps } from './index';
+import type { StopwatchProps } from './AnimatedStopwatch';
 
 /**
  * A custom hooks that handles the state for the stopwatch