react-native-auto-scroll - GitLite

KO | EN

gitlite — search

#react #ai #typescript #llm #go #deep-learning #java #windows #awesome #kubernetes #pytorch #security #ios #open-source

react-native-auto-scroll

(★ 220)

A performance auto horizontal scrolling component for react-native

File Explorer

Download Latest Version (.zip)

- - bug_report.yml
  - config.yml
- - ci.yml
- FUNDING.yml
- - yarn-3.6.1.cjs
- - adaptive-icon.png
  - favicon.png
  - icon.png
  - merry-christmas-png.png
  - splash-icon.png
- - App.tsx
- app.json
- babel.config.js
- index.js
- metro.config.js
- package.json
- tsconfig.json
- auto-scrolling.gif
- - index.test.tsx
- index.tsx
.editorconfig
.gitattributes
.gitignore
.nvmrc
.watchmanconfig
.yarnrc.yml
babel.config.js
eslint.config.mjs
lefthook.yml
LICENSE
package.json
README.md
tsconfig.build.json
tsconfig.json
yarn.lock

# Installation Guide

1. Get the code

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

Downloads the entire project code from GitHub to your computer.

cd react-native-auto-scroll

Moves into the project folder you just downloaded.

2. Node.js

Easy Recommended

Prerequisites

Git Needed to download the project code from GitHub.
Node.js Node.js must be installed to use npm. The LTS version is recommended.

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

Downloads and installs the libraries listed in package.json.

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

Type this command into your terminal and run it.

✅ After running the command, open the address shown in the terminal (usually something like http://localhost:3000) in your browser.

Pulled directly from this repo's README.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# @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 `<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:

![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 (
      <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