rn-marquee-text 2.0.5 → 2.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AutoScroll.d.ts +2 -1
- package/dist/AutoScroll.js +2 -2
- package/dist/MarqueeText.d.ts +2 -109
- package/dist/MarqueeText.js +1 -8
- package/dist/constants.d.ts +109 -4
- package/dist/constants.js +12 -4
- package/dist/index.d.ts +2 -2
- package/dist/index.js +1 -1
- package/package.json +1 -1
package/dist/AutoScroll.d.ts
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
import { TextStyle, ViewStyle } from 'react-native';
|
|
3
|
+
import { AnimationMode } from './constants';
|
|
3
4
|
/**
|
|
4
5
|
* AutoScroll component that measures its content and container
|
|
5
6
|
* dimensions and automatically sets up a scrolling animation if
|
|
@@ -17,7 +18,7 @@ import { TextStyle, ViewStyle } from 'react-native';
|
|
|
17
18
|
*/
|
|
18
19
|
declare const AutoScroll: ({ children, mode, speed, delay, endPauseDuration, style, textStyle, enabled, direction, }: {
|
|
19
20
|
children: React.ReactNode;
|
|
20
|
-
mode?:
|
|
21
|
+
mode?: AnimationMode;
|
|
21
22
|
speed?: number;
|
|
22
23
|
delay?: number;
|
|
23
24
|
endPauseDuration?: number;
|
package/dist/AutoScroll.js
CHANGED
|
@@ -18,7 +18,7 @@ import { AnimationMode } from './constants';
|
|
|
18
18
|
* @prop {'horizontal'|'vertical'} direction - The direction of the scrolling animation
|
|
19
19
|
*/
|
|
20
20
|
var AutoScroll = function (_a) {
|
|
21
|
-
var children = _a.children, _b = _a.mode, mode = _b === void 0 ?
|
|
21
|
+
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, _f = _a.style, style = _f === void 0 ? {} : _f, _g = _a.textStyle, textStyle = _g === void 0 ? {} : _g, _h = _a.enabled, enabled = _h === void 0 ? true : _h, _j = _a.direction, direction = _j === void 0 ? 'vertical' : _j;
|
|
22
22
|
// References for measurement
|
|
23
23
|
var containerRef = useRef(null);
|
|
24
24
|
var contentRef = useRef(null);
|
|
@@ -88,7 +88,7 @@ var AutoScroll = function (_a) {
|
|
|
88
88
|
console.log('Animation setup:', { distance: distance, duration: duration });
|
|
89
89
|
// Reset position
|
|
90
90
|
scrollPosition.value = 0;
|
|
91
|
-
if (mode === AnimationMode.LOOP
|
|
91
|
+
if (mode === AnimationMode.LOOP) {
|
|
92
92
|
// Continuous loop animation
|
|
93
93
|
scrollPosition.value = withDelay(delay, withRepeat(withTiming(-distance, { duration: duration, easing: Easing.linear }), -1, false));
|
|
94
94
|
}
|
package/dist/MarqueeText.d.ts
CHANGED
|
@@ -1,112 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
/**
|
|
4
|
-
* Animation modes for the marquee text
|
|
5
|
-
*/
|
|
6
|
-
declare enum AnimationMode {
|
|
7
|
-
LOOP = "loop",
|
|
8
|
-
BOUNCE = "bounce"
|
|
9
|
-
}
|
|
10
|
-
/**
|
|
11
|
-
* Direction of the marquee animation
|
|
12
|
-
*/
|
|
13
|
-
type MarqueeDirection = 'horizontal' | 'vertical';
|
|
14
|
-
/**
|
|
15
|
-
* Props for the MarqueeText component
|
|
16
|
-
*/
|
|
17
|
-
interface MarqueeTextProps {
|
|
18
|
-
/**
|
|
19
|
-
* Content to be scrolled (string or React nodes)
|
|
20
|
-
*/
|
|
21
|
-
children: React.ReactNode;
|
|
22
|
-
/**
|
|
23
|
-
* The animation mode: 'loop' for continuous scrolling or 'bounce' for back-and-forth
|
|
24
|
-
* @default AnimationMode.LOOP
|
|
25
|
-
*/
|
|
26
|
-
mode?: AnimationMode;
|
|
27
|
-
/**
|
|
28
|
-
* Speed of the scrolling animation in pixels per second
|
|
29
|
-
* @default 30
|
|
30
|
-
*/
|
|
31
|
-
speed?: number;
|
|
32
|
-
/**
|
|
33
|
-
* Delay in milliseconds before starting the animation
|
|
34
|
-
* @default 1500
|
|
35
|
-
*/
|
|
36
|
-
delay?: number;
|
|
37
|
-
/**
|
|
38
|
-
* Duration in milliseconds to pause at the end of the content (only for bounce mode)
|
|
39
|
-
* @default 1000
|
|
40
|
-
*/
|
|
41
|
-
endPauseDuration?: number;
|
|
42
|
-
/**
|
|
43
|
-
* Container style
|
|
44
|
-
*/
|
|
45
|
-
style?: ViewStyle;
|
|
46
|
-
/**
|
|
47
|
-
* Text style (when children is a string)
|
|
48
|
-
*/
|
|
49
|
-
textStyle?: TextStyle;
|
|
50
|
-
/**
|
|
51
|
-
* Whether to enable the animation
|
|
52
|
-
* @default true
|
|
53
|
-
*/
|
|
54
|
-
enabled?: boolean;
|
|
55
|
-
/**
|
|
56
|
-
* Direction of scrolling ('horizontal' or 'vertical')
|
|
57
|
-
* @default 'horizontal'
|
|
58
|
-
*/
|
|
59
|
-
direction?: MarqueeDirection;
|
|
60
|
-
/**
|
|
61
|
-
* Spacing between cloned elements
|
|
62
|
-
* @default 20
|
|
63
|
-
*/
|
|
64
|
-
spacing?: number;
|
|
65
|
-
/**
|
|
66
|
-
* Allow user interaction with gesture handling
|
|
67
|
-
* @default true
|
|
68
|
-
*/
|
|
69
|
-
withGesture?: boolean;
|
|
70
|
-
/**
|
|
71
|
-
* Custom frame rate for animation
|
|
72
|
-
*/
|
|
73
|
-
frameRate?: number;
|
|
74
|
-
/**
|
|
75
|
-
* Reverse the animation direction
|
|
76
|
-
* @default false
|
|
77
|
-
*/
|
|
78
|
-
reverse?: boolean;
|
|
79
|
-
/**
|
|
80
|
-
* Background color for the container
|
|
81
|
-
* @default 'transparent'
|
|
82
|
-
*/
|
|
83
|
-
backgroundColor?: string;
|
|
84
|
-
/**
|
|
85
|
-
* Callback when animation starts
|
|
86
|
-
*/
|
|
87
|
-
onAnimationStart?: () => void;
|
|
88
|
-
/**
|
|
89
|
-
* Callback when animation stops
|
|
90
|
-
*/
|
|
91
|
-
onAnimationStop?: () => void;
|
|
92
|
-
}
|
|
93
|
-
/**
|
|
94
|
-
* Reference handle for the MarqueeText component
|
|
95
|
-
*/
|
|
96
|
-
export interface MarqueeTextRef {
|
|
97
|
-
/**
|
|
98
|
-
* Start the marquee animation
|
|
99
|
-
*/
|
|
100
|
-
start: () => void;
|
|
101
|
-
/**
|
|
102
|
-
* Stop the marquee animation
|
|
103
|
-
*/
|
|
104
|
-
stop: () => void;
|
|
105
|
-
/**
|
|
106
|
-
* Whether the animation is currently active
|
|
107
|
-
*/
|
|
108
|
-
isActive: boolean;
|
|
109
|
-
}
|
|
2
|
+
import { MarqueeTextRef, MarqueeTextProps, AnimationMode } from './constants';
|
|
110
3
|
/**
|
|
111
4
|
* MarqueeText component for scrolling text or content
|
|
112
5
|
*
|
|
@@ -117,4 +10,4 @@ export interface MarqueeTextRef {
|
|
|
117
10
|
declare const MarqueeText: React.ForwardRefExoticComponent<MarqueeTextProps & React.RefAttributes<MarqueeTextRef>>;
|
|
118
11
|
export default MarqueeText;
|
|
119
12
|
export { AnimationMode };
|
|
120
|
-
export type {
|
|
13
|
+
export type { MarqueeTextProps };
|
package/dist/MarqueeText.js
CHANGED
|
@@ -3,14 +3,7 @@ import { StyleSheet, View, Text } from 'react-native';
|
|
|
3
3
|
import { Gesture, GestureDetector } from 'react-native-gesture-handler';
|
|
4
4
|
import Animated, { runOnJS, useAnimatedReaction, useAnimatedStyle, useSharedValue, useFrameCallback, withDecay, } from 'react-native-reanimated';
|
|
5
5
|
import { useFocusEffect } from '@react-navigation/native';
|
|
6
|
-
|
|
7
|
-
* Animation modes for the marquee text
|
|
8
|
-
*/
|
|
9
|
-
var AnimationMode;
|
|
10
|
-
(function (AnimationMode) {
|
|
11
|
-
AnimationMode["LOOP"] = "loop";
|
|
12
|
-
AnimationMode["BOUNCE"] = "bounce";
|
|
13
|
-
})(AnimationMode || (AnimationMode = {}));
|
|
6
|
+
import { AnimationMode } from './constants';
|
|
14
7
|
/**
|
|
15
8
|
* Component to render a child item in the marquee
|
|
16
9
|
*/
|
package/dist/constants.d.ts
CHANGED
|
@@ -1,4 +1,109 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
import { ViewStyle, TextStyle } from "react-native";
|
|
2
|
+
/**
|
|
3
|
+
* Animation modes for the marquee text
|
|
4
|
+
*/
|
|
5
|
+
export declare enum AnimationMode {
|
|
6
|
+
LOOP = "loop",
|
|
7
|
+
BOUNCE = "bounce"
|
|
8
|
+
}
|
|
9
|
+
/**
|
|
10
|
+
* Direction of the marquee animation
|
|
11
|
+
*/
|
|
12
|
+
type MarqueeDirection = 'horizontal' | 'vertical';
|
|
13
|
+
/**
|
|
14
|
+
* Props for the MarqueeText component
|
|
15
|
+
*/
|
|
16
|
+
export interface MarqueeTextProps {
|
|
17
|
+
/**
|
|
18
|
+
* Content to be scrolled (string or React nodes)
|
|
19
|
+
*/
|
|
20
|
+
children: React.ReactNode;
|
|
21
|
+
/**
|
|
22
|
+
* The animation mode: 'loop' for continuous scrolling or 'bounce' for back-and-forth
|
|
23
|
+
* @default AnimationMode.LOOP
|
|
24
|
+
*/
|
|
25
|
+
mode?: AnimationMode;
|
|
26
|
+
/**
|
|
27
|
+
* Speed of the scrolling animation in pixels per second
|
|
28
|
+
* @default 30
|
|
29
|
+
*/
|
|
30
|
+
speed?: number;
|
|
31
|
+
/**
|
|
32
|
+
* Delay in milliseconds before starting the animation
|
|
33
|
+
* @default 1500
|
|
34
|
+
*/
|
|
35
|
+
delay?: number;
|
|
36
|
+
/**
|
|
37
|
+
* Duration in milliseconds to pause at the end of the content (only for bounce mode)
|
|
38
|
+
* @default 1000
|
|
39
|
+
*/
|
|
40
|
+
endPauseDuration?: number;
|
|
41
|
+
/**
|
|
42
|
+
* Container style
|
|
43
|
+
*/
|
|
44
|
+
style?: ViewStyle;
|
|
45
|
+
/**
|
|
46
|
+
* Text style (when children is a string)
|
|
47
|
+
*/
|
|
48
|
+
textStyle?: TextStyle;
|
|
49
|
+
/**
|
|
50
|
+
* Whether to enable the animation
|
|
51
|
+
* @default true
|
|
52
|
+
*/
|
|
53
|
+
enabled?: boolean;
|
|
54
|
+
/**
|
|
55
|
+
* Direction of scrolling ('horizontal' or 'vertical')
|
|
56
|
+
* @default 'horizontal'
|
|
57
|
+
*/
|
|
58
|
+
direction?: MarqueeDirection;
|
|
59
|
+
/**
|
|
60
|
+
* Spacing between cloned elements
|
|
61
|
+
* @default 20
|
|
62
|
+
*/
|
|
63
|
+
spacing?: number;
|
|
64
|
+
/**
|
|
65
|
+
* Allow user interaction with gesture handling
|
|
66
|
+
* @default true
|
|
67
|
+
*/
|
|
68
|
+
withGesture?: boolean;
|
|
69
|
+
/**
|
|
70
|
+
* Custom frame rate for animation
|
|
71
|
+
*/
|
|
72
|
+
frameRate?: number;
|
|
73
|
+
/**
|
|
74
|
+
* Reverse the animation direction
|
|
75
|
+
* @default false
|
|
76
|
+
*/
|
|
77
|
+
reverse?: boolean;
|
|
78
|
+
/**
|
|
79
|
+
* Background color for the container
|
|
80
|
+
* @default 'transparent'
|
|
81
|
+
*/
|
|
82
|
+
backgroundColor?: string;
|
|
83
|
+
/**
|
|
84
|
+
* Callback when animation starts
|
|
85
|
+
*/
|
|
86
|
+
onAnimationStart?: () => void;
|
|
87
|
+
/**
|
|
88
|
+
* Callback when animation stops
|
|
89
|
+
*/
|
|
90
|
+
onAnimationStop?: () => void;
|
|
91
|
+
}
|
|
92
|
+
/**
|
|
93
|
+
* Reference handle for the MarqueeText component
|
|
94
|
+
*/
|
|
95
|
+
export interface MarqueeTextRef {
|
|
96
|
+
/**
|
|
97
|
+
* Start the marquee animation
|
|
98
|
+
*/
|
|
99
|
+
start: () => void;
|
|
100
|
+
/**
|
|
101
|
+
* Stop the marquee animation
|
|
102
|
+
*/
|
|
103
|
+
stop: () => void;
|
|
104
|
+
/**
|
|
105
|
+
* Whether the animation is currently active
|
|
106
|
+
*/
|
|
107
|
+
isActive: boolean;
|
|
108
|
+
}
|
|
109
|
+
export {};
|
package/dist/constants.js
CHANGED
|
@@ -1,4 +1,12 @@
|
|
|
1
|
-
export
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
};
|
|
1
|
+
// export const AnimationMode = {
|
|
2
|
+
// LOOP: 'loop',
|
|
3
|
+
// BOUNCE: 'bounce',
|
|
4
|
+
// };
|
|
5
|
+
/**
|
|
6
|
+
* Animation modes for the marquee text
|
|
7
|
+
*/
|
|
8
|
+
export var AnimationMode;
|
|
9
|
+
(function (AnimationMode) {
|
|
10
|
+
AnimationMode["LOOP"] = "loop";
|
|
11
|
+
AnimationMode["BOUNCE"] = "bounce";
|
|
12
|
+
})(AnimationMode || (AnimationMode = {}));
|
package/dist/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ export { AnimationMode } from './constants';
|
|
|
3
3
|
declare const Marquee: {
|
|
4
4
|
AutoScroll: ({ children, mode, speed, delay, endPauseDuration, style, textStyle, enabled, direction, }: {
|
|
5
5
|
children: React.ReactNode;
|
|
6
|
-
mode?:
|
|
6
|
+
mode?: AnimationMode;
|
|
7
7
|
speed?: number;
|
|
8
8
|
delay?: number;
|
|
9
9
|
endPauseDuration?: number;
|
|
@@ -12,7 +12,7 @@ declare const Marquee: {
|
|
|
12
12
|
enabled?: boolean;
|
|
13
13
|
direction?: "horizontal" | "vertical";
|
|
14
14
|
}) => import("react").JSX.Element;
|
|
15
|
-
MarqueeText: import("react").ForwardRefExoticComponent<import("./
|
|
15
|
+
MarqueeText: import("react").ForwardRefExoticComponent<import("./constants").MarqueeTextProps & import("react").RefAttributes<import("./constants").MarqueeTextRef>>;
|
|
16
16
|
AnimationMode: typeof AnimationMode;
|
|
17
17
|
};
|
|
18
18
|
export default Marquee;
|
package/dist/index.js
CHANGED