rn-marquee-text 2.0.3 → 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,46 +1,119 @@
 import * as React from 'react';
-import type { ViewStyle } from 'react-native';
-import type { SharedValue } from 'react-native-reanimated';
+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';
-export type MarqueeProps = React.PropsWithChildren<{
+/**
+ * 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;
-    spacing?: number;
+    /**
+     * Delay in milliseconds before starting the animation
+     * @default 1500
+     */
+    delay?: number;
+    /**
+     * Duration in milliseconds to pause at the end of the content (only for bounce mode)
+     * @default 1000
+     */
+    endPauseDuration?: number;
+    /**
+     * Container style
+     */
     style?: ViewStyle;
-    reverse?: boolean;
-    frameRate?: number;
+    /**
+     * 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;
-    position?: SharedValue<number>;
+    /**
+     * Spacing between cloned elements
+     * @default 20
+     */
+    spacing?: number;
+    /**
+     * Allow user interaction with gesture handling
+     * @default true
+     */
     withGesture?: boolean;
-}>;
-export type MarqueeRef = {
+    /**
+     * 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;
-};
+}
 /**
- * Marquee component that animates its children in a continuous loop.
+ * MarqueeText component for scrolling text or content
  *
- * @param speed - Animation speed (pixels per frame)
- * @param spacing - Spacing between cloned elements
- * @param style - Container style
- * @param reverse - Reverse animation direction
- * @param frameRate - Custom frame rate (optional)
- * @param direction - Animation direction ('horizontal' or 'vertical')
- * @param position - Optional shared value to track position
- * @param withGesture - Enable/disable gesture interactions
- * @param ref - Ref to control animation
- * @param children - Child elements to animate
+ * 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.
  */
-export declare const Marquee: React.NamedExoticComponent<{
-    speed?: number;
-    spacing?: number;
-    style?: ViewStyle;
-    reverse?: boolean;
-    frameRate?: number;
-    direction?: MarqueeDirection;
-    position?: SharedValue<number>;
-    withGesture?: boolean;
-} & {
-    children?: React.ReactNode | undefined;
-} & React.RefAttributes<MarqueeRef>>;
-export {};
+declare const MarqueeText: React.ForwardRefExoticComponent<MarqueeTextProps & React.RefAttributes<MarqueeTextRef>>;
+export { MarqueeText, AnimationMode };
+export type { MarqueeDirection, MarqueeTextProps };

package/dist/MarqueeText.js

@@ -1,131 +1,25 @@
-// // MarqueeText.js - Complete rewrite with guaranteed scrolling
-// import React, { useEffect } from 'react';
-// import { Text, View } from 'react-native';
-// import Animated, {
-//   useSharedValue,
-//   useAnimatedStyle,
-//   withRepeat,
-//   withTiming,
-//   withDelay,
-//   Easing,
-//   withSequence,
-// } from 'react-native-reanimated';
-// const MarqueeText = ({
-//   text,
-//   speed = 60,
-//   backgroundColor = '#000',
-//   textColor = '#fff',
-//   fontSize = 16,
-//   paddingVertical = 8,
-//   paddingHorizontal = 12,
-//   delay = 1000,
-//   bounceMode = false,
-//   endPauseDuration = 2000,
-// }:{
-//   text: string;
-//   speed?: number;
-//   backgroundColor?: string;
-//   textColor?: string;
-//   fontSize?: number;
-//   paddingVertical?: number;
-//   paddingHorizontal?: number;
-//   delay?: number;
-//   bounceMode?: boolean;
-//   endPauseDuration?: number;
-// }) => {
-//   // Force a larger content width to ensure scrolling always happens
-//   // In real usage, we would measure dynamically, but this ensures it works
-//   const contentWidth = text.length * (fontSize * 0.6);  
-//   const scrollX = useSharedValue(0);
-//   useEffect(() => {
-//     // Give layout time to complete
-//     const timeoutId = setTimeout(() => {
-//       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 () => clearTimeout(timeoutId);
-//   }, [speed, delay, contentWidth, bounceMode, endPauseDuration]);
-//   const animatedStyle = useAnimatedStyle(() => {
-//     return {
-//       transform: [{ translateX: scrollX.value }],
-//     };
-//   });
-//   return (
-//     <View
-//       style={{
-//         backgroundColor,
-//         paddingVertical,
-//         paddingHorizontal,
-//         overflow: 'hidden',
-//       }}
-//     >
-//       <Animated.Text
-//         style={[
-//           {
-//             color: textColor,
-//             fontSize,
-//           },
-//           animatedStyle,
-//         ]}
-//         numberOfLines={1}
-//         // ellipsizeMode="tail"
-//       >
-//         {text}
-//       </Animated.Text>
-//     </View>
-//   );
-// };
-// export default MarqueeText;
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, Text } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
-import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useFrameCallback, useSharedValue, withDecay, } from 'react-native-reanimated';
+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, textMeasurement = _a.textMeasurement, spacing = _a.spacing, direction = _a.direction;
-    var stylez = useAnimatedStyle(function () {
+    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 ? textMeasurement.value.height : textMeasurement.value.width;
+        var dimension = isVertical ? contentMeasurement.value.height : contentMeasurement.value.width;
         if (dimension <= 0)
             return {};
         var position = (index - 1) * (dimension + spacing);
@@ -134,67 +28,59 @@ var AnimatedChild = React.memo(function (_a) {
                 position: 'absolute'
             },
             _a[isVertical ? 'top' : 'left'] = position,
-            _a.transform = [
-                {
-                    translateX: translation,
-                },
-            ],
+            _a.transform = isVertical
+                ? [{ translateY: translation }]
+                : [{ translateX: translation }],
             _a;
-    }, [index, spacing, textMeasurement, direction]);
-    return <Animated.View style={stylez}>{children}</Animated.View>;
+    }, [index, spacing, contentMeasurement, direction]);
+    return <Animated.View style={style}>{children}</Animated.View>;
 });
 /**
- * Marquee component that animates its children in a continuous loop.
+ * MarqueeText component for scrolling text or content
  *
- * @param speed - Animation speed (pixels per frame)
- * @param spacing - Spacing between cloned elements
- * @param style - Container style
- * @param reverse - Reverse animation direction
- * @param frameRate - Custom frame rate (optional)
- * @param direction - Animation direction ('horizontal' or 'vertical')
- * @param position - Optional shared value to track position
- * @param withGesture - Enable/disable gesture interactions
- * @param ref - Ref to control animation
- * @param children - Child elements to animate
+ * 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.
  */
