rn-marquee-text 2.0.2 → 2.0.4

package/README.md

@@ -1,233 +1,175 @@
-# React Native Marquee Text
+Here's a more professional and well-structured version of your README file with improved formatting, organization, and a "Copy All" button:
 
+```markdown
+# React Native Marquee Text 🚀
 
-A highly customizable package for smooth, auto-scrolling marquee text components in React Native apps. Works seamlessly in both React Native CLI and Expo environments.
+[![npm version](https://img.shields.io/npm/v/rn-marquee-text.svg?style=flat-square)](https://www.npmjs.com/package/rn-marquee-text)
+[![license](https://img.shields.io/npm/l/rn-marquee-text.svg?style=flat-square)](https://github.com/yourusername/rn-marquee-text/blob/main/LICENSE)
+[![downloads](https://img.shields.io/npm/dm/rn-marquee-text.svg?style=flat-square)](https://www.npmjs.com/package/rn-marquee-text)
+[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
 
-![npm version](https://img.shields.io/npm/v/rn-marquee-text.svg)
-![license](https://img.shields.io/npm/l/rn-marquee-text.svg)
-![downloads](https://img.shields.io/npm/dm/rn-marquee-text.svg)
+A high-performance, feature-rich marquee component for React Native with smooth animations and flexible configuration.
 
-## 🚀 Features
+![Horizontal and Vertical Marquee Demo](demo-combined.gif)
 
-- ⚡ Smooth scrolling powered by React Native Reanimated
-- 🧩 Fully compatible with React Native & Expo
-- 🔁 Supports loop and bounce animation modes
-- 🎛️ Customizable speed, delay, and styles
-- 📱 No dependencies except Reanimated
-- 📏 Auto-detects overflow for auto-scrolling
-- ↔️ Supports horizontal and vertical scrolling
-- 📰 Built-in MarqueeText for ticker-style effects
+## Table of Contents
+- [Features](#features-)
+- [Installation](#installation-)
+- [Usage](#usage-)
+- [API Reference](#api-reference-)
+- [Examples](#examples-)
+- [Troubleshooting](#troubleshooting-)
+- [Contributing](#contributing-)
+- [License](#license-)
 
-## 📦 Installation
+## Features ✨
 
-```bash
-# React Native CLI
-npm install rn-marquee-text react-native-reanimated
-
-# OR using yarn
-yarn add rn-marquee-text react-native-reanimated
-```
+- **Multi-directional scrolling**: Horizontal and vertical marquee effects
+- **Animation modes**: Loop and bounce animations
+- **Performance optimized**: Built with React Native Reanimated 2
+- **Customizable**: Control speed, delay, spacing, and more
+- **Interactive**: Gesture support for pausing/resuming
+- **Flexible content**: Supports both text and custom components
+- **TypeScript ready**: Complete type definitions included
 
-### Expo Users
+## Installation 📦
 
 ```bash
