rn-marquee-text 2.0.5 → 2.0.7

package/README.md

@@ -27,30 +27,35 @@ npm install rn-marquee-text react-native-reanimated react-native-gesture-handler
 
 # Using yarn
 yarn add rn-marquee-text react-native-reanimated react-native-gesture-handler
-Peer Dependencies Setup
-Follow Reanimated installation guide
+```
 
-Configure 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)
 
-Basic Usage 🚀
-jsx
-import MarqueeText from 'rn-marquee-text';
+## Basic Usage 🚀
+
+```jsx
+import Marquee from 'rn-marquee-text';
 
 function App() {
   return (
-    <MarqueeText
+    <Marquee.MarqueeText
       speed={50}
       style={{ height: 40 }}
       textStyle={{ fontSize: 16 }}
     >
       This text will scroll automatically!
-    </MarqueeText>
+    </Marquee.MarqueeText>
   );
 }
-Advanced Usage 🧠
-Custom Animation Configuration
-jsx
-<MarqueeText
+```
+
+## Advanced Usage 🧠
+
+### Custom Animation Configuration
+```jsx
+<Marquee.MarqueeText
   mode="bounce"
   direction="vertical"
   speed={30}
@@ -59,14 +64,16 @@ jsx
   spacing={30}
 >
   {yourCustomComponent}
-</MarqueeText>
-Imperative Control
-jsx
+</Marquee.MarqueeText>
+```
+
+### Imperative Control
+```jsx
 const marqueeRef = useRef(null);
 
 // Start/pause programmatically
 <>