-export var Marquee = React.memo(React.forwardRef(function (_a, ref) {
-    var _b = _a.speed, speed = _b === void 0 ? 1 : _b, children = _a.children, _c = _a.spacing, spacing = _c === void 0 ? 0 : _c, style = _a.style, _d = _a.reverse, reverse = _d === void 0 ? false : _d, frameRate = _a.frameRate, _e = _a.direction, direction = _e === void 0 ? 'horizontal' : _e, position = _a.position, _f = _a.withGesture, withGesture = _f === void 0 ? true : _f;
+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 parentMeasurement = useSharedValue({
+    var isBounceMode = mode === AnimationMode.BOUNCE;
+    var containerMeasurement = useSharedValue({
         width: 0,
         height: 0,
         x: 0,
         y: 0,
     });
-    var textMeasurement = useSharedValue({
+    var contentMeasurement = useSharedValue({
         width: 0,
         height: 0,
         x: 0,
         y: 0,
     });
-    var _g = React.useState(0), cloneTimes = _g[0], setCloneTimes = _g[1];
+    var _m = React.useState(0), cloneTimes = _m[0], setCloneTimes = _m[1];
     var anim = useSharedValue(0);
     var isMounted = React.useRef(true);
-    var frameRateMs = frameRate ? 1000 / frameRate : null;
+    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 (frameInfo.timeSincePreviousFrame === null)
+        if (!enabled || frameInfo.timeSincePreviousFrame === null)
             return;
-        var frameDelta = frameRateMs
+        var deltaTime = frameRateMs
             ? frameInfo.timeSincePreviousFrame / frameRateMs
-            : 1;
-        anim.value += (reverse ? -1 : 1) * speed * frameDelta;
+            : frameInfo.timeSincePreviousFrame;
+        anim.value += (reverse ? -1 : 1) * pixelsPerMs * deltaTime;
     }, false);
-    useDerivedValue(function () {
-        if (position) {
-            position.value = anim.value;
-        }
-    });
+    // Calculate how many clones we need to fill the screen
     useAnimatedReaction(function () {
-        var textDim = isVertical ? textMeasurement.value.height : textMeasurement.value.width;
-        var parentDim = isVertical ? parentMeasurement.value.height : parentMeasurement.value.width;
-        if (textDim <= 0 || parentDim <= 0)
+        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;
-        return Math.ceil(parentDim / textDim) + 2;
+        // 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);
@@ -202,75 +88,121 @@ export var Marquee = React.memo(React.forwardRef(function (_a, ref) {
     }, [direction]);
     // Control functions
     var start = React.useCallback(function () {
+        if (!enabled)
+            return;
         frameCallback.setActive(true);
-    }, [frameCallback]);
+        isActive.value = true;
+        onAnimationStart === null || onAnimationStart === void 0 ? void 0 : onAnimationStart();
+    }, [frameCallback, enabled, onAnimationStart]);
     var stop = React.useCallback(function () {
         frameCallback.setActive(false);
-    }, [frameCallback]);
+        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,
-        isActive: frameCallback.isActive,
+        get isActive() { return isActive.value; }
     }); });
+    // Setup gesture handling
     var pan = React.useMemo(function () {
         return Gesture.Pan()
-            .enabled(withGesture)
-            .onBegin(function () { return runOnJS(stop)(); })
+            .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) { return finished && runOnJS(start)(); });
+            }, function (finished) {
+                // Restart auto-animation when decay finishes
+                if (finished)
+                    runOnJS(start)();
+            });
         });
