feat: add enableManualScroll props, controls whether manual scrolling

README.md

@@ -50,6 +50,9 @@ export function Example() {
 | `speed`    | Animation speed                                                            | NO       | `number`               | 1       |
 | `spacing`  | Spacing between repeting elements                                          | NO       | `number`               | 0       |
 | `style`    | View style to be applied to Marquee container.                             | NO       | `StyleProp<ViewStyle>` |         |
+| `enableManualScroll` | Is it possible to scroll manually                                | NO       | `boolean`                 | `false`      |
+
+
 
 ## Contributing
 

example/package.json

@@ -15,6 +15,7 @@
     "react-dom": "18.2.0",
     "react-native": "0.72.3",
     "react-native-reanimated": "~3.3.0",
+    "react-native-gesture-handler": "~2.12.0",
     "react-native-web": "~0.19.6"
   },
   "devDependencies": {

example/src/App.tsx

@@ -42,6 +42,27 @@ export default function App() {
           })}
         </View>
       </Marquee>
+      <Marquee
+        enableManualScroll={true}
+        spacing={10}
+        speed={4}
+        style={{ marginTop: 12 }}
+      >
+        <View style={{ flexDirection: 'row' }}>
+          {[...Array(5).keys()].map((i) => {
+            return (
+              <Box
+                key={`box-${i}`}
+                spacing={i === 4 ? 0 : 10}
+                size={120}
+                primary={primary}
+              >
+                <Heading primary={!primary}>{i}</Heading>
+              </Box>
+            );
+          })}
+        </View>
+      </Marquee>
     </View>
   );
 }

example/yarn.lock

@@ -1170,6 +1170,13 @@
     "@babel/helper-validator-identifier" "^7.22.5"
     to-fast-properties "^2.0.0"
 
+"@egjs/hammerjs@^2.0.17":
+  version "2.0.17"
+  resolved "https://registry.yarnpkg.com/@egjs/hammerjs/-/hammerjs-2.0.17.tgz#5dc02af75a6a06e4c2db0202cae38c9263895124"
+  integrity sha512-XQsZgjm2EcVUiZQf11UBJQfmZeEmOW8DpI1gsFeln6w0ae0ii4dMQEQ0kjl6DspdWX1aGY1/loyXnP0JS06e/A==
+  dependencies:
+    "@types/hammerjs" "^2.0.36"
+
 "@expo/[email protected]", "@expo/bunyan@^4.0.0":
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/@expo/bunyan/-/bunyan-4.0.0.tgz#be0c1de943c7987a9fbd309ea0b1acd605890c7b"
@@ -2051,6 +2058,11 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/hammerjs@^2.0.36":
+  version "2.0.46"
+  resolved "https://registry.yarnpkg.com/@types/hammerjs/-/hammerjs-2.0.46.tgz#381daaca1360ff8a7c8dff63f32e69745b9fb1e1"
+  integrity sha512-ynRvcq6wvqexJ9brDMS4BnBLzmr0e14d6ZJTEShTBWKymQiHwlAyGu0ZPEFI2Fh1U53F7tN9ufClWM5KvqkKOw==
+
 "@types/html-minifier-terser@^6.0.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -4573,6 +4585,13 @@ hermes-profile-transformer@^0.0.6:
   dependencies:
     source-map "^0.7.3"
 
+hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hosted-git-info@^3.0.2:
   version "3.0.8"
   resolved "https://registry.yarnpkg.com/hosted-git-info/-/hosted-git-info-3.0.8.tgz#6e35d4cc87af2c5f816e4cb9ce350ba87a3f370d"
@@ -6823,7 +6842,7 @@ prompts@^2.3.2, prompts@^2.4.0:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@*:
+prop-types@*, prop-types@^15.7.2:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -6945,7 +6964,7 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.2.0.tgz#199431eeaaa2e09f86427efbb4f1473edb47609b"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -6955,6 +6974,17 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-native-gesture-handler@~2.12.0:
+  version "2.12.1"
+  resolved "https://registry.yarnpkg.com/react-native-gesture-handler/-/react-native-gesture-handler-2.12.1.tgz#f11a99fb95169810c6886fad5efa01a17fd81660"
+  integrity sha512-deqh36bw82CFUV9EC4tTo2PP1i9HfCOORGS3Zmv71UYhEZEHkzZv18IZNPB+2Awzj45vLIidZxGYGFxHlDSQ5A==
+  dependencies:
+    "@egjs/hammerjs" "^2.0.17"
+    hoist-non-react-statics "^3.3.0"
+    invariant "^2.2.4"
+    lodash "^4.17.21"
+    prop-types "^15.7.2"
+
 react-native-reanimated@~3.3.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/react-native-reanimated/-/react-native-reanimated-3.3.0.tgz#80f9d58e28fddf62fe4c1bc792337b8ab57936ab"

package.json

@@ -76,6 +76,7 @@
     "react": "18.2.0",
     "react-native": "0.72.3",
     "react-native-builder-bob": "^0.21.3",
+    "react-native-gesture-handler": "^2.12.0",
     "react-native-reanimated": "^3.4.2",
     "release-it": "^15.0.0",
     "typescript": "^5.0.2"

src/index.tsx

