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

A performance auto horizontal scrolling component for react-native
https://github.com/homielab/react-native-auto-scroll

auto-scroll auto-scrolling marquee react react-native

Last synced: about 1 month ago
JSON representation

A performance auto horizontal scrolling component for react-native

• Host: GitHub
• URL: https://github.com/homielab/react-native-auto-scroll
• Owner: homielab
• Created: 2018-09-27T20:57:44.000Z (about 6 years ago)
• Default Branch: main
• Last Pushed: 2023-09-13T13:28:51.000Z (about 1 year ago)
• Last Synced: 2024-09-28T12:22:49.583Z (about 2 months ago)
• Topics: auto-scroll, auto-scrolling, marquee, react, react-native
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/@homielab/react-native-auto-scroll
• Size: 2.38 MB
• Stars: 219
• Watchers: 3
• Forks: 23
• Open Issues: 9
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml

Awesome Lists containing this project

README

        
# @homielab/react-native-auto-scroll

[![npm version](https://badge.fury.io/js/@homielab%2Freact-native-auto-scroll.svg)](https://badge.fury.io/js/@homielab%2Freact-native-auto-scroll) [![CircleCI](https://circleci.com/gh/homielab/react-native-auto-scroll/tree/main.svg?style=svg)](https://circleci.com/gh/homielab/react-native-auto-scroll/tree/main) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](https://github.com/homielab/react-native-auto-scroll/graphs/contributors)

Auto horizontal scroll. You only need to wrap the component between ``, it is the same as the `` 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:

![Auto Scroll Example](https://github.com/homielab/react-native-auto-scroll/raw/main/screenshots/auto-scrolling.gif "Auto Scroll 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:

```js

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 (

      

        

          

        

        

          MERRY CHRISTMAS AND HAPPY NEW YEAR

        

      

    );

  }

}

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