-expo install react-native-reanimated
-```
-
-Then update your `babel.config.js`:
+# Using npm
+npm install rn-marquee-text react-native-reanimated react-native-gesture-handler
 
-```js
-module.exports = {
-  presets: ['babel-preset-expo'],
-  plugins: ['react-native-reanimated/plugin'],
-};
+# Using yarn
+yarn add rn-marquee-text react-native-reanimated react-native-gesture-handler
 ```
 
-## 🧱 Components
+### Peer Dependencies
+Ensure you've properly installed and configured:
+- [React Native Reanimated](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation)
+- [React Native Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/)
 
-### 1️⃣ AutoScroll — Scroll any overflowed content
+## Usage 🚀
 
-#### Basic Usage
-
-```tsx
-import AutoScroll, { AnimationMode } from 'rn-marquee-text';
-
-const Example = () => (
-  <AutoScroll 
-    style={{ height: 100, width: '100%' }}
-    mode={AnimationMode.LOOP}
-    speed={40}
-  >
-    This is a long text that will scroll if it overflows its container.
-  </AutoScroll>
-);
-```
-
-#### Props
+### Basic Implementation
+```jsx
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import MarqueeText from 'rn-marquee-text';
 
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| children | ReactNode | (required) | Content to scroll |
-| mode | 'loop' \| 'bounce' | 'loop' | Animation type |
-| speed | number | 30 | Speed in px/sec |
-| delay | number | 1500 | Delay before animation starts |
-| endPauseDuration | number | 1000 | Pause time at edges (for bounce mode) |
-| style | ViewStyle | {} | Container styling |
-| textStyle | TextStyle | {} | Text styling (when children is string) |
-| enabled | boolean | true | Enable or disable animation |
-| direction | 'horizontal' \| 'vertical' | 'vertical' | Scroll direction |
-
-### 2️⃣ MarqueeText — For ticker-style text
-
-#### Basic Usage
-
-```tsx
-import { MarqueeText } from 'rn-marquee-text';
-import { View, Text } from 'react-native';
-
-const Example = () => (
-  <View style={{ width: '100%', borderRadius: 8, overflow: 'hidden' }}>
+const App = () => (
+  <View style={styles.container}>
     <MarqueeText
-      speed={100}
-      backgroundColor="#1a365d"
-      textColor="#f0f4f8"
-      fontSize={14}
-      direction="horizontal"
+      style={styles.marquee}
+      speed={40}
+      textStyle={styles.text}
     >
-      <Text>
-        Breaking News: This is a marquee text scrolling horizontally!
-      </Text>
+      Your scrolling text goes here
     </MarqueeText>
   </View>
 );
-```
-
-#### Props
-
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| text | string | (required) | Text to display (alternative to children) |
-| speed | number | 80 | Speed in px/sec |
-| backgroundColor | string | #000 | Marquee background color |
-| textColor | string | #fff | Text color |
-| fontSize | number | 16 | Font size |
-| paddingVertical | number | 8 | Vertical padding |
-| paddingHorizontal | number | 12 | Horizontal padding |
-| delay | number | 1000 | Delay before animation starts |
-| bounceMode | boolean | false | Whether to bounce at edges |
-| endPauseDuration | number | 2000 | Pause at each end (only in bounce mode) |
-
-## 💡 Advanced Examples
-
-### 🔁 AutoScroll with Custom Content
-
-```tsx
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import AutoScroll from 'rn-marquee-text';
-
-const CardScroller = () => (
-  <AutoScroll style={styles.scrollContainer} direction="horizontal">
-    <View style={styles.contentContainer}>
-      {[1, 2, 3, 4, 5].map((item) => (
-        <View key={item} style={styles.card}>
-          <Text style={styles.cardText}>Card {item}</Text>
-        </View>
-      ))}
-    </View>
-  </AutoScroll>
-);
 
 const styles = StyleSheet.create({
-  scrollContainer: {
-    height: 120,
-    width: '100%',
-  },
-  contentContainer: {
-    flexDirection: 'row',
-    padding: 10,
-  },
-  card: {
-    width: 100,
-    height: 100,
-    backgroundColor: '#f0f0f0',
-    borderRadius: 8,
-    marginRight: 10,
-    justifyContent: 'center',
-    alignItems: 'center',
-  },
-  cardText: {
-    fontSize: 16,
-    fontWeight: 'bold',
-  },
+  container: { flex: 1, justifyContent: 'center', padding: 20 },
+  marquee: { height: 50, backgroundColor: '#f5f5f5', borderRadius: 8 },
+  text: { fontSize: 16, color: '#333' }
 });
-```
-
-### 📰 News Ticker with MarqueeText
-
-```tsx
-import React from 'react';
-import { View, Text, StyleSheet } from 'react-native';
-import { MarqueeText } from 'rn-marquee-text';
-
-const NewsTicker = () => (
-  <View style={styles.tickerContainer}>
-    <MarqueeText speed={70} bounceMode={false}>
-      <Text style={styles.cardText}>
-        BREAKING NEWS: Latest updates on global events. Markets reach all-time high.
-      </Text>
-    </MarqueeText>
-  </View>
-);
 
-const styles = StyleSheet.create({
-  tickerContainer: {
-    width: '100%',
-    borderRadius: 4,
-    overflow: 'hidden',
-    marginVertical: 10,
-  },
-  cardText: {
-    fontSize: 14,
-    paddingHorizontal: 10,
-  },
-});
+export default App;
 ```
 
