rn-marquee-text 2.0.4 → 2.0.5

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

@@ -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

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

package/dist/MarqueeText.js

@@ -205,4 +205,5 @@ var styles = StyleSheet.create({
         position: 'relative',
     },
 });
-export { MarqueeText, AnimationMode };
+export default MarqueeText;
+export { 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?: "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 { 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.5",
     "description": "A customizable marquee (scrolling) text component for React Native",
     "main": "index.js",
     "types": "index.d.ts",