rn-marquee-text 2.1.1-beta.1 → 2.1.2-beta.1

package/dist/MarqueeText.d.ts

@@ -1,119 +1,33 @@
 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;
 }
-/**
- * MarqueeText component for scrolling text or content
- *
- * This component creates a scrolling effect for text or other content.
- * It supports both horizontal and vertical scrolling, different animation
- * modes, and user interaction via gestures.
- */
 declare const MarqueeText: React.ForwardRefExoticComponent<MarqueeTextProps & React.RefAttributes<MarqueeTextRef>>;
 export { AnimationMode };
 export type { MarqueeDirection, MarqueeTextProps };

package/dist/MarqueeText.js

@@ -2,17 +2,11 @@ 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";
-/**
- * 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
- */
 var AnimatedChild = React.memo(function (_a) {
     var index = _a.index, children = _a.children, anim = _a.anim, contentMeasurement = _a.contentMeasurement, spacing = _a.spacing, direction = _a.direction;
     var style = useAnimatedStyle(function () {
@@ -36,21 +30,9 @@ var AnimatedChild = React.memo(function (_a) {
     }, [index, spacing, contentMeasurement, direction]);
     return <Animated.View style={style}>{children}</Animated.View>;
 });
-/**
- * MarqueeText component for scrolling text or content
- *
- * This component creates a scrolling effect for text or other content.
- * It supports both horizontal and vertical scrolling, different animation
- * modes, and user interaction via gestures.
- */
 var MarqueeText = React.forwardRef(function (_a, ref) {
     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, style = _a.style, textStyle = _a.textStyle, _f = _a.enabled, enabled = _f === void 0 ? true : _f, _g = _a.direction, direction = _g === void 0 ? "horizontal" : _g, _h = _a.spacing, spacing = _h === void 0 ? 20 : _h, _j = _a.withGesture, withGesture = _j === void 0 ? true : _j, frameRate = _a.frameRate, _k = _a.reverse, reverse = _k === void 0 ? false : _k, _l = _a.backgroundColor, backgroundColor = _l === void 0 ? "transparent" : _l, onAnimationStart = _a.onAnimationStart, onAnimationStop = _a.onAnimationStop;
-    var _m = React.useState({
-        width: 0,
-        height: 0,
-    }), contentSize = _m[0], setContentSize = _m[1];
     var isVertical = direction === "vertical";
-    var isBounceMode = mode === AnimationMode.BOUNCE;
     var containerMeasurement = useSharedValue({
         width: 0,
         height: 0,
@@ -63,13 +45,12 @@ var MarqueeText = React.forwardRef(function (_a, ref) {
         x: 0,
         y: 0,
     });
-    var _o = React.useState(0), cloneTimes = _o[0], setCloneTimes = _o[1];
+    var _m = React.useState(0), cloneTimes = _m[0], setCloneTimes = _m[1];
     var anim = useSharedValue(0);
     var isMounted = React.useRef(true);
     var isActive = useSharedValue(false);
-    var frameRateMs = frameRate ? 1000 / frameRate : 1000 / 60; // Default to 60fps
-    var pixelsPerMs = speed / 1000;
-    // Animation frame callback
+    var frameRateMs = frameRate ? 1000 / frameRate : 1000 / 60;
+    var pixelsPerMs = speed / 10;
     var frameCallback = useFrameCallback(function (frameInfo) {
         if (!enabled || frameInfo.timeSincePreviousFrame === null)
             return;
@@ -78,7 +59,6 @@ var MarqueeText = React.forwardRef(function (_a, ref) {
             : frameInfo.timeSincePreviousFrame;
         anim.value += (reverse ? -1 : 1) * pixelsPerMs * deltaTime;
     }, false);
-    // Calculate how many clones we need to fill the screen
     useAnimatedReaction(function () {
         var contentDim = isVertical
             ? contentMeasurement.value.height
@@ -88,14 +68,12 @@ var MarqueeText = React.forwardRef(function (_a, ref) {
             : containerMeasurement.value.width;
         if (contentDim <= 0 || containerDim <= 0)
             return 0;
-        // Need enough clones to fill the container plus buffer for continuous scrolling
         return Math.ceil(containerDim / contentDim) + 2;
     }, function (times) {
         if (times > 0 && isMounted.current) {
             runOnJS(setCloneTimes)(times);
         }
     }, [direction]);
-    // Control functions
     var start = React.useCallback(function () {
         if (!enabled)
             return;
@@ -108,7 +86,6 @@ var MarqueeText = React.forwardRef(function (_a, ref) {
         isActive.value = false;
         onAnimationStop === null || onAnimationStop === void 0 ? void 0 : onAnimationStop();
     }, [frameCallback, onAnimationStop]);
-    // Expose controls via ref
     React.useImperativeHandle(ref, function () { return ({
         start: start,
         stop: stop,
@@ -116,80 +93,71 @@ var MarqueeText = React.forwardRef(function (_a, ref) {
             return isActive.value;
         },
     }); });
-    // Setup gesture handling
     var pan = React.useMemo(function () {
         return Gesture.Pan()
             .enabled(withGesture && enabled)
-            .onBegin(function () {
-            // Stop auto-animation when user interacts
-            runOnJS(stop)();
-        })
+            .onBegin(function () { return runOnJS(stop)(); })
             .onChange(function (e) {
-            // Move according to user's gesture
             anim.value += -(isVertical ? e.changeY : e.changeX);
         })
             .onFinalize(function (e) {
-            // Apply momentum scrolling when user releases
             anim.value = withDecay({
                 velocity: -(isVertical ? e.velocityY : e.velocityX),
             }, function (finished) {
-                // Restart auto-animation when decay finishes
                 if (finished)
                     runOnJS(start)();
             });
         });
     }, [withGesture, isVertical, anim, start, stop, 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) {
-            var timer_1 = setTimeout(function () {
-                start();
-            }, delay);
+            var timer_1 = setTimeout(function () { return start(); }, delay);
             return function () { return clearTimeout(timer_1); };
         }
         else {
             stop();
         }
     }, [enabled, start, stop, delay]);
-    // Render the content
     var renderContent = function () {
         if (typeof children === "string") {
-            return <Text style={textStyle}>{children}</Text>;
+            return (<Text style={[styles.defaultText, textStyle]} numberOfLines={1} ellipsizeMode="tail">
+            {children}
+          </Text>);
         }
-        return children;
+        return (<View style={styles.childContainer}>
+          {children}
+        </View>);
     };
     return (<Animated.View style={[
             styles.container,
             { backgroundColor: backgroundColor },
             style,
             {
-                height: isVertical && contentMeasurement.value.height > 0
-                    ? contentMeasurement.value.height
-                    : undefined,
-                width: !isVertical && contentMeasurement.value.width > 0
-                    ? contentMeasurement.value.width
-                    : undefined,
+                minHeight: isVertical ? 20 : undefined,
+                minWidth: !isVertical ? 20 : undefined,
+                height: isVertical ? 'auto' : undefined,
+                width: !isVertical ? 'auto' : undefined,
             },
         ]} onLayout={function (ev) {
             containerMeasurement.value = ev.nativeEvent.layout;
         }} pointerEvents="box-none">
         <GestureDetector gesture={pan}>
-          <Animated.View style={isVertical ? styles.column : styles.row} pointerEvents="box-none">
-            {/* Hidden element for measuring original content size */}
+          <Animated.View style={[
+            isVertical ? styles.column : styles.row,
+            styles.contentWrapper,
+        ]} pointerEvents="box-none">
             <View style={styles.hidden} onLayout={function (ev) {
             contentMeasurement.value = ev.nativeEvent.layout;
         }}>
               {renderContent()}
             </View>
 
-            {/* Visible cloned elements */}
             {cloneTimes > 0 &&
             Array.from({ length: cloneTimes }).map(function (_, index) { return (<AnimatedChild key={"clone-".concat(index)} index={index} anim={anim} contentMeasurement={contentMeasurement} spacing={spacing} direction={direction}>
                   {renderContent()}
@@ -210,10 +178,24 @@ var styles = StyleSheet.create({
     row: {
         flexDirection: "row",
         position: "relative",
+        alignItems: 'center',
     },
     column: {
         flexDirection: "column",
         position: "relative",
+        justifyContent: 'center',
+    },
+    contentWrapper: {
+        flexShrink: 1,
+    },
+    defaultText: {
+        fontSize: 16,
+        color: 'black',
+        includeFontPadding: false,
+        textAlignVertical: 'center',
+    },
+    childContainer: {
+        flexShrink: 1,
     },
 });
 export { AnimationMode };

package/package.json

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