rn-marquee-text 2.0.3 → 2.0.5

package/README.md

@@ -1,233 +1,146 @@
-# React Native Marquee Text
+# 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 highly customizable package for smooth, auto-scrolling marquee text components in React Native apps. Works seamlessly in both React Native CLI and Expo environments.
+A high-performance, customizable marquee component for React Native with smooth animations and gesture support.
 
-![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)
+![Demo](https://github.com/yourusername/rn-marquee-text/blob/main/assets/demo.gif?raw=true)
 
-## 🚀 Features
+## Features ✨
 
-- ⚡ 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
+- 🎭 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
 
-## 📦 Installation
+## Installation 💻
 
 ```bash
-# React Native CLI
-npm install rn-marquee-text react-native-reanimated
+# Using npm
+npm install rn-marquee-text react-native-reanimated react-native-gesture-handler
 
-# OR using yarn
-yarn add rn-marquee-text react-native-reanimated
-```
+# Using yarn
+yarn add rn-marquee-text react-native-reanimated react-native-gesture-handler
+Peer Dependencies Setup
+Follow Reanimated installation guide
 
-### Expo Users
+Configure Gesture Handler
 
-```bash
-expo install react-native-reanimated
-```
-
-Then update your `babel.config.js`:
-
-```js
-module.exports = {
-  presets: ['babel-preset-expo'],
-  plugins: ['react-native-reanimated/plugin'],
-};
-```
-
-## 🧱 Components
-
-### 1️⃣ AutoScroll — Scroll any overflowed content
-
-#### 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
-
-| 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' }}>
+Basic Usage 🚀
+jsx
+import MarqueeText from 'rn-marquee-text';
+
+function App() {
+  return (
     <MarqueeText
-      speed={100}
-      backgroundColor="#1a365d"
-      textColor="#f0f4f8"
-      fontSize={14}
-      direction="horizontal"
+      speed={50}
+      style={{ height: 40 }}
+      textStyle={{ fontSize: 16 }}
     >
-      <Text>
-        Breaking News: This is a marquee text scrolling horizontally!
-      </Text>
-    </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',
-  },
-});
-```
-
-### 📰 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>
+      This text will scroll automatically!
     </MarqueeText>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  tickerContainer: {
-    width: '100%',
-    borderRadius: 4,
-    overflow: 'hidden',
-    marginVertical: 10,
-  },
-  cardText: {
-    fontSize: 14,
-    paddingHorizontal: 10,
-  },
-});
-```
-
-## 🛠️ Tips for Optimal Performance
-
-- 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
-
-## 🧩 Troubleshooting
-
-### ❌ Text Not Scrolling?
-
-- Ensure content overflows the container
-- Confirm `enabled` is set to `true`
-- Use `overflow: 'hidden'` on container
-
-### 🐢 Choppy Animations?
-
-- Leverage `useNativeDriver` if supported
-- Minimize simultaneous animations
-- Simplify nested component structure
-
-## 📄 License
-
-MIT
-
-## 🤝 Contributing
-
-Pull requests welcome!
-
-Steps:
-
-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
+  );
+}
+Advanced Usage 🧠
+Custom Animation Configuration
+jsx
+<MarqueeText
+  mode="bounce"
+  direction="vertical"
+  speed={30}
+  delay={2000}
+  endPauseDuration={1500}
+  spacing={30}
+>
+  {yourCustomComponent}
+</MarqueeText>
+Imperative Control
+jsx
+const marqueeRef = useRef(null);
+
+// Start/pause programmatically
+<>
+  <MarqueeText ref={marqueeRef} />
+  <Button 
+    title="Toggle" 
+    onPress={() => marqueeRef.current?.isActive 
+      ? marqueeRef.current.stop() 
+      : marqueeRef.current.start()
+    }
+  />
+</>```
+
+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)
+spacing	number	20	Space between clones
+enabled	boolean	true	Animation state
+Methods (via ref)
+typescript
+interface MarqueeRef {
+  start: () => void;
+  stop: () => void;
+  isActive: boolean;
+}
+Examples 🎨
+News Ticker
+jsx
+<MarqueeText
+  style={styles.ticker}
+  textStyle={styles.tickerText}
+  speed={40}
+>
+  BREAKING: React Native Marquee Text released! • New version available • Check out the docs
+</MarqueeText>
+Vertical Product Carousel
+jsx
+<MarqueeText
+  direction="vertical"
+  mode="bounce"
+  speed={20}
+  style={styles.carousel}
+>
+  <ProductCard {...item1} />
+  <ProductCard {...item2} />
+  <ProductCard {...item3} />
+</MarqueeText>
+Troubleshooting ⚠️
+Animation not smooth?
+
+Ensure you're using Reanimated 2+
+
+Check for heavy renders in parent components
+
+Text not visible?
+
+Verify container has explicit dimensions
+
+Check text color contrast
+
+Gesture not working?
+
+Confirm Gesture Handler installation
+
+Wrap root component with GestureHandlerRootView
+
+Contributing 🤝
+We welcome contributions! Please:
+
+Fork the repository
+
+Create a feature branch
+
+Submit a pull request
+
+License 📄
+MIT © PARESH CHAVDA

package/dist/AutoScroll.d.ts

@@ -15,7 +15,7 @@ import { TextStyle, ViewStyle } from 'react-native';
  * @prop {boolean} enabled - Whether the scrolling animation is enabled
  * @prop {'horizontal'|'vertical'} direction - The direction of the scrolling animation
  */
-export declare const AutoScroll: ({ children, mode, speed, delay, endPauseDuration, style, textStyle, enabled, direction, }: {
+declare const AutoScroll: ({ children, mode, speed, delay, endPauseDuration, style, textStyle, enabled, direction, }: {
     children: React.ReactNode;
     mode?: "loop" | "bounce";
     speed?: number;
@@ -26,3 +26,4 @@ export declare const AutoScroll: ({ children, mode, speed, delay, endPauseDurati
     enabled?: boolean;
     direction?: "horizontal" | "vertical";
 }) => React.JSX.Element;
+export default AutoScroll;

package/dist/AutoScroll.js

@@ -17,7 +17,7 @@ import { AnimationMode } from './constants';
  * @prop {boolean} enabled - Whether the scrolling animation is enabled
  * @prop {'horizontal'|'vertical'} direction - The direction of the scrolling animation
  */
-export var AutoScroll = function (_a) {
+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);
@@ -143,3 +143,4 @@ var styles = StyleSheet.create({
         flexShrink: 0,
     },
 });
+export default AutoScroll;

package/dist/MarqueeText.d.ts

@@ -1,46 +1,120 @@
 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 default MarqueeText;
+export { 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,122 @@ 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 default MarqueeText;
+export { AnimationMode };

package/dist/index.d.ts

@@ -1,5 +1,18 @@
-import { AutoScroll } from './AutoScroll';
-import { Marquee } from './MarqueeText';
-import { AnimationMode } from './constants';
-export { AutoScroll, AnimationMode, Marquee };
-export default AutoScroll;
+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?: "loop" | "bounce";
+        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;

package/dist/index.js

@@ -1,5 +1,10 @@
-import { AutoScroll } from './AutoScroll';
-import { Marquee } from './MarqueeText';
-import { AnimationMode } from './constants';
-export { AutoScroll, AnimationMode, Marquee };
-export default AutoScroll;
+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;

package/package.json

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