-## 🛠️ Tips for Optimal Performance
+## API Reference 📚
 
-- Match speed with content length for readability
-- Use delays to give users time to read before scrolling
-- Bounce mode is more attention-grabbing (e.g., for alerts)
-- Limit concurrent scroll components to avoid frame drops
-- Test on low-end devices for smooth performance
+### Props
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `children` | React.ReactNode | Required | Content to scroll (string or components) |
+| `mode` | 'loop' \| 'bounce' | 'loop' | Animation behavior |
+| `speed` | number | 30 | Pixels per second |
+| `direction` | 'horizontal' \| 'vertical' | 'horizontal' | Scroll direction |
+| `enabled` | boolean | true | Animation active state |
+| `delay` | number | 1500 | Initial delay (ms) |
+| `endPauseDuration` | number | 1000 | Pause at end (bounce mode) |
+
+### Methods (via ref)
+```jsx
+const marqueeRef = useRef();
+
+// Start animation
+marqueeRef.current?.start();
+
+// Stop animation
+marqueeRef.current?.stop();
+
+// Check if active
+const isActive = marqueeRef.current?.isActive;
+```
 
-## 🧩 Troubleshooting
+## Examples 🎨
+
+### Vertical Bounce Marquee
+```jsx
+<MarqueeText
+  direction="vertical"
+  mode="bounce"
+  speed={20}
+  endPauseDuration={2000}
+  style={styles.verticalMarquee}
+>
+  Line 1{'\n'}Line 2{'\n'}Line 3
+</MarqueeText>
+```
 
-### ❌ Text Not Scrolling?
+### Controlled Marquee with Buttons
+```jsx
+const [paused, setPaused] = useState(false);
 
-- Ensure content overflows the container
-- Confirm `enabled` is set to `true`
-- Use `overflow: 'hidden'` on container
+<>
+  <MarqueeText
+    ref={marqueeRef}
+    enabled={!paused}
+    style={styles.marquee}
+  >
+    Controllable marquee text
+  </MarqueeText>
+  
+  <Button 
+    title={paused ? "Resume" : "Pause"} 
+    onPress={() => setPaused(!paused)} 
+  />
+</>
+```
 
-### 🐢 Choppy Animations?
+## Troubleshooting 🛠️
 
-- Leverage `useNativeDriver` if supported
-- Minimize simultaneous animations
-- Simplify nested component structure
+**Animation not working?**
+- Verify Reanimated installation
+- Check babel.config.js for Reanimated plugin
 
-## 📄 License
+**Text not visible?**
+- Ensure container has proper dimensions
+- Verify text color contrasts with background
 
-MIT
+**Performance issues?**
+- Reduce animation speed
+- Simplify marquee content
+- Use `frameRate` prop to limit FPS
 
-## 🤝 Contributing
+## Contributing 🤝
+Contributions are welcome! Please:
+1. Open an issue to discuss changes
+2. Ensure tests are updated
+3. Maintain consistent code style
 
