rn-marquee-text 2.0.8 → 2.1.0-beta.1

package/dist/MarqueeText.d.ts

@@ -1,5 +1,5 @@
-import * as React from 'react';
-import { ViewStyle, TextStyle } from 'react-native';
+import * as React from "react";
+import { ViewStyle, TextStyle } from "react-native";
 /**
  * Animation modes for the marquee text
  */
@@ -10,7 +10,7 @@ declare enum AnimationMode {
 /**
  * Direction of the marquee animation
  */
-type MarqueeDirection = 'horizontal' | 'vertical';
+type MarqueeDirection = "horizontal" | "vertical";
 /**
  * Props for the MarqueeText component
  */

package/dist/MarqueeText.js

@@ -1,7 +1,7 @@
-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';
+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
  */
@@ -17,16 +17,18 @@ 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 () {
         var _a;
-        var isVertical = direction === 'vertical';
-        var dimension = isVertical ? contentMeasurement.value.height : contentMeasurement.value.width;
+        var isVertical = direction === "vertical";
+        var dimension = isVertical
+            ? contentMeasurement.value.height
+            : contentMeasurement.value.width;
         if (dimension <= 0)
             return {};
         var position = (index - 1) * (dimension + spacing);
         var translation = -(anim.value % (dimension + spacing));
         return _a = {
-                position: 'absolute'
+                position: "absolute"
             },
-            _a[isVertical ? 'top' : 'left'] = position,
+            _a[isVertical ? "top" : "left"] = position,
             _a.transform = isVertical
                 ? [{ translateY: translation }]
                 : [{ translateX: translation }],
@@ -42,8 +44,12 @@ var AnimatedChild = React.memo(function (_a) {
  * 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 isVertical = direction === 'vertical';
+    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,
@@ -57,7 +63,7 @@ var MarqueeText = React.forwardRef(function (_a, ref) {
         x: 0,
         y: 0,
     });
-    var _m = React.useState(0), cloneTimes = _m[0], setCloneTimes = _m[1];
+    var _o = React.useState(0), cloneTimes = _o[0], setCloneTimes = _o[1];
     var anim = useSharedValue(0);
     var isMounted = React.useRef(true);
     var isActive = useSharedValue(false);
@@ -74,8 +80,12 @@ var MarqueeText = React.forwardRef(function (_a, ref) {
     }, false);
     // Calculate how many clones we need to fill the screen
     useAnimatedReaction(function () {
-        var contentDim = isVertical ? contentMeasurement.value.height : contentMeasurement.value.width;
-        var containerDim = isVertical ? containerMeasurement.value.height : containerMeasurement.value.width;
+        var contentDim = isVertical
+            ? contentMeasurement.value.height
+            : contentMeasurement.value.width;
+        var containerDim = isVertical
+            ? containerMeasurement.value.height
+            : containerMeasurement.value.width;
         if (contentDim <= 0 || containerDim <= 0)
             return 0;
         // Need enough clones to fill the container plus buffer for continuous scrolling
@@ -102,7 +112,9 @@ var MarqueeText = React.forwardRef(function (_a, ref) {
     React.useImperativeHandle(ref, function () { return ({
         start: start,
         stop: stop,
-        get isActive() { return isActive.value; }
+        get isActive() {
+            return isActive.value;
+        },
     }); });
     // Setup gesture handling
     var pan = React.useMemo(function () {
@@ -148,7 +160,7 @@ var MarqueeText = React.forwardRef(function (_a, ref) {
     }, [enabled, start, stop, delay]);
     // Render the content
     var renderContent = function () {
-        if (typeof children === 'string') {
+        if (typeof children === "string") {
             return <Text style={textStyle}>{children}</Text>;
         }
         return children;
@@ -156,9 +168,26 @@ var MarqueeText = React.forwardRef(function (_a, ref) {
     return (<Animated.View style={[
             styles.container,
             { backgroundColor: backgroundColor },
-            style
+            style,
+            {
+                height: isVertical && contentSize.height > 0
+                    ? contentSize.height
+                    : isVertical
+                        ? 20 // fallback height
+                        : undefined,
+                width: !isVertical && contentSize.width > 0
+                    ? contentSize.width
+                    : !isVertical
+                        ? 100 // fallback width
+                        : undefined,
+            },
         ]} onLayout={function (ev) {
-            containerMeasurement.value = ev.nativeEvent.layout;
+            var layout = ev.nativeEvent.layout;
+            contentMeasurement.value = layout;
+            runOnJS(setContentSize)({
+                width: layout.width,
+                height: layout.height,
+            });
         }} pointerEvents="box-none">
         <GestureDetector gesture={pan}>
           <Animated.View style={isVertical ? styles.column : styles.row} pointerEvents="box-none">
@@ -168,7 +197,7 @@ var MarqueeText = React.forwardRef(function (_a, ref) {
         }}>
               {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}>
@@ -180,20 +209,20 @@ var MarqueeText = React.forwardRef(function (_a, ref) {
 });
 var styles = StyleSheet.create({
     container: {
-        overflow: 'hidden',
+        overflow: "hidden",
     },
     hidden: {
         opacity: 0,
-        position: 'absolute',
+        position: "absolute",
         zIndex: -1,
     },
     row: {
-        flexDirection: 'row',
-        position: 'relative',
+        flexDirection: "row",
+        position: "relative",
     },
     column: {
-        flexDirection: 'column',
-        position: 'relative',
+        flexDirection: "column",
+        position: "relative",
     },
 });
 export { AnimationMode };

package/package.json

@@ -1,58 +1,60 @@
 {
-    "name": "rn-marquee-text",
-    "version": "2.0.8",
-    "description": "A customizable marquee (scrolling) text component for React Native",
-    "main": "index.js",
-    "types": "index.d.ts",
-    "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1",
-        "build": "tsc",
-        "prepare": "npm run build"
-    },
-    "files": [
-        "dist",
-        "index.js",
-        "README.md",
-        "index.d.ts"
-    ],
-    "keywords": [
-        "react-native",
-        "marquee",
-        "scrolling-text",
-        "text",
-        "animation",
-        "react-native-component",
-        "react",
-        "native",
-        "expo"
-    ],
-    "author": "Paresh Chavda",
-    "license": "MIT",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/pareshchavda/rn-marquee-text-public.git"
-    },
-    "bugs": {
-        "url": "https://github.com/pareshchavda/rn-marquee-text-public/issues"
-    },
-    "homepage": "https://github.com/pareshchavda/rn-marquee-text-public#readme",
-    "peerDependencies": {
-        "prop-types": ">=15.0.0",
-        "react": "*",
-        "react-native": "*",
-        "react-native-reanimated": ">=2.0.0"
-    },
-    "devDependencies": {
-        "@types/react": "^19.1.2",
-        "prop-types": "^15.8.1",
-        "react": "^18.2.0",
-        "react-native": "^0.72.17",
-        "react-native-reanimated": "^3.17.5",
-        "typescript": "^5.0.0"
-    },
-    "dependencies": {
-        "@react-navigation/native": "^7.1.9",
-        "react-native-gesture-handler": "^2.25.0",
-        "rn-marquee-text": "^1.0.7"
-    }
+  "name": "rn-marquee-text",
+  "version": "2.1.0-beta.1",
+  "description": "A customizable marquee (scrolling) text component for React Native",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "tsc",
+    "prepare": "npm run build"
+  },
+  "publishConfig": {
+    "tag": "beta"
+  },
+  "files": [
+    "dist",
+    "index.js",
+    "README.md",
+    "index.d.ts"
+  ],
+  "keywords": [
+    "react-native",
+    "marquee",
+    "scrolling-text",
+    "text",
+    "animation",
+    "react-native-component",
+    "react",
+    "native",
+    "expo"
+  ],
+  "author": "Paresh Chavda",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/pareshchavda/rn-marquee-text-public.git"
+  },
+  "bugs": {
+    "url": "https://github.com/pareshchavda/rn-marquee-text-public/issues"
+  },
+  "homepage": "https://github.com/pareshchavda/rn-marquee-text-public#readme",
+  "peerDependencies": {
+    "prop-types": ">=15.0.0",
+    "react": "*",
+    "react-native": "*",
+    "react-native-reanimated": ">=2.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.2",
+    "prop-types": "^15.8.1",
+    "react": "^18.2.0",
+    "react-native": "^0.72.17",
+    "react-native-reanimated": "^3.17.5",
+    "typescript": "^5.0.0"
+  },
+  "dependencies": {
+    "@react-navigation/native": "^7.1.9",
+    "react-native-gesture-handler": "^2.25.0"
+  }
 }