rn-marquee-text 2.1.1-beta.1 → 3.0.0

package/README.md

@@ -1,25 +1,19 @@
-# React Native Marquee Text 🏃‍♂️
+```markdown
+# React Native Marquee Text 🚀
 
-[![npm version](https://img.shields.io/npm/v/rn-marquee-text?style=flat-square)](https://www.npmjs.com/package/rn-marquee-text)
-[![license](https://img.shields.io/npm/l/rn-marquee-text?style=flat-square)](https://github.com/yourusername/rn-marquee-text/blob/main/LICENSE)
-[![downloads](https://img.shields.io/npm/dt/rn-marquee-text?style=flat-square)](https://www.npmjs.com/package/rn-marquee-text)
-[![CI Status](https://img.shields.io/github/actions/workflow/status/yourusername/rn-marquee-text/ci.yml?style=flat-square)](https://github.com/yourusername/rn-marquee-text/actions)
-
-A high-performance, customizable marquee component for React Native with smooth animations and gesture support.
-
-![Demo](https://github.com/yourusername/rn-marquee-text/blob/main/assets/demo.gif?raw=true)
+![Horizontal and Vertical Marquee Demo](demo-combined.gif)
 
 ## Features ✨
 
-- 🎭 Multiple animation modes (loop, bounce)
-- ↔️ Bidirectional scrolling (horizontal/vertical)
-- ✋ Touch gesture interaction
-- ⚡ Optimized with Reanimated 2
-- 🎨 Customizable speed, spacing, and delays
-- 📱 Supports both iOS and Android
-- 🛠 TypeScript support included
+- **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
 
-## Installation 💻
+## Installation 📦
 
 ```bash
 # Using npm
@@ -29,188 +23,191 @@ npm install rn-marquee-text react-native-reanimated react-native-gesture-handler
 yarn add rn-marquee-text react-native-reanimated react-native-gesture-handler
 ```
 
-### Peer Dependencies Setup
-- Follow [Reanimated installation guide](https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/installation)
-- Configure [Gesture Handler](https://docs.swmansion.com/react-native-gesture-handler/docs/installation)
+### 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/)
 
-## Basic Usage 🚀
+## Usage 🚀
 
+### Basic Implementation
 ```jsx