-  <MarqueeText ref={marqueeRef} />
+  <Marquee.MarqueeText ref={marqueeRef} />
   <Button 
     title="Toggle" 
     onPress={() => marqueeRef.current?.isActive 
@@ -74,37 +81,69 @@ const marqueeRef = useRef(null);
       : 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 {
+</>
+```
+
+## 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 |
+
+### Methods (via ref)
+
+```typescript
+interface MarqueeTextRef {
   start: () => void;
   stop: () => void;
   isActive: boolean;
 }
-Examples 🎨
-News Ticker
-jsx
-<MarqueeText
+```
+
+## Examples 🎨
+
+### 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
-</MarqueeText>
-Vertical Product Carousel
-jsx
-<MarqueeText
+</Marquee.MarqueeText>
+
+const styles = StyleSheet.create({
+  ticker: {
+    backgroundColor: '#ff0000',
+    height: 30,
+  },
+  tickerText: {
+    color: 'white',
+    fontSize: 14,
+    fontWeight: 'bold',
+  },
+});
+```
+
+### Vertical Product Carousel
+```jsx
+<Marquee.MarqueeText
   direction="vertical"
   mode="bounce"
   speed={20}
@@ -113,34 +152,65 @@ jsx
   <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
+</Marquee.MarqueeText>
+```
+
+### Custom Component with High Speed
+```jsx
+<Marquee.MarqueeText
+  style={styles.marquee}
+  speed={500}
+  textStyle={styles.text}
+>
+  Smarty was created by the creators of React Native.
+</Marquee.MarqueeText>
+
+const styles = StyleSheet.create({
+  marquee: {
+    width: '100%',
+    height: 30,
+  },
+  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
+
+### Text not visible?
+- Verify container has explicit dimensions
+- Check text color contrast
+- Ensure `textStyle` is properly applied
+
+### Gesture not working?
+- Confirm Gesture Handler installation
+- Wrap root component with `GestureHandlerRootView`
+- Set `withGesture={true}` (default)
+
+### Performance Issues?
+- Reduce `speed` for smoother animation
+- Minimize `spacing` to reduce clone count
+- Use `enabled={false}` when not needed
+
+## Contributing 🤝
 
-Contributing 🤝
 We welcome contributions! Please:
 
-Fork the repository
+1. Fork the repository
+2. Create a feature branch
+3. Submit a pull request
+
+## License 📄
 
-Create a feature branch
+MIT © PARESH CHAVDA
 
-Submit a pull request
+---
 
-License 📄
-MIT © PARESH CHAVDA
+Made with ❤️ for the React Native community

package/dist/AutoScroll.d.ts

@@ -1,5 +1,6 @@
 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
@@ -17,7 +18,7 @@ import { TextStyle, ViewStyle } from 'react-native';
  */
 declare const AutoScroll: ({ children, mode, speed, delay, endPauseDuration, style, textStyle, enabled, direction, }: {
     children: React.ReactNode;
-    mode?: "loop" | "bounce";
+    mode?: AnimationMode;
     speed?: number;
     delay?: number;
     endPauseDuration?: number;

package/dist/AutoScroll.js

@@ -18,7 +18,7 @@ import { AnimationMode } from './constants';
  * @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 ? '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;
+    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;
     // 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 || mode === 'loop') {
+        if (mode === AnimationMode.LOOP) {
             // Continuous loop animation
             scrollPosition.value = withDelay(delay, withRepeat(withTiming(-distance, { duration: duration, easing: Easing.linear }), -1, false));
         }

package/dist/MarqueeText.d.ts

@@ -115,6 +115,6 @@ export interface MarqueeTextRef {
  * modes, and user interaction via gestures.
  */
 declare const MarqueeText: React.ForwardRefExoticComponent<MarqueeTextProps & React.RefAttributes<MarqueeTextRef>>;
-export default MarqueeText;
 export { AnimationMode };
 export type { MarqueeDirection, MarqueeTextProps };
+export default MarqueeText;

package/dist/MarqueeText.js

@@ -2,7 +2,6 @@ import * as React from 'react';
 import { StyleSheet, View, Text } from 'react-native';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue, useFrameCallback, withDecay, } from 'react-native-reanimated';
-import { useFocusEffect } from '@react-navigation/native';
 /**
  * Animation modes for the marquee text
  */
@@ -128,33 +127,25 @@ var MarqueeText = React.forwardRef(function (_a, ref) {
             });
         });
     }, [withGesture, isVertical, anim, start, stop, enabled]);
-    // Handle focus/unmount
-    useFocusEffect(React.useCallback(function () {
-        // Start animation when screen comes into focus
-        if (enabled) {
-            start();
-        }
-        return function () {
-            // Stop animation when screen loses focus
-            stop();
-            anim.value = 0;
-        };
-    }, [start, stop, anim, enabled]));
     // Cleanup on unmount
     React.useEffect(function () {
         return function () {
             isMounted.current = false;
+            stop();
         };
-    }, []);
+    }, [stop]);
     // Start/stop based on enabled prop changes
     React.useEffect(function () {
         if (enabled) {
-            start();
+            var timer_1 = setTimeout(function () {
+                start();
+            }, delay);
+            return function () { return clearTimeout(timer_1); };
         }
         else {
             stop();
         }
-    }, [enabled, start, stop]);
+    }, [enabled, start, stop, delay]);
     // Render the content
     var renderContent = function () {
         if (typeof children === 'string') {
@@ -205,5 +196,5 @@ var styles = StyleSheet.create({
         position: 'relative',
     },
 });
-export default MarqueeText;
 export { AnimationMode };
+export default MarqueeText;

package/dist/constants.d.ts

@@ -1,4 +1,109 @@
-export declare const AnimationMode: {
-    LOOP: string;
-    BOUNCE: string;
-};
+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 {};

package/dist/constants.js

@@ -1,4 +1,12 @@
-export var AnimationMode = {
-    LOOP: 'loop',
-    BOUNCE: 'bounce',
-};
+// 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 = {}));

package/dist/index.d.ts

@@ -3,7 +3,7 @@ export { AnimationMode } from './constants';
 declare const Marquee: {
     AutoScroll: ({ children, mode, speed, delay, endPauseDuration, style, textStyle, enabled, direction, }: {
         children: React.ReactNode;
-        mode?: "loop" | "bounce";
+        mode?: import("./constants").AnimationMode;
         speed?: number;
         delay?: number;
         endPauseDuration?: number;

package/dist/index.js

@@ -5,6 +5,6 @@ export { AnimationMode } from './constants';
 var Marquee = {
     AutoScroll: AutoScroll,
     MarqueeText: MarqueeText,
-    AnimationMode: AnimationMode
+    AnimationMode: AnimationMode,
 };
 export default Marquee;

package/package.json

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