rn-marquee-text 2.0.6 → 2.0.8

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/MarqueeText.d.ts

@@ -1,5 +1,112 @@
 import * as React from 'react';
-import { MarqueeTextRef, MarqueeTextProps, AnimationMode } from './constants';
+import { ViewStyle, TextStyle } from 'react-native';
+/**
+ * Animation modes for the marquee text
+ */
+declare enum AnimationMode {
+    LOOP = "loop",
+    BOUNCE = "bounce"
+}
+/**
+ * Direction of the marquee animation
+ */
+type MarqueeDirection = 'horizontal' | 'vertical';
+/**
+ * Props for the MarqueeText component
+ */
+interface MarqueeTextProps {
+    /**
+     * Content to be scrolled (string or React nodes)
+     */
+    children: React.ReactNode;
+    /**
+     * The animation mode: 'loop' for continuous scrolling or 'bounce' for back-and-forth
+     * @default AnimationMode.LOOP
+     */
+    mode?: AnimationMode;
+    /**
+     * Speed of the scrolling animation in pixels per second
+     * @default 30
+     */
+    speed?: number;
+    /**
+     * 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;
+}
 /**
  * MarqueeText component for scrolling text or content
  *
@@ -8,6 +115,6 @@ import { MarqueeTextRef, MarqueeTextProps, AnimationMode } from './constants';
  * modes, and user interaction via gestures.
  */
 declare const MarqueeText: React.ForwardRefExoticComponent<MarqueeTextProps & React.RefAttributes<MarqueeTextRef>>;
-export default MarqueeText;
 export { AnimationMode };
-export type { MarqueeTextProps };
+export type { MarqueeDirection, MarqueeTextProps };
+export default MarqueeText;

package/dist/MarqueeText.js

@@ -2,8 +2,14 @@ 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';
-import { AnimationMode } from './constants';
+/**
+ * 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
  */
@@ -121,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') {
@@ -198,5 +196,5 @@ var styles = StyleSheet.create({
         position: 'relative',
     },
 });
-export default MarqueeText;
 export { AnimationMode };
+export default MarqueeText;

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?: AnimationMode;
+        mode?: import("./constants").AnimationMode;
         speed?: number;
         delay?: number;
         endPauseDuration?: number;
@@ -12,7 +12,7 @@ declare const Marquee: {
         enabled?: boolean;
         direction?: "horizontal" | "vertical";
     }) => import("react").JSX.Element;
-    MarqueeText: import("react").ForwardRefExoticComponent<import("./constants").MarqueeTextProps & import("react").RefAttributes<import("./constants").MarqueeTextRef>>;
+    MarqueeText: import("react").ForwardRefExoticComponent<import("./MarqueeText").MarqueeTextProps & import("react").RefAttributes<import("./MarqueeText").MarqueeTextRef>>;
     AnimationMode: typeof AnimationMode;
 };
 export default Marquee;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "rn-marquee-text",
-    "version": "2.0.6",
+    "version": "2.0.8",
     "description": "A customizable marquee (scrolling) text component for React Native",
     "main": "index.js",
     "types": "index.d.ts",
@@ -12,7 +12,8 @@
     "files": [
         "dist",
         "index.js",
-        "README.md"
+        "README.md",
+        "index.d.ts"
     ],
     "keywords": [
         "react-native",
@@ -52,6 +53,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"
     }
 }