-    }, [withGesture, isVertical, anim, start, stop]);
+    }, [withGesture, isVertical, anim, start, stop, enabled]);
     // Handle focus/unmount
     useFocusEffect(React.useCallback(function () {
-        start();
+        // 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]));
+    }, [start, stop, anim, enabled]));
+    // Cleanup on unmount
     React.useEffect(function () {
         return function () {
             isMounted.current = false;
         };
     }, []);
-    return (<Animated.View style={style} onLayout={function (ev) {
-            parentMeasurement.value = ev.nativeEvent.layout;
+    // 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">
-              <Animated.ScrollView horizontal={!isVertical} style={styles.hidden} pointerEvents="none">
-                <View onLayout={function (ev) {
-            textMeasurement.value = ev.nativeEvent.layout;
+        <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;
         }}>
-                  {children}
-                </View>
-              </Animated.ScrollView>
-              
-              {cloneTimes > 0 &&
-            Array.from({ length: cloneTimes }).map(function (_, index) { return (<AnimatedChild key={"clone-".concat(index)} index={index} anim={anim} textMeasurement={textMeasurement} spacing={spacing} direction={direction}>
-                    {children}
-                  </AnimatedChild>); })}
-            </Animated.View>
-          </GestureDetector>
-        </Animated.View>);
-}));
+              {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,
-        zIndex: -9999,
-        flex: 0, // Prevent ScrollView from expanding
+        position: 'absolute',
+        zIndex: -1,
     },
     row: {
         flexDirection: 'row',
-        flex: 1,
+        position: 'relative',
     },
     column: {
         flexDirection: 'column',
-        flex: 1,
+        position: 'relative',
     },
 });
+export { MarqueeText, AnimationMode };

package/dist/index.d.ts

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

package/dist/index.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "rn-marquee-text",
-    "version": "2.0.3",
+    "version": "2.0.4",
     "description": "A customizable marquee (scrolling) text component for React Native",
     "main": "index.js",
     "types": "index.d.ts",