@@ -4,12 +4,20 @@ import { StyleSheet } from 'react-native';
 import { View } from 'react-native';
 import type { SharedValue } from 'react-native-reanimated';
 import Animated, {
+  cancelAnimation,
   runOnJS,
   useAnimatedReaction,
   useAnimatedStyle,
   useFrameCallback,
   useSharedValue,
+  withDecay,
 } from 'react-native-reanimated';
+import {
+  Gesture,
+  GestureDetector,
+  GestureHandlerRootView,
+  State,
+} from 'react-native-gesture-handler';
 
 const AnimatedChild = ({
   index,
@@ -41,20 +49,31 @@ export type MarqueeProps = React.PropsWithChildren<{
   speed?: number;
   spacing?: number;
   style?: ViewStyle;
+  enableManualScroll?: boolean;
 }>;
 
 /**
  * Used to animate the given children in a horizontal manner.
  */
 export const Marquee = React.memo(
-  ({ speed = 1, children, spacing = 0, style }: MarqueeProps) => {
+  ({
+    speed = 1,
+    children,
+    spacing = 0,
+    enableManualScroll = false,
+    style,
+  }: MarqueeProps) => {
     const parentWidth = useSharedValue(0);
     const textWidth = useSharedValue(0);
     const [cloneTimes, setCloneTimes] = React.useState(0);
     const anim = useSharedValue(0);
+    const isManual = useSharedValue(false);
+    const touchStartAnim = useSharedValue(0);
 
     useFrameCallback(() => {
-      anim.value += speed;
+      if (!isManual.value) {
+        anim.value += speed;
+      }
     }, true);
 
     useAnimatedReaction(
@@ -77,49 +96,100 @@ export const Marquee = React.memo(
       },
       []
     );
-    return (
-      <Animated.View
-        style={style}
-        onLayout={(ev) => {
-          parentWidth.value = ev.nativeEvent.layout.width;
-        }}
-        pointerEvents="box-none"
-      >
-        <Animated.View style={styles.row} pointerEvents="box-none">
-          {
-            // We are adding the text inside a ScrollView because in this way we
-            // ensure that its not going to "wrap".
-          }
-          <Animated.ScrollView
-            horizontal
-            style={styles.hidden}
-            pointerEvents="box-none"
-          >
-            <View
-              onLayout={(ev) => {
-                textWidth.value = ev.nativeEvent.layout.width;
-              }}
+
+    const scrollPan = React.useMemo(
+      () =>
+        Gesture.Pan()
+          .enabled(cloneTimes > 0)
+          .onTouchesDown(() => {
+            cancelAnimation(anim);
+            isManual.value = true;
+            touchStartAnim.value = anim.value;
+          })
+          .onUpdate((event) => {
+            const scollValue = Math.max(
+              0,
+              touchStartAnim.value - event.translationX
+            );
+            anim.value = scollValue;
+          })
+          .onEnd((event) => {
+            anim.value = withDecay(
+              {
+                velocity: -event.velocityX,
+                clamp: [0, Infinity],
+              },
+              () => {
+                isManual.value = false;
+              }
+            );
+          })
+          .onFinalize((event) => {
+            if (
+              State.FAILED === event.state ||
+              State.CANCELLED === event.state
+            ) {
+              isManual.value = false;
+            }
+          }),
+      [anim, cloneTimes, isManual, touchStartAnim]
+    );
+
+    const render = () => {
+      return (
+        <Animated.View
+          style={style}
+          onLayout={(ev) => {
+            parentWidth.value = ev.nativeEvent.layout.width;
+          }}
+          pointerEvents="box-none"
+        >
+          <Animated.View style={styles.row} pointerEvents="box-none">
+            {
+              // We are adding the text inside a ScrollView because in this way we
+              // ensure that its not going to "wrap".
+            }
+            <Animated.ScrollView
+              horizontal
+              style={styles.hidden}
+              pointerEvents="box-none"
             >
-              {children}
-            </View>
-          </Animated.ScrollView>
-          {cloneTimes > 0 &&
-            [...Array(cloneTimes).keys()].map((index) => {
-              return (
-                <AnimatedChild
-                  key={`clone-${index}`}
-                  index={index}
-                  anim={anim}
-                  textWidth={textWidth}
-                  spacing={spacing}
-                >
-                  {children}
-                </AnimatedChild>
-              );
-            })}
+              <View
+                onLayout={(ev) => {
+                  textWidth.value = ev.nativeEvent.layout.width;
+                }}
+              >
+                {children}
+              </View>
+            </Animated.ScrollView>
+            {cloneTimes > 0 &&
+              [...Array(cloneTimes).keys()].map((index) => {
+                return (
+                  <AnimatedChild
+                    key={`clone-${index}`}
+                    index={index}
+                    anim={anim}
+                    textWidth={textWidth}
+                    spacing={spacing}
+                  >
+                    {children}
+                  </AnimatedChild>
+                );
+              })}
+          </Animated.View>
         </Animated.View>
-      </Animated.View>
-    );
+      );
+    };
+
+    if (enableManualScroll) {
+      return (
+        <GestureHandlerRootView>
+          <GestureDetector gesture={scrollPan}>{render()}</GestureDetector>
+        </GestureHandlerRootView>
+      );
+    }
+
+    return render();
   }
 );