rn-marquee-text 2.0.1 → 2.0.2

package/README.md

@@ -1,51 +1,55 @@
 # React Native Marquee Text
 
-A highly customizable package for implementing smooth auto-scrolling and marquee text components in React Native applications. This package works seamlessly in both React Native and Expo environments.
 
-## Features
-- 🚀 Smooth scrolling animations powered by React Native Reanimated
-- 💯 Works perfectly in both React Native and Expo environments
-- 🔄 Multiple animation modes (continuous loop and bounce)
-- ⚙️ Customizable speed, delay, and styling options
-- 📱 No external dependencies other than React Native Reanimated
-- ⚡ Optimized performance with native animations
-- 📏 Auto-detects when scrolling is needed (text larger than container)
-- ↔️ Supports both horizontal and vertical scrolling
-- 📰 Includes a dedicated MarqueeText component for text tickers
+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.
 
-## Installation
+![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)
+
+## 🚀 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
+
+## 📦 Installation
 
 ```bash
-# Using npm
+# React Native CLI
 npm install rn-marquee-text react-native-reanimated
 
-# Using yarn
+# OR using yarn
 yarn add rn-marquee-text react-native-reanimated
 ```
 
-### Expo Projects
-For Expo projects, make sure you have Reanimated installed:
+### Expo Users
 
 ```bash
 expo install react-native-reanimated
 ```
 
-Then, add the Babel plugin to your babel.config.js:
+Then update your `babel.config.js`:
 
-```javascript
+```js
 module.exports = {
   presets: ['babel-preset-expo'],
   plugins: ['react-native-reanimated/plugin'],
 };
 ```
 
-## Components
+## 🧱 Components
 
-### 1. AutoScroll
-A versatile component for scrolling any content (text or components) that overflows its container.
+### 1️⃣ AutoScroll — Scroll any overflowed content
 
 #### Basic Usage
-```jsx
+
+```tsx
 import AutoScroll, { AnimationMode } from 'rn-marquee-text';
 
 const Example = () => (
@@ -54,80 +58,85 @@ const Example = () => (
     mode={AnimationMode.LOOP}
     speed={40}
   >
-    This is a long text that will automatically scroll when it's larger than 
-    the container. The component automatically detects if scrolling is needed.
+    This is a long text that will scroll if it overflows its container.
   </AutoScroll>
 );
 ```
 
 #### Props
+
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| children | ReactNode | (required) | Content to be scrolled |
-| mode | AnimationMode or string | 'loop' | Animation mode: 'loop' or 'bounce' |
-| speed | number | 30 | Speed of scrolling in pixels per second |
-| delay | number | 1500 | Delay in milliseconds before starting the animation |
-| endPauseDuration | number | 1000 | Duration to pause at the ends (only for bounce mode) |
-| style | ViewStyle | {} | Style for the container |
-| textStyle | TextStyle | {} | Style for the text (when children is a string) |
-| enabled | boolean | true | Whether to enable the animation |
-| direction | string | 'vertical' | Direction of scroll: 'horizontal' or 'vertical' |
-
-### 2. MarqueeText
-A specialized component for creating ticker/marquee text effects, perfect for news tickers, announcements, or notifications.
+| 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
-```jsx
+
+```tsx
 import { MarqueeText } from 'rn-marquee-text';
+import { View, Text } from 'react-native';
 
 const Example = () => (
   <View style={{ width: '100%', borderRadius: 8, overflow: 'hidden' }}>
     <MarqueeText
-      text="Breaking News: This is a full-width marquee text component that scrolls horizontally"
       speed={100}
-      backgroundColor="#7b341e"
-      textColor="#fffaf0"
-      fontSize={18}
-    />
+      backgroundColor="#1a365d"
+      textColor="#f0f4f8"
+      fontSize={14}
+      direction="horizontal"
+    >
+      <Text>
+        Breaking News: This is a marquee text scrolling horizontally!
+      </Text>
+    </MarqueeText>
   </View>
 );
 ```
 
 #### Props
+
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
-| text | string | (required) | Text content to scroll |
-| speed | number | 80 | Speed of scrolling in pixels per second |
-| backgroundColor | string | '#000' | Background color of the marquee container |
-| textColor | string | '#fff' | Text color |
-| fontSize | number | 16 | Font size of the text |
-| paddingVertical | number | 8 | Vertical padding inside the marquee |
-| paddingHorizontal | number | 12 | Horizontal padding inside the marquee |
-| delay | number | 1000 | Delay in milliseconds before starting animation |
-| bounceMode | boolean | false | Whether to use bounce animation |
-| endPauseDuration | number | 2000 | Pause duration at each end (only when bounceMode is true) |
-
-## Advanced Examples
-
-### AutoScroll with Custom Content
-```jsx
+| 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 = () => {
-  return (
-    <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 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: {
@@ -154,26 +163,22 @@ const styles = StyleSheet.create({
 });
 ```
 
-### News Ticker with MarqueeText
-```jsx
+### 📰 News Ticker with MarqueeText
+
+```tsx
 import React from 'react';
-import { View, StyleSheet } from 'react-native';
+import { View, Text, StyleSheet } from 'react-native';
 import { MarqueeText } from 'rn-marquee-text';
 
-const NewsTicker = () => {
-  return (
-    <View style={styles.tickerContainer}>
-      <MarqueeText
-        text="BREAKING NEWS: Latest updates on global events. Markets reach all-time high. New technological breakthroughs announced."
-        speed={70}
-        backgroundColor="#1a365d"
-        textColor="#ffffff"
-        fontSize={16}
-        bounceMode={false}
-      />
-    </View>
-  );
-};
+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>
+    </MarqueeText>
+  </View>
+);
 
 const styles = StyleSheet.create({
   tickerContainer: {
@@ -182,36 +187,47 @@ const styles = StyleSheet.create({
     overflow: 'hidden',
     marginVertical: 10,
   },
+  cardText: {
+    fontSize: 14,
+    paddingHorizontal: 10,
+  },
 });
 ```
 
-## Tips for Optimal Performance
-- Adjust speed based on content length: Longer content might benefit from faster speeds.
-- Use appropriate delays: Give your users time to notice the content before it starts scrolling.
-- Consider bounce mode for important information: The back-and-forth animation can draw more attention.
-- Limit the number of simultaneous scrolling components: Too many can impact performance.
-- Test on lower-end devices: Ensure smooth animations across various device capabilities.
+## 🛠️ Tips for Optimal Performance
 
-## Troubleshooting
+- 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
 
-### Text Not Scrolling
-- Make sure the text is actually larger than its container
-- Check that enabled prop is not set to false
-- Try increasing the container's overflow: 'hidden' style
+## 🧩 Troubleshooting
 
-### Animation Feels Choppy
-- Use the useNativeDriver: true option if available
-- Reduce the number of simultaneously animating components
-- Simplify your component tree structure
+### ❌ 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
 
-## License
 MIT
 
-## Contributing
-Contributions are welcome! Please feel free to submit a Pull Request.
+## 🤝 Contributing
+
+Pull requests welcome!
+
+Steps:
 
-1. Fork the project
-2. Create your feature branch (`git checkout -b feature/amazing-feature`)
-3. Commit your changes (`git commit -m 'Add some amazing feature'`)
-4. Push to the branch (`git push origin feature/amazing-feature`)
-5. Open a Pull Request
+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

package/package.json

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