rn-marquee-text 1.0.2 → 1.0.3

package/dist/MarqueeText.d.ts

@@ -1,16 +1,15 @@
 import React from 'react';
 import { ViewStyle } from 'react-native';
-type MarqueeMode = 'loop' | 'bounce' | 'once';
-interface MarqueeTextProps {
+export interface MarqueeTextProps {
     text: string;
     speed?: number;
     delay?: number;
     fontSize?: number;
     textColor?: string;
     style?: ViewStyle;
+    bounce?: boolean;
     fontFamily?: string;
     pauseDuration?: number;
-    mode?: MarqueeMode;
 }
 declare const MarqueeText: React.FC<MarqueeTextProps>;
 export default MarqueeText;

package/dist/MarqueeText.js

@@ -1,19 +1,8 @@
-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 { View, Text, StyleSheet } from 'react-native';
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, withRepeat, Easing, cancelAnimation, } from 'react-native-reanimated';
 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 text = _a.text, _b = _a.speed, speed = _b === void 0 ? 40 : _b, _c = _a.fontSize, fontSize = _c === void 0 ? 16 : _c, _d = _a.textColor, textColor = _d === void 0 ? '#333' : _d, _e = _a.style, style = _e === void 0 ? {} : _e, fontFamily = _a.fontFamily;
     var offset = useSharedValue(0);
     var containerWidth = useSharedValue(0);
     var textWidth = useSharedValue(0);
@@ -30,44 +19,23 @@ var MarqueeText = function (_a) {
     var startAnimation = function () {
         if (textWidth.value <= containerWidth.value)
             return;
-        var distance = textWidth.value + containerWidth.value / 3;
+        var distance = textWidth.value + 30;
         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));
-        }
+        offset.value = withRepeat(withTiming(-distance, {
+            duration: duration,
+            easing: Easing.linear,
+        }), -1, false);
     };
-    var animatedTextStyle = useAnimatedStyle(function () { return ({
-        transform: [{ translateX: offset.value }],
-    }); });
     useEffect(function () {
-        return function () {
-            cancelAnimation(offset);
-        };
+        return function () { return cancelAnimation(offset); };
     }, []);
-    var textStyle = __assign({ fontSize: fontSize, color: textColor }, (fontFamily ? { fontFamily: fontFamily } : {}));
+    var animatedStyle = useAnimatedStyle(function () { return ({
+        transform: [{ translateX: offset.value }],
+    }); });
     return (<View style={[styles.container, style]} onLayout={onContainerLayout}>
-      <Animated.View style={animatedTextStyle}>
-        <Text style={textStyle} onLayout={onTextLayout} numberOfLines={1}>
+      <Animated.View style={animatedStyle}>
+        <Text style={[styles.text, { fontSize: fontSize, color: textColor, fontFamily: fontFamily }]} onLayout={onTextLayout}>
           {text}
-          {mode === 'loop' && '   '}
         </Text>
       </Animated.View>
     </View>);
@@ -76,5 +44,6 @@ var styles = StyleSheet.create({
     container: {
         overflow: 'hidden',
     },
+    text: {},
 });
 export default MarqueeText;

package/package.json

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