rn-marquee-text 2.0.4 → 2.0.6

package/README.md

@@ -1,38 +1,25 @@
-Here's a more professional and well-structured version of your README file with improved formatting, organization, and a "Copy All" button:
+# 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)
 
-[![npm version](https://img.shields.io/npm/v/rn-marquee-text.svg?style=flat-square)](https://www.npmjs.com/package/rn-marquee-text)
-[![license](https://img.shields.io/npm/l/rn-marquee-text.svg?style=flat-square)](https://github.com/yourusername/rn-marquee-text/blob/main/LICENSE)
-[![downloads](https://img.shields.io/npm/dm/rn-marquee-text.svg?style=flat-square)](https://www.npmjs.com/package/rn-marquee-text)
-[![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+A high-performance, customizable marquee component for React Native with smooth animations and gesture support.
 
-A high-performance, feature-rich marquee component for React Native with smooth animations and flexible configuration.
-
-![Horizontal and Vertical Marquee Demo](demo-combined.gif)
-
-## Table of Contents
-- [Features](#features-)
-- [Installation](#installation-)
-- [Usage](#usage-)
-- [API Reference](#api-reference-)
-- [Examples](#examples-)
-- [Troubleshooting](#troubleshooting-)
-- [Contributing](#contributing-)
-- [License](#license-)
+![Demo](https://github.com/yourusername/rn-marquee-text/blob/main/assets/demo.gif?raw=true)
 
 ## Features ✨
 
-- **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
+- 🎭 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
 # Using npm
@@ -40,136 +27,120 @@ 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
 
-### 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/)
+Configure Gesture Handler
 
-## Usage 🚀
-
-### Basic Implementation
-```jsx
-import React from 'react';
-import { StyleSheet, View } from 'react-native';
+Basic Usage 🚀
+jsx
 import MarqueeText from 'rn-marquee-text';
 
-const App = () => (
-  <View style={styles.container}>
+function App() {
+  return (
     <MarqueeText
-      style={styles.marquee}
-      speed={40}
-      textStyle={styles.text}
+      speed={50}
+      style={{ height: 40 }}
+      textStyle={{ fontSize: 16 }}
     >
-      Your scrolling text goes here
+      This text will scroll automatically!
     </MarqueeText>
-  </View>
-);
-
-const styles = StyleSheet.create({
-  container: { flex: 1, justifyContent: 'center', padding: 20 },
-  marquee: { height: 50, backgroundColor: '#f5f5f5', borderRadius: 8 },
-  text: { fontSize: 16, color: '#333' }
-});
-
-export default App;
-```
-
-## API Reference 📚
-
-### Props
-| Prop | Type | Default | Description |
-|------|------|---------|-------------|
-| `children` | React.ReactNode | Required | Content to scroll (string or components) |
-| `mode` | 'loop' \| 'bounce' | 'loop' | Animation behavior |
-| `speed` | number | 30 | Pixels per second |
-| `direction` | 'horizontal' \| 'vertical' | 'horizontal' | Scroll direction |
-| `enabled` | boolean | true | Animation active state |
-| `delay` | number | 1500 | Initial delay (ms) |
-| `endPauseDuration` | number | 1000 | Pause at end (bounce mode) |
-
-### Methods (via ref)
-```jsx
-const marqueeRef = useRef();
-
-// Start animation
-marqueeRef.current?.start();
-
-// Stop animation
-marqueeRef.current?.stop();
-
-// Check if active
-const isActive = marqueeRef.current?.isActive;
-```
-
-## Examples 🎨
+  );
+}
+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);
 
-### Vertical Bounce Marquee
-```jsx
+// 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}
-  endPauseDuration={2000}
-  style={styles.verticalMarquee}
+  style={styles.carousel}
 >
-  Line 1{'\n'}Line 2{'\n'}Line 3
+  <ProductCard {...item1} />
+  <ProductCard {...item2} />
+  <ProductCard {...item3} />
 </MarqueeText>
-```
+Troubleshooting ⚠️
+Animation not smooth?
 
-### Controlled Marquee with Buttons
-```jsx
-const [paused, setPaused] = useState(false);
+Ensure you're using Reanimated 2+
 
-<>
-  <MarqueeText
-    ref={marqueeRef}
-    enabled={!paused}
-    style={styles.marquee}
-  >
-    Controllable marquee text
-  </MarqueeText>
-  
-  <Button 
-    title={paused ? "Resume" : "Pause"} 
-    onPress={() => setPaused(!paused)} 
-  />
-</>
-```
+Check for heavy renders in parent components
 
-## Troubleshooting 🛠️
+Text not visible?
 
-**Animation not working?**
-- Verify Reanimated installation
-- Check babel.config.js for Reanimated plugin
+Verify container has explicit dimensions
 
-**Text not visible?**
-- Ensure container has proper dimensions
-- Verify text color contrasts with background
+Check text color contrast
 
-**Performance issues?**
-- Reduce animation speed
-- Simplify marquee content
-- Use `frameRate` prop to limit FPS
+Gesture not working?
 
-## Contributing 🤝
-Contributions are welcome! Please:
-1. Open an issue to discuss changes
-2. Ensure tests are updated
-3. Maintain consistent code style
+Confirm Gesture Handler installation
 
-## License 📄
-MIT © [Your Name](https://github.com/yourusername)
+Wrap root component with GestureHandlerRootView
 
-<button onclick="copyToClipboard()">Copy All README Content</button>
+Contributing 🤝
+We welcome contributions! Please:
 
-<script>
-function copyToClipboard() {
-  const content = document.querySelector('article').innerText;
-  navigator.clipboard.writeText(content)
-    .then(() => alert('README copied to clipboard!'))
-    .catch(err => console.error('Failed to copy:', err));
-}
-</script>
-```
+Fork the repository
+
+Create a feature branch
+
+Submit a pull request
+
+License 📄
+MIT © PARESH CHAVDA

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
@@ -15,9 +16,9 @@ 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";
+    mode?: AnimationMode;
     speed?: number;
     delay?: number;
     endPauseDuration?: number;
@@ -26,3 +27,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,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
  */
-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;
+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;
     // References for measurement
     var containerRef = useRef(null);
     var contentRef = useRef(null);
@@ -88,7 +88,7 @@ export 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));
         }
@@ -143,3 +143,4 @@ var styles = StyleSheet.create({
         flexShrink: 0,
     },
 });
+export default AutoScroll;

package/dist/MarqueeText.d.ts

@@ -1,112 +1,5 @@
 import * as React from 'react';
-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;
-}
+import { MarqueeTextRef, MarqueeTextProps, AnimationMode } from './constants';
 /**
  * MarqueeText component for scrolling text or content
  *
@@ -115,5 +8,6 @@ export interface MarqueeTextRef {
  * modes, and user interaction via gestures.
  */
 declare const MarqueeText: React.ForwardRefExoticComponent<MarqueeTextProps & React.RefAttributes<MarqueeTextRef>>;
-export { MarqueeText, AnimationMode };
-export type { MarqueeDirection, MarqueeTextProps };
+export default MarqueeText;
+export { AnimationMode };
+export type { MarqueeTextProps };

package/dist/MarqueeText.js

@@ -3,14 +3,7 @@ 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
- */
-var AnimationMode;
-(function (AnimationMode) {
-    AnimationMode["LOOP"] = "loop";
-    AnimationMode["BOUNCE"] = "bounce";
-})(AnimationMode || (AnimationMode = {}));
+import { AnimationMode } from './constants';
 /**
  * Component to render a child item in the marquee
  */
@@ -205,4 +198,5 @@ var styles = StyleSheet.create({
         position: 'relative',
     },
 });
-export { MarqueeText, AnimationMode };
+export default MarqueeText;
+export { AnimationMode };

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

@@ -1,5 +1,18 @@
-import { AutoScroll } from './AutoScroll';
-import { MarqueeText } from './MarqueeText';
-import { AnimationMode } from './constants';
-export { AutoScroll, AnimationMode, MarqueeText };
-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?: 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("./constants").MarqueeTextProps & import("react").RefAttributes<import("./constants").MarqueeTextRef>>;
+    AnimationMode: typeof AnimationMode;
+};
+export default Marquee;

package/dist/index.js

@@ -1,5 +1,10 @@
-import { AutoScroll } from './AutoScroll';
-import { MarqueeText } from './MarqueeText';
-import { AnimationMode } from './constants';
-export { AutoScroll, AnimationMode, MarqueeText };
-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.4",
+    "version": "2.0.6",
     "description": "A customizable marquee (scrolling) text component for React Native",
     "main": "index.js",
     "types": "index.d.ts",