rn-marquee-text 2.0.2 → 2.0.3

package/dist/MarqueeText.d.ts

@@ -1,14 +1,46 @@
-import React from 'react';
-declare const MarqueeText: ({ text, speed, backgroundColor, textColor, fontSize, paddingVertical, paddingHorizontal, delay, bounceMode, endPauseDuration, }: {
-    text: string;
+import * as React from 'react';
+import type { ViewStyle } from 'react-native';
+import type { SharedValue } from 'react-native-reanimated';
+type MarqueeDirection = 'horizontal' | 'vertical';
+export type MarqueeProps = React.PropsWithChildren<{
     speed?: number;
-    backgroundColor?: string;
-    textColor?: string;
-    fontSize?: number;
-    paddingVertical?: number;
-    paddingHorizontal?: number;
-    delay?: number;
-    bounceMode?: boolean;
-    endPauseDuration?: number;
-}) => React.JSX.Element;
-export default MarqueeText;
+    spacing?: number;
+    style?: ViewStyle;
+    reverse?: boolean;
+    frameRate?: number;
+    direction?: MarqueeDirection;
+    position?: SharedValue<number>;
+    withGesture?: boolean;
+}>;
+export type MarqueeRef = {
+    start: () => void;
+    stop: () => void;
+    isActive: boolean;
+};
+/**
+ * Marquee component that animates its children in a continuous loop.
+ *
+ * @param speed - Animation speed (pixels per frame)
+ * @param spacing - Spacing between cloned elements
+ * @param style - Container style
+ * @param reverse - Reverse animation direction
+ * @param frameRate - Custom frame rate (optional)
+ * @param direction - Animation direction ('horizontal' or 'vertical')
+ * @param position - Optional shared value to track position
+ * @param withGesture - Enable/disable gesture interactions
+ * @param ref - Ref to control animation
+ * @param children - Child elements to animate
+ */
+export declare const Marquee: React.NamedExoticComponent<{
+    speed?: number;
+    spacing?: number;
+    style?: ViewStyle;
+    reverse?: boolean;
+    frameRate?: number;
+    direction?: MarqueeDirection;
+    position?: SharedValue<number>;
+    withGesture?: boolean;
+} & {
+    children?: React.ReactNode | undefined;
+} & React.RefAttributes<MarqueeRef>>;
+export {};

package/dist/MarqueeText.js

