homielab/react-native-auto-scroll

A performance auto horizontal scrolling component for react-native

@homielab/react-native-auto-scroll

Auto horizontal scroll. You only need to wrap the component between <AutoScroll>, it is the same as the <marquee> tag in HTML.

There are many solutions, but I prefer this one for the best performance. The animations are using useNativeDriver, so they will be sent to native and performed on the UI thread instead of the JS thread.

Installation

npm install --save @homielab/react-native-auto-scroll

or

yarn add @homielab/react-native-auto-scroll

Properties

Prop	Description	Default
style	View style	_
endPaddingWidth	The padding width to next round	100
duration	Time to finish a round (ms).	_
delay	Delay time before start auto scroll animation (ms).	1000
isLTR	Is Left to Right?	false

Example:

Expo: https://snack.expo.io/@minhtc/react-native-auto-scrolling-demo

Example: https://github.com/homielab/react-native-auto-scroll/tree/main/Example

Source:

import * as React from "react";
import { Text, View, Image, StyleSheet } from "react-native";
import AutoScroll from "@homielab/react-native-auto-scroll";

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <AutoScroll style={styles.scrolling1}>
          <Image
            style={styles.image}
            delay={0}
            duration={6000}
            source={require("./assets/merry-christmas-png.png")}
          />
        </AutoScroll>
        <AutoScroll style={styles.scrolling2} endPadding={50}>
          <Text style={styles.welcome}>MERRY CHRISTMAS AND HAPPY NEW YEAR</Text>
        </AutoScroll>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    alignItems: "center",
    backgroundColor: "#F5FCFF",
  },
  image: {
    width: 200,
    height: 200,
  },
  scrolling1: {
    width: 400,
    padding: 10,
    marginBottom: 10,
  },
  scrolling2: {
    backgroundColor: "red",
    width: 400,
    padding: 10,
    marginBottom: 10,
  },
  welcome: {
    color: "white",
    fontSize: 20,
    fontWeight: "bold",
    textAlign: "center",
    margin: 10,
  },
});

Question?

You are welcome to create new issue 👍🏻

https://github.com/homielab/react-native-auto-scroll/issues

react-native-auto-scroll's Issues

RTL support

Thanks for this library.

Is this library supports RTL direction applications? it can be very useful for marquee texts written in RTL language like Persian(Farsi).

Animation stoping when navigate to another screen

Hi everyone,
I'm having a problem with te animation... I use the same component exporting it to use in another screen and the component is using AutoScroll, but when i navigate to another screen, and this has the component i'm exporting, the animation stop...
Can you guys help me ?

isLTR dosen't work in react-native-web env

isLTR dosen't work in react-native-web

testingURL : https://snack.expo.dev/@bhyoo99/react-native-auto-scroll-isltr-bug

As a result of my testing, the problem occurs when the useNativeDriver is false.
but, for animation looping, it is right to keep it in the false state.

phamfoo/react-native-animated-spinkit#7
There was a similar issue in this library.

@minhtc

Is there a way to stop animation?

Is there a way to stop animation after one round?

Not work on android platform

I use react-native-auto-scroll with my project. But it notwork on android platform, just work on IOS
React-native: "0.71.17"
Node version: 18.17.1

When using FlatList

I am using flat list and Auto Scrolling working only in first rendered item in rest of items not scrolling

Scroll Stoping when class change(version 0.0.10)

Using this library in js, in my app,in the first route (using a tabNavigator) the AutoScroll Component has a conditional hidden class.
Its shows the folowing error: ERROR TypeError: contentRef.current.measure is not a function (it is undefined), js engine: hermes
When i change the route, the autoscroll shows up just fine, but if i return to the first route ("Parocinios") when i go to another route, the scroll has stoped.

how to add vertical scroll

Metro: Unable to resolve module ./AutoScrolling

If I install the package with npm into my react-native project and run the provided example I will get this error

