kyo504 / react-native-marquee

React Native Marquee Text Component
MIT License
196 stars 29 forks source link

Feature: consecutive mode #44

Closed teaualune closed 1 year ago

teaualune commented 2 years ago

Since I'm facing the same problem described in #1 and not finding an existing solution, I propose this PR to implement the feature. I called it "consecutive" but the term can be changed according to reviewer's suggestion.

This PR includes the consecutive feature as well as several minor fixes:

The "consecutive" mode is only valid under loop = true condition, and it tweaks the animation loop into the following sequence:

  1. Run the first timing animation: move marquee text from position = 0 to position = -marqueeTextWidth.current, so marquee text will be moved completely outside of the container
  2. Reset marquee text to position = containerWidth.current (namely resetToValue) via a 0-duration timing animation. This moves marquee text to the right side of container, preparing to show again
  3. Run the second timing animation: move marquee text from position = containerWidth.current to position = -marqueeTextWidth.current
  4. Repeat 2 and 3

The complex duration calculations at line 167 and 172 are aimed to maintain same velocity between consecutive mode and the existing behavior.

Here is a sample video demonstrating both existing behavior and consecutive mode: https://imgur.com/a/54D46o2

kyo504 commented 1 year ago

@teaualune First, very sorry for late response. and thank you for your contribution. If you don't mind, could you rebase this?

teaualune commented 1 year ago

@kyo504 I've rebased the PR and rewrites the example to HomeScreen, please tell me if there's anything that need to be adjusted, thanks!