-import Marquee from 'rn-marquee-text';
-
-function App() {
-  return (
-    <Marquee.MarqueeText
-      speed={50}
-      style={{ height: 40 }}
-      textStyle={{ fontSize: 16 }}
+import React from 'react';
+import { StyleSheet, View } from 'react-native';
+import MarqueeText from 'rn-marquee-text';
+
+const App = () => (
+  <View style={styles.container}>
+    <MarqueeText
+      style={styles.marquee}
+      speed={40}
+      textStyle={styles.text}
     >
-      This text will scroll automatically!
-    </Marquee.MarqueeText>
-  );
-}
-```
-
-## Advanced Usage 🧠
+      Your scrolling text goes here
+    </MarqueeText>
+  </View>
+);
 
-### Custom Animation Configuration
-```jsx
-<Marquee.MarqueeText
-  mode="bounce"
-  direction="vertical"
-  speed={30}
-  delay={2000}
-  endPauseDuration={1500}
-  spacing={30}
->
-  {yourCustomComponent}
-</Marquee.MarqueeText>
-```
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: 'center', padding: 20 },
+  marquee: { height: 50, backgroundColor: '#f5f5f5', borderRadius: 8 },
+  text: { fontSize: 16, color: '#333' }
+});
 
-### Imperative Control
-```jsx
-const marqueeRef = useRef(null);
-
-// Start/pause programmatically
-<>
-  <Marquee.MarqueeText ref={marqueeRef} />
-  <Button 
-    title="Toggle" 
-    onPress={() => marqueeRef.current?.isActive 
-      ? marqueeRef.current.stop() 
-      : marqueeRef.current.start()
-    }
-  />
-</>
+export default App;
 ```
 
 ## API Reference 📚
 
 ### Props
-
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| `mode` | `'loop' \| 'bounce'` | `'loop'` | Animation behavior |
-| `speed` | `number` | `30` | Scroll speed (px/sec) |
-| `direction` | `'horizontal' \| 'vertical'` | `'horizontal'` | Scroll axis |
-| `delay` | `number` | `1500` | Initial delay (ms) |
-| `endPauseDuration` | `number` | `1000` | Pause duration at end (bounce mode) |
-| `spacing` | `number` | `20` | Space between clones |
-| `enabled` | `boolean` | `true` | Animation state |
-| `withGesture` | `boolean` | `true` | Enable gesture interaction |
-| `reverse` | `boolean` | `false` | Reverse animation direction |
-| `backgroundColor` | `string` | `'transparent'` | Container background color |
-| `frameRate` | `number` | `60` | Animation frame rate |
-| `style` | `ViewStyle` | - | Container style |
-| `textStyle` | `TextStyle` | - | Text style (when children is string) |
-| `onAnimationStart` | `() => void` | - | Animation start callback |
-| `onAnimationStop` | `() => void` | - | Animation stop callback |
+| `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) before starting |
+| `endPauseDuration` | number | 1000 | Pause at end (bounce mode only) |
+| `gap` | number | 20 | Gap between repeating text loops |
+| `spacing` | number | 20 | **Deprecated**: Use `gap` instead |
+| `reverse` | boolean | false | Reverse the animation direction |
+| `backgroundColor` | string | 'transparent' | Background color for the container |
+| `withGesture` | boolean | true | Allow user interaction with gesture handling |
+| `frameRate` | number | - | Custom frame rate for animation |
+| `onAnimationStart` | function | - | Callback when animation starts |
+| `onAnimationStop` | function | - | Callback when animation stops |
+| `style` | ViewStyle | - | Container style |
+| `textStyle` | TextStyle | - | Text style (when children is a string) |
 
 ### Methods (via ref)
+```jsx
+const marqueeRef = useRef();
 
-```typescript
-interface MarqueeTextRef {
-  start: () => void;
-  stop: () => void;
-  isActive: boolean;
-}
-```
-
-## Examples 🎨
+// Start animation
+marqueeRef.current?.start();
 
-### News Ticker
-```jsx
-<Marquee.MarqueeText
-  style={styles.ticker}
-  textStyle={styles.tickerText}
-  speed={40}
->
-  BREAKING: React Native Marquee Text released! • New version available • Check out the docs
-</Marquee.MarqueeText>
+// Stop animation
+marqueeRef.current?.stop();
 
-const styles = StyleSheet.create({
-  ticker: {
-    backgroundColor: '#ff0000',
-    height: 30,
-  },
-  tickerText: {
-    color: 'white',
-    fontSize: 14,
-    fontWeight: 'bold',
-  },
-});
+// Check if active
+const isActive = marqueeRef.current?.isActive;
 ```
 
-### Vertical Product Carousel
-```jsx
-<Marquee.MarqueeText
-  direction="vertical"
-  mode="bounce"
-  speed={20}
-  style={styles.carousel}
->
-  <ProductCard {...item1} />
-  <ProductCard {...item2} />
-  <ProductCard {...item3} />
-</Marquee.MarqueeText>
-```
+## Examples 🎨
 
-### Custom Component with High Speed
+### Comprehensive Demo Example
 ```jsx