@@ -1,64 +1,276 @@
-// MarqueeText.js - Complete rewrite with guaranteed scrolling
-import React, { useEffect } from 'react';
-import { View } from 'react-native';
-import Animated, { useSharedValue, useAnimatedStyle, withRepeat, withTiming, withDelay, Easing, withSequence, } from 'react-native-reanimated';
-var MarqueeText = function (_a) {
-    var text = _a.text, _b = _a.speed, speed = _b === void 0 ? 60 : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#000' : _c, _d = _a.textColor, textColor = _d === void 0 ? '#fff' : _d, _e = _a.fontSize, fontSize = _e === void 0 ? 16 : _e, _f = _a.paddingVertical, paddingVertical = _f === void 0 ? 8 : _f, _g = _a.paddingHorizontal, paddingHorizontal = _g === void 0 ? 12 : _g, _h = _a.delay, delay = _h === void 0 ? 1000 : _h, _j = _a.bounceMode, bounceMode = _j === void 0 ? false : _j, _k = _a.endPauseDuration, endPauseDuration = _k === void 0 ? 2000 : _k;
-    // Force a larger content width to ensure scrolling always happens
-    // In real usage, we would measure dynamically, but this ensures it works
-    var contentWidth = text.length * (fontSize * 0.6);
-    var scrollX = useSharedValue(0);
-    useEffect(function () {
-        // Give layout time to complete
-        var timeoutId = setTimeout(function () {
-            if (bounceMode) {
-                // Bounce animation (back and forth with pauses)
-                scrollX.value = withDelay(delay, withRepeat(withSequence(withTiming(-contentWidth, {
-                    duration: contentWidth * (1000 / speed),
-                    easing: Easing.linear
-                }), withTiming(-contentWidth, {
-                    duration: endPauseDuration,
-                    easing: Easing.linear
-                }), withTiming(0, {
-                    duration: contentWidth * (1000 / speed),
-                    easing: Easing.linear
-                }), withTiming(0, {
-                    duration: endPauseDuration,
-                    easing: Easing.linear
-                })), -1, // Infinite repeats
-                false));
-            }
-            else {
-                // Standard loop animation
-                scrollX.value = withDelay(delay, withRepeat(withTiming(-contentWidth, {
-                    duration: contentWidth * (1000 / speed),
-                    easing: Easing.linear
-                }), -1, // Infinite repeats
-                false));
-            }
-        }, 500);
-        return function () { return clearTimeout(timeoutId); };
-    }, [speed, delay, contentWidth, bounceMode, endPauseDuration]);
-    var animatedStyle = useAnimatedStyle(function () {
-        return {
-            transform: [{ translateX: scrollX.value }],
-        };
+// // MarqueeText.js - Complete rewrite with guaranteed scrolling
+// import React, { useEffect } from 'react';
+// import { Text, View } from 'react-native';
+// import Animated, {
+//   useSharedValue,
+//   useAnimatedStyle,
+//   withRepeat,
+//   withTiming,
+//   withDelay,
+//   Easing,
+//   withSequence,
+// } from 'react-native-reanimated';
+// const MarqueeText = ({
+//   text,
+//   speed = 60,
+//   backgroundColor = '#000',
+//   textColor = '#fff',
+//   fontSize = 16,
+//   paddingVertical = 8,
+//   paddingHorizontal = 12,
+//   delay = 1000,
+//   bounceMode = false,
+//   endPauseDuration = 2000,
+// }:{
+//   text: string;
+//   speed?: number;
+//   backgroundColor?: string;
+//   textColor?: string;
+//   fontSize?: number;
+//   paddingVertical?: number;
+//   paddingHorizontal?: number;
+//   delay?: number;
+//   bounceMode?: boolean;
+//   endPauseDuration?: number;
+// }) => {
+//   // Force a larger content width to ensure scrolling always happens
+//   // In real usage, we would measure dynamically, but this ensures it works
+//   const contentWidth = text.length * (fontSize * 0.6);  
+//   const scrollX = useSharedValue(0);
+//   useEffect(() => {
+//     // Give layout time to complete
+//     const timeoutId = setTimeout(() => {
+//       if (bounceMode) {
+//         // Bounce animation (back and forth with pauses)
+//         scrollX.value = withDelay(
+//           delay,
+//           withRepeat(
+//             withSequence(
+//               withTiming(-contentWidth, { 
+//                 duration: contentWidth * (1000 / speed), 
+//                 easing: Easing.linear 
+//               }),
+//               withTiming(-contentWidth, { 
+//                 duration: endPauseDuration, 
+//                 easing: Easing.linear 
+//               }),
+//               withTiming(0, { 
+//                 duration: contentWidth * (1000 / speed), 
+//                 easing: Easing.linear 
+//               }),
+//               withTiming(0, { 
+//                 duration: endPauseDuration, 
+//                 easing: Easing.linear 
+//               })
+//             ),
+//             -1, // Infinite repeats
+//             false
+//           )
+//         );
+//       } else {
+//         // Standard loop animation
+//         scrollX.value = withDelay(
+//           delay,
+//           withRepeat(
+//             withTiming(-contentWidth, { 
+//               duration: contentWidth * (1000 / speed), 
+//               easing: Easing.linear 
+//             }),
+//             -1, // Infinite repeats
+//             false
+//           )
+//         );
+//       }
+//     }, 500);
+//     return () => clearTimeout(timeoutId);
+//   }, [speed, delay, contentWidth, bounceMode, endPauseDuration]);
+//   const animatedStyle = useAnimatedStyle(() => {
+//     return {
+//       transform: [{ translateX: scrollX.value }],
+//     };
+//   });
+//   return (
+//     <View
+//       style={{
+//         backgroundColor,
+//         paddingVertical,
+//         paddingHorizontal,
+//         overflow: 'hidden',
+//       }}
+//     >
+//       <Animated.Text
+//         style={[
+//           {
+//             color: textColor,
+//             fontSize,
+//           },
+//           animatedStyle,
+//         ]}
+//         numberOfLines={1}
+//         // ellipsizeMode="tail"
+//       >
+//         {text}
+//       </Animated.Text>
+//     </View>
+//   );
+// };
+// export default MarqueeText;
+import * as React from 'react';
+import { StyleSheet, View } from 'react-native';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle, useDerivedValue, useFrameCallback, useSharedValue, withDecay, } from 'react-native-reanimated';
+import { useFocusEffect } from '@react-navigation/native';
+var AnimatedChild = React.memo(function (_a) {
+    var index = _a.index, children = _a.children, anim = _a.anim, textMeasurement = _a.textMeasurement, spacing = _a.spacing, direction = _a.direction;
+    var stylez = useAnimatedStyle(function () {
+        var _a;
+        var isVertical = direction === 'vertical';
+        var dimension = isVertical ? textMeasurement.value.height : textMeasurement.value.width;
+        if (dimension <= 0)
+            return {};
+        var position = (index - 1) * (dimension + spacing);
+        var translation = -(anim.value % (dimension + spacing));
+        return _a = {
+                position: 'absolute'
+            },
+            _a[isVertical ? 'top' : 'left'] = position,
+            _a.transform = [
+                {
+                    translateX: translation,
+                },
+            ],
+            _a;
+    }, [index, spacing, textMeasurement, direction]);
+    return <Animated.View style={stylez}>{children}</Animated.View>;
+});
+/**
+ * Marquee component that animates its children in a continuous loop.
+ *
+ * @param speed - Animation speed (pixels per frame)
+ * @param spacing - Spacing between cloned elements
+ * @param style - Container style
+ * @param reverse - Reverse animation direction
+ * @param frameRate - Custom frame rate (optional)
+ * @param direction - Animation direction ('horizontal' or 'vertical')
+ * @param position - Optional shared value to track position
+ * @param withGesture - Enable/disable gesture interactions
+ * @param ref - Ref to control animation
+ * @param children - Child elements to animate
+ */
+export var Marquee = React.memo(React.forwardRef(function (_a, ref) {
+    var _b = _a.speed, speed = _b === void 0 ? 1 : _b, children = _a.children, _c = _a.spacing, spacing = _c === void 0 ? 0 : _c, style = _a.style, _d = _a.reverse, reverse = _d === void 0 ? false : _d, frameRate = _a.frameRate, _e = _a.direction, direction = _e === void 0 ? 'horizontal' : _e, position = _a.position, _f = _a.withGesture, withGesture = _f === void 0 ? true : _f;
+    var isVertical = direction === 'vertical';
+    var parentMeasurement = useSharedValue({
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0,
+    });
+    var textMeasurement = useSharedValue({
+        width: 0,
+        height: 0,
+        x: 0,
+        y: 0,
+    });
+    var _g = React.useState(0), cloneTimes = _g[0], setCloneTimes = _g[1];
+    var anim = useSharedValue(0);
+    var isMounted = React.useRef(true);
+    var frameRateMs = frameRate ? 1000 / frameRate : null;
+    var frameCallback = useFrameCallback(function (frameInfo) {
+        if (frameInfo.timeSincePreviousFrame === null)
+            return;
+        var frameDelta = frameRateMs
+            ? frameInfo.timeSincePreviousFrame / frameRateMs
+            : 1;
+        anim.value += (reverse ? -1 : 1) * speed * frameDelta;
+    }, false);
+    useDerivedValue(function () {
+        if (position) {
+            position.value = anim.value;
+        }
     });
-    return (<View style={{
-            backgroundColor: backgroundColor,
-            paddingVertical: paddingVertical,
-            paddingHorizontal: paddingHorizontal,
-            overflow: 'hidden',
+    useAnimatedReaction(function () {
+        var textDim = isVertical ? textMeasurement.value.height : textMeasurement.value.width;
+        var parentDim = isVertical ? parentMeasurement.value.height : parentMeasurement.value.width;
+        if (textDim <= 0 || parentDim <= 0)
+            return 0;
+        return Math.ceil(parentDim / textDim) + 2;
+    }, function (times) {
+        if (times > 0 && isMounted.current) {
+            runOnJS(setCloneTimes)(times);
+        }
+    }, [direction]);
+    // Control functions
+    var start = React.useCallback(function () {
+        frameCallback.setActive(true);
+    }, [frameCallback]);
+    var stop = React.useCallback(function () {
+        frameCallback.setActive(false);
+    }, [frameCallback]);
+    React.useImperativeHandle(ref, function () { return ({
+        start: start,
+        stop: stop,
+        isActive: frameCallback.isActive,
+    }); });
+    var pan = React.useMemo(function () {
+        return Gesture.Pan()
+            .enabled(withGesture)
+            .onBegin(function () { return runOnJS(stop)(); })
+            .onChange(function (e) {
+            anim.value += -(isVertical ? e.changeY : e.changeX);
+        })
+            .onFinalize(function (e) {
+            anim.value = withDecay({
+                velocity: -(isVertical ? e.velocityY : e.velocityX),
+            }, function (finished) { return finished && runOnJS(start)(); });
+        });
+    }, [withGesture, isVertical, anim, start, stop]);
+    // Handle focus/unmount
+    useFocusEffect(React.useCallback(function () {
+        start();
+        return function () {
+            stop();
+            anim.value = 0;
+        };
+    }, [start, stop, anim]));
+    React.useEffect(function () {
+        return function () {
+            isMounted.current = false;
+        };
+    }, []);
+    return (<Animated.View style={style} onLayout={function (ev) {
+            parentMeasurement.value = ev.nativeEvent.layout;
+        }} pointerEvents="box-none">
+          <GestureDetector gesture={pan}>
+            <Animated.View style={isVertical ? styles.column : styles.row} pointerEvents="box-none">
+              <Animated.ScrollView horizontal={!isVertical} style={styles.hidden} pointerEvents="none">
+                <View onLayout={function (ev) {
+            textMeasurement.value = ev.nativeEvent.layout;
         }}>
-      <Animated.Text style={[
-            {
-                color: textColor,
-                fontSize: fontSize,
-            },
-            animatedStyle,
-        ]} numberOfLines={1}>
-        {text}
-      </Animated.Text>
-    </View>);
-};
-export default MarqueeText;
+                  {children}
+                </View>
+              </Animated.ScrollView>
+              
+              {cloneTimes > 0 &&
+            Array.from({ length: cloneTimes }).map(function (_, index) { return (<AnimatedChild key={"clone-".concat(index)} index={index} anim={anim} textMeasurement={textMeasurement} spacing={spacing} direction={direction}>
+                    {children}
+                  </AnimatedChild>); })}
+            </Animated.View>
+          </GestureDetector>
+        </Animated.View>);
+}));
+var styles = StyleSheet.create({
+    hidden: {
+        opacity: 0,
+        zIndex: -9999,
+        flex: 0, // Prevent ScrollView from expanding
+    },
+    row: {
+        flexDirection: 'row',
+        flex: 1,
+    },
+    column: {
+        flexDirection: 'column',
+        flex: 1,
+    },
+});

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 import { AutoScroll } from './AutoScroll';
+import { Marquee } from './MarqueeText';
 import { AnimationMode } from './constants';
-export { AutoScroll, AnimationMode };
+export { AutoScroll, AnimationMode, Marquee };
 export default AutoScroll;

package/dist/index.js

@@ -1,4 +1,5 @@
 import { AutoScroll } from './AutoScroll';
+import { Marquee } from './MarqueeText';
 import { AnimationMode } from './constants';
-export { AutoScroll, AnimationMode };
+export { AutoScroll, AnimationMode, Marquee };
 export default AutoScroll;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "rn-marquee-text",
-    "version": "2.0.2",
+    "version": "2.0.3",
     "description": "A customizable marquee (scrolling) text component for React Native",
     "main": "index.js",
     "types": "index.d.ts",
@@ -50,6 +50,7 @@
         "typescript": "^5.0.0"
     },
     "dependencies": {
+        "@react-navigation/native": "^7.1.9",
         "react-native-gesture-handler": "^2.25.0",
         "rn-marquee-text": "^1.0.4"
     }