-Pull requests welcome!
+## License 📄
+MIT © [Your Name](https://github.com/yourusername)
 
-Steps:
+<button onclick="copyToClipboard()">Copy All README Content</button>
 
-1. Fork the repo
-2. Create a branch: `git checkout -b feature/amazing-feature`
-3. Commit your changes: `git commit -m 'Add some amazing feature'`
-4. Push the branch: `git push origin feature/amazing-feature`
-5. Open a Pull Request
+<script>
+function copyToClipboard() {
+  const content = document.querySelector('article').innerText;
+  navigator.clipboard.writeText(content)
+    .then(() => alert('README copied to clipboard!'))
+    .catch(err => console.error('Failed to copy:', err));
+}
+</script>
+```

package/dist/MarqueeText.d.ts

@@ -1,14 +1,119 @@
-import React from 'react';
-declare const MarqueeText: ({ text, speed, backgroundColor, textColor, fontSize, paddingVertical, paddingHorizontal, delay, bounceMode, endPauseDuration, }: {
-    text: string;
+import * as React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
+/**
+ * Animation modes for the marquee text
+ */
+declare enum AnimationMode {
+    LOOP = "loop",
+    BOUNCE = "bounce"
+}
+/**
+ * Direction of the marquee animation
+ */
+type MarqueeDirection = 'horizontal' | 'vertical';
+/**
+ * Props for the MarqueeText component
+ */
+interface MarqueeTextProps {
+    /**
+     * Content to be scrolled (string or React nodes)
+     */
+    children: React.ReactNode;
+    /**
+     * The animation mode: 'loop' for continuous scrolling or 'bounce' for back-and-forth
+     * @default AnimationMode.LOOP
+     */
+    mode?: AnimationMode;
+    /**
+     * Speed of the scrolling animation in pixels per second
+     * @default 30
+     */
     speed?: number;
-    backgroundColor?: string;
-    textColor?: string;
-    fontSize?: number;
-    paddingVertical?: number;
-    paddingHorizontal?: number;
+    /**
+     * Delay in milliseconds before starting the animation
+     * @default 1500
+     */
     delay?: number;
-    bounceMode?: boolean;
+    /**
+     * Duration in milliseconds to pause at the end of the content (only for bounce mode)
+     * @default 1000
+     */
     endPauseDuration?: number;
-}) => React.JSX.Element;
-export default MarqueeText;
+    /**
+     * Container style
+     */
+    style?: ViewStyle;
+    /**
+     * Text style (when children is a string)
+     */
+    textStyle?: TextStyle;
+    /**
+     * Whether to enable the animation
+     * @default true
+     */
+    enabled?: boolean;
+    /**
+     * Direction of scrolling ('horizontal' or 'vertical')
+     * @default 'horizontal'
+     */
+    direction?: MarqueeDirection;
+    /**
+     * Spacing between cloned elements
+     * @default 20
+     */
+    spacing?: number;
+    /**
+     * Allow user interaction with gesture handling
+     * @default true
+     */
+    withGesture?: boolean;
+    /**
+     * Custom frame rate for animation
+     */
+    frameRate?: number;
+    /**
+     * Reverse the animation direction
+     * @default false
+     */
+    reverse?: boolean;
+    /**
+     * Background color for the container
+     * @default 'transparent'
+     */
+    backgroundColor?: string;
+    /**
+     * Callback when animation starts
+     */
+    onAnimationStart?: () => void;
+    /**
+     * Callback when animation stops
+     */
+    onAnimationStop?: () => void;
+}
+/**
+ * Reference handle for the MarqueeText component
+ */
+export interface MarqueeTextRef {
+    /**
+     * Start the marquee animation
+     */
+    start: () => void;
+    /**
+     * Stop the marquee animation
+     */
+    stop: () => void;
+    /**
+     * Whether the animation is currently active
+     */
+    isActive: boolean;
+}
+/**
+ * MarqueeText component for scrolling text or content
+ *
+ * This component creates a scrolling effect for text or other content.
+ * It supports both horizontal and vertical scrolling, different animation
+ * modes, and user interaction via gestures.
+ */
+declare const MarqueeText: React.ForwardRefExoticComponent<MarqueeTextProps & React.RefAttributes<MarqueeTextRef>>;
+export { MarqueeText, AnimationMode };
+export type { MarqueeDirection, MarqueeTextProps };

package/dist/MarqueeText.js

@@ -1,64 +1,208 @@
-// MarqueeText.js - Complete rewrite with guaranteed scrolling
-import React, { useEffect } from 'react';
-import { View } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, withDelay, Easing, withSequence, } from 'react-native-reanimated';
-var MarqueeText = function (_a) {
-    var text = _a.text, _b = _a.speed, speed = _b === void 0 ? 60 : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#000' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.fontSize, fontSize = _e === void 0 ? 16 : _e, _f = _a.paddingVertical, paddingVertical = _f === void 0 ? 8 : _f, _g = _a.paddingHorizontal, paddingHorizontal = _g === void 0 ? 12 : _g, _h = _a.delay, delay = _h === void 0 ? 1000 : _h, _j = _a.bounceMode, bounceMode = _j === void 0 ? false : _j, _k = _a.endPauseDuration, endPauseDuration = _k === void 0 ? 2000 : _k;
-    // Force a larger content width to ensure scrolling always happens
-    // In real usage, we would measure dynamically, but this ensures it works
-    var contentWidth = text.length * (fontSize * 0.6);
-    var scrollX = useSharedValue(0);
-    useEffect(function () {
-        // Give layout time to complete
-        var timeoutId = setTimeout(function () {
-            if (bounceMode) {
-                // Bounce animation (back and forth with pauses)
-                scrollX.value = withDelay(delay, withRepeat(withSequence(withTiming(-contentWidth, {
-                    duration: contentWidth * (1000 / speed),
-                    easing: Easing.linear
-                }), withTiming(-contentWidth, {
-                    duration: endPauseDuration,
-                    easing: Easing.linear
-                }), withTiming(0, {
-                    duration: contentWidth * (1000 / speed),
-                    easing: Easing.linear
-                }), withTiming(0, {
-                    duration: endPauseDuration,
-                    easing: Easing.linear
-                })), -1, // Infinite repeats
-                false));
-            }
-            else {
-                // Standard loop animation
-                scrollX.value = withDelay(delay, withRepeat(withTiming(-contentWidth, {
-                    duration: contentWidth * (1000 / speed),
-                    easing: Easing.linear
-                }), -1, // Infinite repeats
-                false));
-            }
-        }, 500);
-        return function () { return clearTimeout(timeoutId); };
-    }, [speed, delay, contentWidth, bounceMode, endPauseDuration]);
-    var animatedStyle = useAnimatedStyle(function () {
-        return {
-            transform: [{ translateX: scrollX.value }],
-        };
+import * as React from 'react';
+import { StyleSheet, View, Text } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue, useFrameCallback, withDecay, } from 'react-native-reanimated';
+import { useFocusEffect } from '@react-navigation/native';
+/**
+ * Animation modes for the marquee text
+ */
+var AnimationMode;
+(function (AnimationMode) {
+    AnimationMode["LOOP"] = "loop";
+    AnimationMode["BOUNCE"] = "bounce";
+})(AnimationMode || (AnimationMode = {}));
+/**
+ * Component to render a child item in the marquee
+ */
+var AnimatedChild = React.memo(function (_a) {
+    var index = _a.index, children = _a.children, anim = _a.anim, contentMeasurement = _a.contentMeasurement, spacing = _a.spacing, direction = _a.direction;
+    var style = useAnimatedStyle(function () {
+        var _a;
+        var isVertical = direction === 'vertical';
+        var dimension = isVertical ? contentMeasurement.value.height : contentMeasurement.value.width;
+        if (dimension <= 0)
+            return {};
+        var position = (index - 1) * (dimension + spacing);
+        var translation = -(anim.value % (dimension + spacing));
+        return _a = {
+                position: 'absolute'
+            },
+            _a[isVertical ? 'top' : 'left'] = position,
+            _a.transform = isVertical
+                ? [{ translateY: translation }]
+                : [{ translateX: translation }],
+            _a;
+    }, [index, spacing, contentMeasurement, direction]);
+    return <Animated.View style={style}>{children}</Animated.View>;
+});
+/**
+ * MarqueeText component for scrolling text or content
+ *
+ * This component creates a scrolling effect for text or other content.
+ * It supports both horizontal and vertical scrolling, different animation
+ * modes, and user interaction via gestures.
+ */
+var MarqueeText = React.forwardRef(function (_a, ref) {
+    var children = _a.children, _b = _a.mode, mode = _b === void 0 ? AnimationMode.LOOP : _b, _c = _a.speed, speed = _c === void 0 ? 30 : _c, _d = _a.delay, delay = _d === void 0 ? 1500 : _d, _e = _a.endPauseDuration, endPauseDuration = _e === void 0 ? 1000 : _e, style = _a.style, textStyle = _a.textStyle, _f = _a.enabled, enabled = _f === void 0 ? true : _f, _g = _a.direction, direction = _g === void 0 ? 'horizontal' : _g, _h = _a.spacing, spacing = _h === void 0 ? 20 : _h, _j = _a.withGesture, withGesture = _j === void 0 ? true : _j, frameRate = _a.frameRate, _k = _a.reverse, reverse = _k === void 0 ? false : _k, _l = _a.backgroundColor, backgroundColor = _l === void 0 ? 'transparent' : _l, onAnimationStart = _a.onAnimationStart, onAnimationStop = _a.onAnimationStop;
+    var isVertical = direction === 'vertical';
+    var isBounceMode = mode === AnimationMode.BOUNCE;
+    var containerMeasurement = useSharedValue({
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0,
+    });
+    var contentMeasurement = useSharedValue({
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0,
     });
-    return (<View style={{
-            backgroundColor: backgroundColor,
-            paddingVertical: paddingVertical,
-            paddingHorizontal: paddingHorizontal,
-            overflow: 'hidden',
+    var _m = React.useState(0), cloneTimes = _m[0], setCloneTimes = _m[1];
+    var anim = useSharedValue(0);
+    var isMounted = React.useRef(true);
+    var isActive = useSharedValue(false);
+    var frameRateMs = frameRate ? 1000 / frameRate : 1000 / 60; // Default to 60fps
+    var pixelsPerMs = speed / 1000;
+    // Animation frame callback
+    var frameCallback = useFrameCallback(function (frameInfo) {
+        if (!enabled || frameInfo.timeSincePreviousFrame === null)
+            return;
+        var deltaTime = frameRateMs
+            ? frameInfo.timeSincePreviousFrame / frameRateMs
+            : frameInfo.timeSincePreviousFrame;
+        anim.value += (reverse ? -1 : 1) * pixelsPerMs * deltaTime;
+    }, false);
+    // Calculate how many clones we need to fill the screen
+    useAnimatedReaction(function () {
+        var contentDim = isVertical ? contentMeasurement.value.height : contentMeasurement.value.width;
+        var containerDim = isVertical ? containerMeasurement.value.height : containerMeasurement.value.width;
+        if (contentDim <= 0 || containerDim <= 0)
+            return 0;
+        // Need enough clones to fill the container plus buffer for continuous scrolling
+        return Math.ceil(containerDim / contentDim) + 2;
+    }, function (times) {
+        if (times > 0 && isMounted.current) {
+            runOnJS(setCloneTimes)(times);
+        }
+    }, [direction]);
+    // Control functions
+    var start = React.useCallback(function () {
+        if (!enabled)
+            return;
+        frameCallback.setActive(true);
+        isActive.value = true;
+        onAnimationStart === null || onAnimationStart === void 0 ? void 0 : onAnimationStart();
+    }, [frameCallback, enabled, onAnimationStart]);
+    var stop = React.useCallback(function () {
+        frameCallback.setActive(false);
+        isActive.value = false;
+        onAnimationStop === null || onAnimationStop === void 0 ? void 0 : onAnimationStop();
+    }, [frameCallback, onAnimationStop]);
+    // Expose controls via ref
+    React.useImperativeHandle(ref, function () { return ({
+        start: start,
+        stop: stop,
+        get isActive() { return isActive.value; }
+    }); });
+    // Setup gesture handling
+    var pan = React.useMemo(function () {
+        return Gesture.Pan()
+            .enabled(withGesture && enabled)
+            .onBegin(function () {
+            // Stop auto-animation when user interacts
+            runOnJS(stop)();
+        })
+            .onChange(function (e) {
+            // Move according to user's gesture
+            anim.value += -(isVertical ? e.changeY : e.changeX);
+        })
+            .onFinalize(function (e) {
+            // Apply momentum scrolling when user releases
+            anim.value = withDecay({
+                velocity: -(isVertical ? e.velocityY : e.velocityX),
+            }, function (finished) {
+                // Restart auto-animation when decay finishes
+                if (finished)
+                    runOnJS(start)();
+            });
+        });
+    }, [withGesture, isVertical, anim, start, stop, enabled]);
+    // Handle focus/unmount
+    useFocusEffect(React.useCallback(function () {
+        // Start animation when screen comes into focus
+        if (enabled) {
+            start();
+        }
+        return function () {
+            // Stop animation when screen loses focus
+            stop();
+            anim.value = 0;
+        };
+    }, [start, stop, anim, enabled]));
+    // Cleanup on unmount
+    React.useEffect(function () {
+        return function () {
+            isMounted.current = false;
+        };
+    }, []);
+    // Start/stop based on enabled prop changes
+    React.useEffect(function () {
+        if (enabled) {
+            start();
+        }
+        else {
+            stop();
+        }
+    }, [enabled, start, stop]);
+    // Render the content
+    var renderContent = function () {
+        if (typeof children === 'string') {
+            return <Text style={textStyle}>{children}</Text>;
+        }
+        return children;
+    };
+    return (<Animated.View style={[
+            styles.container,
+            { backgroundColor: backgroundColor },
+            style
+        ]} onLayout={function (ev) {
+            containerMeasurement.value = ev.nativeEvent.layout;
+        }} pointerEvents="box-none">
+        <GestureDetector gesture={pan}>
+          <Animated.View style={isVertical ? styles.column : styles.row} pointerEvents="box-none">
+            {/* Hidden element for measuring original content size */}
+            <View style={styles.hidden} onLayout={function (ev) {
+            contentMeasurement.value = ev.nativeEvent.layout;
         }}>
-      <Animated.Text style={[
-            {
-                color: textColor,
-                fontSize: fontSize,
-            },
-            animatedStyle,
-        ]} numberOfLines={1}>
-        {text}
-      </Animated.Text>
-    </View>);
-};
-export default MarqueeText;
+              {renderContent()}
+            </View>
+            
+            {/* Visible cloned elements */}
+            {cloneTimes > 0 &&
+            Array.from({ length: cloneTimes }).map(function (_, index) { return (<AnimatedChild key={"clone-".concat(index)} index={index} anim={anim} contentMeasurement={contentMeasurement} spacing={spacing} direction={direction}>
+                  {renderContent()}
+                </AnimatedChild>); })}
+          </Animated.View>
+        </GestureDetector>
+      </Animated.View>);
+});
+var styles = StyleSheet.create({
+    container: {
+        overflow: 'hidden',
+    },
+    hidden: {
+        opacity: 0,
+        position: 'absolute',
+        zIndex: -1,
+    },
+    row: {
+        flexDirection: 'row',
+        position: 'relative',
+    },
+    column: {
+        flexDirection: 'column',
+        position: 'relative',
+    },
+});
+export { MarqueeText, AnimationMode };

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { AutoScroll } from './AutoScroll';
+import { MarqueeText } from './MarqueeText';
 import { AnimationMode } from './constants';
-export { AutoScroll, AnimationMode };
+export { AutoScroll, AnimationMode, MarqueeText };
 export default AutoScroll;

package/dist/index.js

@@ -1,4 +1,5 @@
 import { AutoScroll } from './AutoScroll';
+import { MarqueeText } from './MarqueeText';
 import { AnimationMode } from './constants';
-export { AutoScroll, AnimationMode };
+export { AutoScroll, AnimationMode, MarqueeText };
 export default AutoScroll;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "rn-marquee-text",
-    "version": "2.0.2",
+    "version": "2.0.4",
     "description": "A customizable marquee (scrolling) text component for React Native",
     "main": "index.js",
     "types": "index.d.ts",
@@ -50,6 +50,7 @@
         "typescript": "^5.0.0"
     },
     "dependencies": {
+        "@react-navigation/native": "^7.1.9",
         "react-native-gesture-handler": "^2.25.0",
         "rn-marquee-text": "^1.0.4"
     }