rn-marquee-text 1.0.2 → 1.0.4

package/dist/MarqueeText.d.ts

@@ -1,16 +1,10 @@
 import React from 'react';
-import { ViewStyle } from 'react-native';
-type MarqueeMode = 'loop' | 'bounce' | 'once';
-interface MarqueeTextProps {
+import { TextStyle } from 'react-native';
+import { ViewStyle } from 'react-native/Libraries/StyleSheet/StyleSheetTypes';
+declare const MarqueeText: ({ text, speed, containerStyle, textStyle }: {
     text: string;
     speed?: number;
-    delay?: number;
-    fontSize?: number;
-    textColor?: string;
-    style?: ViewStyle;
-    fontFamily?: string;
-    pauseDuration?: number;
-    mode?: MarqueeMode;
-}
-declare const MarqueeText: React.FC<MarqueeTextProps>;
+    containerStyle?: ViewStyle;
+    textStyle?: TextStyle;
+}) => React.JSX.Element;
 export default MarqueeText;

package/dist/MarqueeText.js

@@ -1,73 +1,48 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import React, { useEffect } from 'react';
-import { View, Text, StyleSheet, } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, withRepeat, withSequence, withDelay, cancelAnimation, Easing, } from 'react-native-reanimated';
+import React, { useRef, useEffect, useState } from 'react';
+import { Animated, View, Text, StyleSheet, } from 'react-native';
 var MarqueeText = function (_a) {
-    var text = _a.text, _b = _a.speed, speed = _b === void 0 ? 40 : _b, _c = _a.delay, delay = _c === void 0 ? 1000 : _c, _d = _a.fontSize, fontSize = _d === void 0 ? 16 : _d, _e = _a.textColor, textColor = _e === void 0 ? '#333333' : _e, _f = _a.style, style = _f === void 0 ? {} : _f, fontFamily = _a.fontFamily, _g = _a.mode, mode = _g === void 0 ? 'loop' : _g;
-    var offset = useSharedValue(0);
-    var containerWidth = useSharedValue(0);
-    var textWidth = useSharedValue(0);
-    var onContainerLayout = function (event) {
-        containerWidth.value = event.nativeEvent.layout.width;
-        if (textWidth.value > 0)
-            startAnimation();
-    };
-    var onTextLayout = function (event) {
-        textWidth.value = event.nativeEvent.layout.width;
-        if (containerWidth.value > 0)
-            startAnimation();
-    };
-    var startAnimation = function () {
-        if (textWidth.value <= containerWidth.value)
-            return;
-        var distance = textWidth.value + containerWidth.value / 3;
-        var duration = (distance / speed) * 1000;
-        if (mode === 'bounce') {
-            offset.value = withDelay(delay, withRepeat(withSequence(withTiming(-distance, {
-                duration: duration,
-                easing: Easing.linear,
-            }), withTiming(0, {
-                duration: duration,
-                easing: Easing.linear,
-            })), -1, false));
-        }
-        else if (mode === 'once') {
-            offset.value = withDelay(delay, withTiming(-distance, {
-                duration: duration,
-                easing: Easing.linear,
-            }));
-        }
-        else {
-            offset.value = withDelay(delay, withRepeat(withSequence(withTiming(-distance, {
-                duration: duration,
-                easing: Easing.linear,
-            }), withTiming(containerWidth.value, { duration: 0 })), -1, false));
+    var text = _a.text, _b = _a.speed, speed = _b === void 0 ? 50 : _b, _c = _a.containerStyle, containerStyle = _c === void 0 ? {} : _c, _d = _a.textStyle, textStyle = _d === void 0 ? {} : _d;
+    // Animation value for text position
+    var scrollX = useRef(new Animated.Value(0)).current;
+    // State for container and text measurements
+    var _e = useState(0), containerWidth = _e[0], setContainerWidth = _e[1];
+    var _f = useState(0), textWidth = _f[0], setTextWidth = _f[1];
+    // Start animation when we have both widths
+    useEffect(function () {
+        if (containerWidth > 0 && textWidth > 0) {
+            // Only animate if text is wider than container
+            if (textWidth > containerWidth) {
+                startAnimation();
+            }
         }
+    }, [containerWidth, textWidth]);
+    // Animation function
+    var startAnimation = function () {
+        // Reset to starting position
+        scrollX.setValue(containerWidth);
+        // Create animation
+        Animated.timing(scrollX, {
+            toValue: -textWidth, // Move text completely off screen to the left
+            duration: (textWidth + containerWidth) / speed * 1000, // Time based on distance and speed
+            useNativeDriver: true, // This is crucial for performance
+        }).start(function (_a) {
+            var finished = _a.finished;
+            // When animation completes, restart it
+            if (finished) {
+                startAnimation();
+            }
+        });
     };
-    var animatedTextStyle = useAnimatedStyle(function () { return ({
-        transform: [{ translateX: offset.value }],
-    }); });
-    useEffect(function () {
-        return function () {
-            cancelAnimation(offset);
-        };
-    }, []);
-    var textStyle = __assign({ fontSize: fontSize, color: textColor }, (fontFamily ? { fontFamily: fontFamily } : {}));
-    return (<View style={[styles.container, style]} onLayout={onContainerLayout}>
-      <Animated.View style={animatedTextStyle}>
-        <Text style={textStyle} onLayout={onTextLayout} numberOfLines={1}>
+    return (<View style={[styles.container, containerStyle]} onLayout={function (event) {
+            setContainerWidth(event.nativeEvent.layout.width);
+        }}>
+      <Animated.View style={{
+            transform: [{ translateX: scrollX }]
+        }}>
+        <Text style={[styles.text, textStyle]} onLayout={function (event) {
+            setTextWidth(event.nativeEvent.layout.width);
+        }}>
           {text}
-          {mode === 'loop' && '   '}
         </Text>
       </Animated.View>
     </View>);
@@ -75,6 +50,13 @@ var MarqueeText = function (_a) {
 var styles = StyleSheet.create({
     container: {
         overflow: 'hidden',
+        backgroundColor: 'black',
+        height: 40,
+        justifyContent: 'center',
+    },
+    text: {
+        color: 'white',
+        fontSize: 16,
     },
 });
 export default MarqueeText;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "rn-marquee-text",
-    "version": "1.0.2",
+    "version": "1.0.4",
     "description": "A customizable marquee (scrolling) text component for React Native",
     "main": "index.js",
     "types": "index.d.ts",
@@ -45,8 +45,11 @@
         "@types/react": "^19.1.2",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
-        "react-native": "^0.72.6",
+        "react-native": "^0.72.17",
         "react-native-reanimated": "^3.17.5",
         "typescript": "^5.0.0"
+    },
+    "dependencies": {
+        "react-native-gesture-handler": "^2.25.0"
     }
 }