-<Marquee.MarqueeText
-  style={styles.marquee}
-  speed={500}
-  textStyle={styles.text}
->
-  Smarty was created by the creators of React Native.
-</Marquee.MarqueeText>
+import React from 'react';
+import { SafeAreaView, View, Text, StyleSheet } from 'react-native';
+import { AutoScroll, Marquee } from 'rn-marquee-text';
+
+export default function App() {
+  return (
+    <SafeAreaView style={{ flex: 1, padding: 16, gap: 24 }}>
+      <Text style={{ fontSize: 20, fontWeight: 'bold' }}>Marquee Text Demo</Text>
+
+      <View style={{ borderRadius: 8, overflow: 'hidden' }}>
+        <Marquee speed={80}>
+          This is a long scrolling text that demonstrates the marquee functionality
+        </Marquee>
+      </View>
+
+      <View style={{ borderRadius: 8, overflow: 'hidden' }}>
+        <Marquee
+          speed={120}
+          backgroundColor="#1a365d"
+          textStyle={{ color: '#f0f4f8', fontSize: 14 }}
+        >
+          Faster scrolling example with different colors
+        </Marquee>
+      </View>
+
+      <View style={{ width: '100%', borderRadius: 8, overflow: 'hidden' }}>
+        <Marquee
+          speed={100}
+          backgroundColor="#7b341e"
+          textStyle={{ color: '#fffaf0', fontSize: 18 }}
+        >
+          Breaking News: This is a full-width marquee text component that scrolls horizontally
+        </Marquee>
+      </View>
+
+      <View style={{ marginVertical: 10, borderRadius: 8, overflow: 'hidden' }}>
+        <Marquee
+          speed={50}
+          backgroundColor="#fff"
+          textStyle={{ color: '#0000ff', fontSize: 16 }}
+        >
+          This text will scroll horizontally with bounce effect. It will pause for 2 seconds at each end.
+        </Marquee>
+      </View>
+
+      <AutoScroll endPauseDuration={2000} style={styles.cardScroller} direction="horizontal">
+        <div style={styles.contentContainer}>
+          {[1, 2, 3, 4, 5].map((item) => (
+            <div key={item} style={styles.card}>
+              <Text style={styles.cardText}>Card {item}</Text>
+            </div>
+          ))}
+        </div>
+      </AutoScroll>
+      <AutoScroll endPauseDuration={2000} style={styles.cardScroller} direction="horizontal">
+        <Text style={styles.cardText}>This text will scroll horizontally with bounce effect and pause for 2 seconds at each end 🎉</Text>
+      </AutoScroll>
+    </SafeAreaView>
+  );
+}
 
 const styles = StyleSheet.create({
-  marquee: {
+  cardScroller: {
+    height: 120,
     width: '100%',
-    height: 30,
+    marginTop: 10,
+  },
+  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',
   },
-  text: { 
-    fontSize: 16, 
-    color: '#333' 
-  }
 });
 ```
 
-## Troubleshooting ⚠️
-
-### Animation not smooth?
-- Ensure you're using Reanimated 2+
-- Check for heavy renders in parent components
-- Try reducing the `frameRate` prop
+## Troubleshooting 🛠️
 
-### Text not visible?
-- Verify container has explicit dimensions
-- Check text color contrast
-- Ensure `textStyle` is properly applied
+**Animation not working?**
+- Verify Reanimated installation
+- Check babel.config.js for Reanimated plugin
 
-### Gesture not working?
-- Confirm Gesture Handler installation
-- Wrap root component with `GestureHandlerRootView`
-- Set `withGesture={true}` (default)
+**Text not visible?**
+- Ensure container has proper dimensions
+- Verify text color contrasts with background
 
-### Performance Issues?
-- Reduce `speed` for smoother animation
-- Minimize `spacing` to reduce clone count
-- Use `enabled={false}` when not needed
+**Performance issues?**
+- Reduce animation speed
+- Simplify marquee content
+- Use `frameRate` prop to limit FPS
 
 ## Contributing 🤝
-
-We welcome contributions! Please:
-
-1. Fork the repository
-2. Create a feature branch
-3. Submit a pull request
+Contributions are welcome! Please:
+1. Open an issue to discuss changes
+2. Ensure tests are updated
+3. Maintain consistent code style
 
 ## License 📄
+MIT © PareshChavda(https://github.com/pareshchavda)
 
-MIT © PARESH CHAVDA
 
----
 
-Made with ❤️ for the React Native community

package/dist/AutoScroll.d.ts

@@ -1,6 +1,5 @@
 import React from 'react';
 import { TextStyle, ViewStyle } from 'react-native';
-import { AnimationMode } from './constants';
 /**
  * AutoScroll component that measures its content and container
  * dimensions and automatically sets up a scrolling animation if
@@ -16,9 +15,9 @@ import { AnimationMode } from './constants';
  * @prop {boolean} enabled - Whether the scrolling animation is enabled
  * @prop {'horizontal'|'vertical'} direction - The direction of the scrolling animation
  */
-declare const AutoScroll: ({ children, mode, speed, delay, endPauseDuration, style, textStyle, enabled, direction, }: {
+export declare const AutoScroll: ({ children, mode, speed, delay, endPauseDuration, style, textStyle, enabled, direction, }: {
     children: React.ReactNode;
-    mode?: AnimationMode;
+    mode?: "loop" | "bounce";
     speed?: number;
     delay?: number;
     endPauseDuration?: number;
@@ -27,4 +26,3 @@ declare const AutoScroll: ({ children, mode, speed, delay, endPauseDuration, sty
     enabled?: boolean;
     direction?: "horizontal" | "vertical";
 }) => React.JSX.Element;
-export default AutoScroll;

package/dist/AutoScroll.js

@@ -17,8 +17,8 @@ import { AnimationMode } from './constants';
  * @prop {boolean} enabled - Whether the scrolling animation is enabled
  * @prop {'horizontal'|'vertical'} direction - The direction of the scrolling animation
  */
-var AutoScroll = function (_a) {
-    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, _f = _a.style, style = _f === void 0 ? {} : _f, _g = _a.textStyle, textStyle = _g === void 0 ? {} : _g, _h = _a.enabled, enabled = _h === void 0 ? true : _h, _j = _a.direction, direction = _j === void 0 ? 'vertical' : _j;
+export var AutoScroll = function (_a) {
+    var children = _a.children, _b = _a.mode, mode = _b === void 0 ? '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, _f = _a.style, style = _f === void 0 ? {} : _f, _g = _a.textStyle, textStyle = _g === void 0 ? {} : _g, _h = _a.enabled, enabled = _h === void 0 ? true : _h, _j = _a.direction, direction = _j === void 0 ? 'vertical' : _j;
     // References for measurement
     var containerRef = useRef(null);
     var contentRef = useRef(null);
@@ -88,7 +88,7 @@ var AutoScroll = function (_a) {
         console.log('Animation setup:', { distance: distance, duration: duration });
         // Reset position
         scrollPosition.value = 0;
-        if (mode === AnimationMode.LOOP) {
+        if (mode === AnimationMode.LOOP || mode === 'loop') {
             // Continuous loop animation
             scrollPosition.value = withDelay(delay, withRepeat(withTiming(-distance, { duration: duration, easing: Easing.linear }), -1, false));
         }
@@ -143,4 +143,3 @@ var styles = StyleSheet.create({
         flexShrink: 0,
     },
 });
-export default AutoScroll;

package/dist/MarqueeText.d.ts

@@ -1,5 +1,5 @@
-import * as React from "react";
-import { ViewStyle, TextStyle } from "react-native";
+import * as React from 'react';
+import { ViewStyle, TextStyle } from 'react-native';
 /**
  * Animation modes for the marquee text
  */
@@ -10,7 +10,7 @@ declare enum AnimationMode {
 /**
  * Direction of the marquee animation
  */
-type MarqueeDirection = "horizontal" | "vertical";
+type MarqueeDirection = 'horizontal' | 'vertical';
 /**
  * Props for the MarqueeText component
  */
@@ -60,8 +60,14 @@ interface MarqueeTextProps {
     /**
      * Spacing between cloned elements
      * @default 20
+     * @deprecated Use `gap` instead
      */
     spacing?: number;
+    /**
+     * Gap between repeating text loops
+     * @default 20
+     */
+    gap?: number;
     /**
      * Allow user interaction with gesture handling
      * @default true
@@ -115,6 +121,5 @@ export interface MarqueeTextRef {
  * modes, and user interaction via gestures.
  */
 declare const MarqueeText: React.ForwardRefExoticComponent<MarqueeTextProps & React.RefAttributes<MarqueeTextRef>>;
-export { AnimationMode };
+export { MarqueeText, AnimationMode };
 export type { MarqueeDirection, MarqueeTextProps };
-export default MarqueeText;

package/dist/MarqueeText.js

@@ -1,7 +1,7 @@
-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 * 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, withDelay, withRepeat, withSequence, withTiming, Easing, cancelAnimation, runOnUI, } from 'react-native-reanimated';
 /**
  * Animation modes for the marquee text
  */
@@ -10,32 +10,7 @@ var 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>;
-});
+// AnimatedChild removed in favor of simplified Flexbox layout
 /**
  * MarqueeText component for scrolling text or content
  *
@@ -44,177 +19,168 @@ var AnimatedChild = React.memo(function (_a) {
  * 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 _m = React.useState({
-        width: 0,
-        height: 0,
-    }), contentSize = _m[0], setContentSize = _m[1];
-    var isVertical = direction === "vertical";
+    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, gap = _a.gap, // New prop
+    _j = _a.withGesture, // New prop
+    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,
-    });
-    var _o = React.useState(0), cloneTimes = _o[0], setCloneTimes = _o[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
+    // Resolve gap/spacing (prefer gap)
+    var effectiveSpacing = gap !== undefined ? gap : spacing;
+    // Shared values
+    var containerSize = useSharedValue(0);
+    var contentSize = useSharedValue(0);
+    var offset = useSharedValue(0);
+    var isAnimating = useSharedValue(false);
+    // State for cloning
+    var _m = React.useState(0), cloneTimes = _m[0], setCloneTimes = _m[1];
+    // Calculate how many clones we need
     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)
+        if (contentSize.value === 0 || containerSize.value === 0)
+            return 0;
+        // Conditional Animation Check:
+        // Only loop if content exceeds container?
+        // If contentSize <= containerSize, we need 0 clones (just original).
+        if (contentSize.value <= containerSize.value) {
             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 Math.ceil(containerSize.value / contentSize.value) + 2;
+    }, function (result) {
+        if (result !== cloneTimes) {
+            runOnJS(setCloneTimes)(result);
+        }
+    }, [contentSize, containerSize]);
+    // Animation Logic
+    var startAnimation = React.useCallback(function () {
+        'worklet';
+        if (!enabled || contentSize.value === 0 || containerSize.value === 0)
             return;
-        frameCallback.setActive(true);
-        isActive.value = true;
+        // If no clones needed (fits in screen), don't animate
+        if (contentSize.value <= containerSize.value) {
+            cancelAnimation(offset);
+            offset.value = 0; // Reset position
+            isAnimating.value = false;
+            return;
+        }
+        cancelAnimation(offset);
+        isAnimating.value = true;
+        var size = contentSize.value + effectiveSpacing;
+        if (mode === AnimationMode.LOOP) {
+            // Continuous Loop
+            var duration = (size / speed) * 1000;
+            // Initial delay handled by a separate sequence wrapper
+            // The repeating part must be seamless: 0 -> -size, then instant reset to 0
+            offset.value = withDelay(delay, withRepeat(withSequence(withTiming(-size, {
+                duration: duration,
+                easing: Easing.linear,
+            }), withTiming(0, { duration: 0 })), -1, // Infinite repeat
+            false // No reverse
+            ));
+        }
+        else {
+            // Bounce Mode
+            var distance = Math.abs(contentSize.value - containerSize.value);
+            if (distance <= 0)
+                return;
+            var target = contentSize.value > containerSize.value
+                ? -(contentSize.value - containerSize.value)
+                : (containerSize.value - contentSize.value);
+            var duration = (Math.abs(target) / speed) * 1000;
+            offset.value = withRepeat(withSequence(withDelay(delay, withTiming(target, { duration: duration, easing: Easing.linear })), withDelay(endPauseDuration, withTiming(0, { duration: duration, easing: Easing.linear }))), -1, false);
+        }
+    }, [enabled, mode, speed, delay, endPauseDuration, effectiveSpacing, containerSize, contentSize]);
+    // Start/Stop Controls
+    var start = React.useCallback(function () {
+        runOnUI(startAnimation)();
         onAnimationStart === null || onAnimationStart === void 0 ? void 0 : onAnimationStart();
-    }, [frameCallback, enabled, onAnimationStart]);
+    }, [startAnimation, onAnimationStart]);
     var stop = React.useCallback(function () {
-        frameCallback.setActive(false);
-        isActive.value = false;
+        cancelAnimation(offset);
+        isAnimating.value = false;
         onAnimationStop === null || onAnimationStop === void 0 ? void 0 : onAnimationStop();
-    }, [frameCallback, onAnimationStop]);
-    // Expose controls via ref
+    }, [offset, onAnimationStop]);
     React.useImperativeHandle(ref, function () { return ({
         start: start,
         stop: stop,
-        get isActive() {
-            return isActive.value;
-        },
+        get isActive() { return isAnimating.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]);
-    // Cleanup on unmount
-    React.useEffect(function () {
-        return function () {
-            isMounted.current = false;
-            stop();
-        };
-    }, [stop]);
-    // Start/stop based on enabled prop changes
-    React.useEffect(function () {
-        if (enabled) {
-            var timer_1 = setTimeout(function () {
-                start();
-            }, delay);
-            return function () { return clearTimeout(timer_1); };
-        }
-        else {
-            stop();
+    // Effect to auto-start when layout is ready
+    useAnimatedReaction(function () { return contentSize.value > 0 && containerSize.value > 0 && cloneTimes > 0; }, function (isReady) {
+        if (isReady && enabled) {
+            runOnJS(start)();
         }
-    }, [enabled, start, stop, delay]);
-    // Render the content
+    }, [cloneTimes, enabled, start]);
+    // Gesture Handler
+    var pan = Gesture.Pan()
+        .enabled(withGesture && enabled)
+        .onBegin(function () {
+        cancelAnimation(offset);
+        isAnimating.value = false;
+    })
+        .onChange(function (e) {
+        offset.value += isVertical ? e.changeY : e.changeX;
+    })
+        .onFinalize(function () {
+        // Logic to resume? 
+        // For simplicity in declaring "clean reset", we might just restart the loop
+        // OR we can calculate where we are and finish the current cycle.
+        // Restarting is safest to prevent being "out of phase".
+        runOnJS(start)();
+    });
+    var animatedStyle = useAnimatedStyle(function () {
+        return {
+            transform: [
+                isVertical
+                    ? { translateY: offset.value }
+                    : { translateX: offset.value }
+            ],
+        };
+    });
     var renderContent = function () {
-        if (typeof children === "string") {
+        if (typeof children === 'string') {
             return <Text style={textStyle}>{children}</Text>;
         }
         return children;
     };
-    return (<Animated.View style={[
-            styles.container,
-            { backgroundColor: backgroundColor },
-            style,
-            {
-                height: isVertical && contentMeasurement.value.height > 0
-                    ? contentMeasurement.value.height
-                    : undefined,
-                width: !isVertical && contentMeasurement.value.width > 0
-                    ? contentMeasurement.value.width
-                    : undefined,
-            },
-        ]} 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;
+    return (<View style={[styles.container, { backgroundColor: backgroundColor }, style]} onLayout={function (ev) {
+            containerSize.value = isVertical ? ev.nativeEvent.layout.height : ev.nativeEvent.layout.width;
         }}>
-              {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}>
+        <GestureDetector gesture={pan}>
+          <Animated.View style={[isVertical ? styles.column : styles.row, animatedStyle]}>
+            {/* Original Items + Clones */}
+            {/* We render a list of items based on cloneTimes */}
+            {Array.from({ length: Math.max(1, cloneTimes) }).map(function (_, index) {
+            var _a;
+            // We need to space them out. 
+            // In this simplified declarative model, we just render them in a flex row/col with gaps/margins.
+            // We don't need absolute positioning if we use Flexbox layout properly!
+            return (<View key={index} style={_a = {},
+                    _a[isVertical ? 'marginBottom' : 'marginRight'] = effectiveSpacing,
+                    _a} onLayout={index === 0 ? function (ev) {
+                    contentSize.value = isVertical ? ev.nativeEvent.layout.height : ev.nativeEvent.layout.width;
+                } : undefined}>
                   {renderContent()}
-                </AnimatedChild>); })}
+                </View>);
+        })}
           </Animated.View>
         </GestureDetector>
-      </Animated.View>);
+      </View>);
 });
 var styles = StyleSheet.create({
     container: {
-        overflow: "hidden",
+        overflow: 'hidden',
     },
     hidden: {
         opacity: 0,
-        position: "absolute",
+        position: 'absolute',
         zIndex: -1,
     },
     row: {
-        flexDirection: "row",
-        position: "relative",
+        flexDirection: 'row',
+        position: 'relative',
     },
     column: {
-        flexDirection: "column",
-        position: "relative",
+        flexDirection: 'column',
+        position: 'relative',
     },
 });
-export { AnimationMode };
-export default MarqueeText;
+export { MarqueeText, AnimationMode };

package/dist/constants.d.ts

@@ -1,109 +1,4 @@
-import { ViewStyle, TextStyle } from "react-native";
-/**
- * Animation modes for the marquee text
- */
-export declare enum AnimationMode {
-    LOOP = "loop",
-    BOUNCE = "bounce"
-}
-/**
- * Direction of the marquee animation
- */
-type MarqueeDirection = 'horizontal' | 'vertical';
-/**
- * Props for the MarqueeText component
- */
-export 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;
-    /**
-     * 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;
-    /**
-     * 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;
-}
-export {};
+export declare const AnimationMode: {
+    LOOP: string;
+    BOUNCE: string;
+};

package/dist/constants.js

@@ -1,12 +1,4 @@
-// export const AnimationMode = {
-//     LOOP: 'loop',
-//     BOUNCE: 'bounce',
-//   };
-/**
- * Animation modes for the marquee text
- */
-export var AnimationMode;
-(function (AnimationMode) {
-    AnimationMode["LOOP"] = "loop";
-    AnimationMode["BOUNCE"] = "bounce";
-})(AnimationMode || (AnimationMode = {}));
+export var AnimationMode = {
+    LOOP: 'loop',
+    BOUNCE: 'bounce',
+};

package/dist/index.d.ts

@@ -1,18 +1,6 @@
-import { AnimationMode } from './MarqueeText';
-export { AnimationMode } from './constants';
-declare const Marquee: {
-    AutoScroll: ({ children, mode, speed, delay, endPauseDuration, style, textStyle, enabled, direction, }: {
-        children: React.ReactNode;
-        mode?: import("./constants").AnimationMode;
-        speed?: number;
-        delay?: number;
-        endPauseDuration?: number;
-        style?: import("react-native").ViewStyle;
-        textStyle?: import("react-native").TextStyle;
-        enabled?: boolean;
-        direction?: "horizontal" | "vertical";
-    }) => import("react").JSX.Element;
-    MarqueeText: import("react").ForwardRefExoticComponent<import("./MarqueeText").MarqueeTextProps & import("react").RefAttributes<import("./MarqueeText").MarqueeTextRef>>;
-    AnimationMode: typeof AnimationMode;
-};
-export default Marquee;
+import { AutoScroll } from './AutoScroll';
+import { AnimationMode } from './constants';
+declare const MarqueeTextShim: any;
+declare const MarqueeShim: any;
+export { AutoScroll, AnimationMode, MarqueeTextShim as MarqueeText, MarqueeShim as Marquee };
+export default AutoScroll;

package/dist/index.js

@@ -1,10 +1,8 @@
-import AutoScroll from './AutoScroll';
-import MarqueeText, { AnimationMode } from './MarqueeText';
-export { AnimationMode } from './constants';
-// Optional: Default export (choose either AutoScroll or MarqueeText as default)
-var Marquee = {
-    AutoScroll: AutoScroll,
-    MarqueeText: MarqueeText,
-    AnimationMode: AnimationMode,
-};
-export default Marquee;
+import { AutoScroll } from './AutoScroll';
+import { MarqueeText } from './MarqueeText';
+import { AnimationMode } from './constants';
+// @ts-ignore - Shim for React 18/19 compatibility
+var MarqueeTextShim = MarqueeText;
+var MarqueeShim = MarqueeText;
+export { AutoScroll, AnimationMode, MarqueeTextShim as MarqueeText, MarqueeShim as Marquee };
+export default AutoScroll;

package/package.json

@@ -1,60 +1,58 @@
 {
-  "name": "rn-marquee-text",
-  "version": "2.1.1-beta.1",
-  "description": "A customizable marquee (scrolling) text component for React Native",
-  "main": "index.js",
-  "types": "index.d.ts",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "tsc",
-    "prepare": "npm run build"
-  },
-  "publishConfig": {
-    "tag": "beta"
-  },
-  "files": [
-    "dist",
-    "index.js",
-    "README.md",
-    "index.d.ts"
-  ],
-  "keywords": [
-    "react-native",
-    "marquee",
-    "scrolling-text",
-    "text",
-    "animation",
-    "react-native-component",
-    "react",
-    "native",
-    "expo"
-  ],
-  "author": "Paresh Chavda",
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/pareshchavda/rn-marquee-text-public.git"
-  },
-  "bugs": {
-    "url": "https://github.com/pareshchavda/rn-marquee-text-public/issues"
-  },
-  "homepage": "https://github.com/pareshchavda/rn-marquee-text-public#readme",
-  "peerDependencies": {
-    "prop-types": ">=15.0.0",
-    "react": "*",
-    "react-native": "*",
-    "react-native-reanimated": ">=2.0.0"
-  },
-  "devDependencies": {
-    "@types/react": "^19.1.2",
-    "prop-types": "^15.8.1",
-    "react": "^18.2.0",
-    "react-native": "^0.72.17",
-    "react-native-reanimated": "^3.17.5",
-    "typescript": "^5.0.0"
-  },
-  "dependencies": {
-    "@react-navigation/native": "^7.1.9",
-    "react-native-gesture-handler": "^2.25.0"
-  }
-}
+    "name": "rn-marquee-text",
+    "version": "3.0.0",
+    "description": "A customizable marquee (scrolling) text component for React Native",
+    "main": "dist/index.js",
+    "types": "dist/index.d.ts",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1",
+        "build": "tsc",
+        "prepare": "npm run build"
+    },
+    "files": [
+        "dist",
+        "index.js",
+        "README.md"
+    ],
+    "keywords": [
+        "react-native",
+        "marquee",
+        "scrolling-text",
+        "text",
+        "animation",
+        "react-native-component",
+        "react",
+        "native",
+        "expo",
+        "Marquee"
+    ],
+    "author": "Paresh Chavda",
+    "license": "MIT",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/pareshchavda/rn-marquee-text-public.git"
+    },
+    "bugs": {
+        "url": "https://github.com/pareshchavda/rn-marquee-text-public/issues"
+    },
+    "homepage": "https://github.com/pareshchavda/rn-marquee-text-public#readme",
+    "peerDependencies": {
+        "prop-types": ">=15.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-reanimated": ">=2.0.0",
+        "@react-navigation/native": ">=6.0.0"
+    },
+    "devDependencies": {
+        "@react-navigation/native": "^7.1.9",
+        "@types/react": "^19.1.2",
+        "prop-types": "^15.8.1",
+        "react": "^18.2.0",
+        "react-native": "^0.72.17",
+        "react-native-reanimated": "^3.17.5",
+        "typescript": "^5.0.0"
+    },
+    "dependencies": {
+        "react-native-gesture-handler": "^2.25.0"
+    }
+}