diff --git a/README.md b/README.md index a0f1a1c..9aa648a 100644 --- a/README.md +++ b/README.md @@ -55,6 +55,7 @@ MarqueeText component basically inherits TextProps and the followings are additi | delay | number | true | 0 | Duration to delay the animation after render, in milliseconds | onMarqueeComplete | function | true | void | A callback for when the marquee finishes animation and stops | consecutive | boolean | true | false | A flag to enable consecutive mode that imitates the default behavior of HTML marquee element. Does not take effect if loop is false +| isRTL | boolean | true | I18nManager.isRTL | A flag to override animation direction ## Methods diff --git a/src/index.tsx b/src/index.tsx index 8c86195..7992d06 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -11,6 +11,7 @@ import { StyleSheet, Text, View, + I18nManager, } from 'react-native'; const { UIManager } = NativeModules; @@ -41,6 +42,10 @@ export interface MarqueeTextProps extends TextProps { * Does not take effect if loop is false */ consecutive?: boolean; + /** + * A flag to override animation direction + */ + isRTL?: boolean; } export interface MarqueeTextHandles { @@ -108,6 +113,7 @@ const MarqueeText = (props: MarqueeTextProps, ref: Ref): JSX loop = true, delay = 0, consecutive = false, + isRTL = I18nManager.isRTL, onMarqueeComplete, children, ...restProps @@ -127,12 +133,14 @@ const MarqueeText = (props: MarqueeTextProps, ref: Ref): JSX loop: boolean; delay: number; consecutive: boolean; + isRTL: boolean; }>({ marqueeOnStart, speed, loop, delay, consecutive, + isRTL, }); const stopAnimation = useCallback(() => { @@ -163,7 +171,7 @@ const MarqueeText = (props: MarqueeTextProps, ref: Ref): JSX animatedValue.current, { ...config.current, - toValue: isConsecutive ? -marqueeTextWidth.current : -distance, + toValue: (isConsecutive ? marqueeTextWidth.current : distance) * (config.current.isRTL ? 1 : -1), duration: isConsecutive ? baseDuration * (marqueeTextWidth.current / distance) : baseDuration, }, isConsecutive