error: Error: Unable to resolve module ./AutoScrolling from [local path here]

None of these files exist:
  * app/components/AutoScrolling(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  * app/components/AutoScrolling/index(.native|.android.js|.native.js|.js|.android.json|.native.json|.json|.android.ts|.native.ts|.ts|.android.tsx|.native.tsx|.tsx)
  3 | 
  4 | // import AutoScrolling from "react-native-auto-scrolling";
> 5 | import AutoScrolling from "./AutoScrolling";
    |                            ^

Issue disappears if I import the package like

import AutoScrolling from "react-native-auto-scrolling";

Auto scroll resetting to the start when I set the text dynamically

If I set the text dynamically like the below example, then the animation is not smooth. Could you please guide what to change to get the animation smooth.

<Text style={styles.welcome}>{this.state.date.hour}</Text> ( the animation is not smooth, hour scrolls and then suddenly resets to the starting position)

---

<Text style={styles.welcome}>hour</Text> (this works totally fine hour scrolls in a loop)

Scrolling jumps at end of loop

I am using this package for a vertical auto scroll and it is doing everything I need (thanks!) except at the end of the loop it jumps and I can't figure out why.

Screen.Recording.2021-09-17.at.09.57.53.mov

        <View
          style={{
            transform: [{ rotate: '90deg' }],
            width: layout.height * 0.6,
            height: layout.width - theme.baseline * 3,
            borderRadius: 15,
            alignSelf: 'center',
            justifyContent: 'center'
          }}
        >
          <AutoScrolling duration={20000} endPaddingWidth={50} isLTR={true}>
            <FastImage
              source={Images.LoginAnimation}
              style={{
                width: (layout.width - theme.baseline * 2) * 4,
                height: layout.width - theme.baseline * 2
              }}
            />
          </AutoScrolling>
        </View>

The user cannot scroll, they can only watch

I want to use this is, it's great, but we can't because it takes away the user's ability to scroll and defeats the purpose. If it could stop animating when the user starts scrolling (touch down) that would be perfect.

Also, TypeScript wouldn't kill anyone either.

Infinite loop

How can I make it an infinite loop?

add pause / resume feature

It would be nice to add pause / resume feature

Add possibility to scroll manually

please add possibility to scroll manually in the scroll view

High-width performance issue

Hi,

I'm having performance issues when the width of the object grows. I have 300 items with a width of 200. That is width: 60000. This is causing the drops. How can I solve this problem?

Thank you.

is not support function compoments?

<AutoScrolling delay={2000} duration={15000}> {[1, 3, 4, 5].map((v) => { return ( <View> <Text>123123</Text> </View> ); })} </AutoScrolling>

contentRef.measure is not a function

Depreciation of the package

Dated 28th April, 2022, it is displaying that the package is depreciated. It would be of great help if anyone can share with me the occurred problem.

Thanks

Could not resolve peer dependency react 16.9.0

Hi,

Thanks a lot for the great library !
Could you fix your peer deps to at least allow minor versions upgrades of React ?
For instance, our project uses 16.13.1 which should be pretty close to 16.9 but the npm install breaks because of this peer dependency !

Thanks

Auto scrolling need more functionality like some indicator which control over scrolling

Metro encountered an error: this package specifies a `main` module field that could not be resolved

Hello, I have installed this package and I get the following error:

error: Metro has encountered an error: While trying to resolve module 'react-native-auto-scrolling' from file '.....\Home.js', the package '......\node_modules\react-native-auto-scrollinge\package.json' was successfully found. However, this package itself specifies a 'main' module field that could not be resolved ('......\node_modules\react-native-auto-scrollinge\dist\index.js'.

I have tried to fix this by adding in the metro.config.js the following code:
resolver: { sourceExts: ['jsx', 'js', 'ts', 'tsx'], },

under module.exports (as I found that the Metrou doesn't know how to compile by default .tsx) but I still cannot use the package, as it returns me the same error when trying to run react-native run-android.