https://github.com/animate-react-native/marquee

A React Native Marquee component.
https://github.com/animate-react-native/marquee

expo news-ticker react-native react-native-marquee react-native-reanimated react-native-ticker reanimated3 typescript

Last synced: 6 days ago
JSON representation

A React Native Marquee component.

• Host: GitHub
• URL: https://github.com/animate-react-native/marquee
• Owner: animate-react-native
• License: mit
• Created: 2023-08-25T20:40:34.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-11-08T14:07:35.000Z (3 months ago)
• Last Synced: 2025-01-11T02:07:18.731Z (13 days ago)
• Topics: expo, news-ticker, react-native, react-native-marquee, react-native-reanimated, react-native-ticker, reanimated3, typescript
• Language: TypeScript
• Homepage: https://www.animatereactnative.com
• Size: 116 MB
• Stars: 222
• Watchers: 4
• Forks: 18
• Open Issues: 4
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        


React Native Marquee


https://github.com/animate-react-native/marquee/assets/2805320/4fb199b2-491c-4621-bf84-85890a8d6f5e

[![NPM Version](https://img.shields.io/npm/v/@animatereactnative/marquee.svg?style=flat&color=black)](https://www.npmjs.org/package/@animatereactnative/marquee) [![runs with expo](https://img.shields.io/badge/Runs%20with%20Expo-4630EB.svg?style=flat-square&logo=EXPO&labelColor=f3f3f3&logoColor=000)](https://expo.io/) [![npm](https://img.shields.io/npm/l/@animatereactnative/marquee?style=flat-square)](https://www.npmjs.com/package/@animatereactnative/marquee) [![npm](https://img.shields.io/badge/types-included-blue?style=flat-square)](https://www.npmjs.com/package/@animatereactnative/marquee) 



React Native Marquee component, a cross-platform marquee component, powered by Reanimated:

- 🔋 Powered by Reanimated 3

- 📱 Works with Expo

- ✅ Cross-platform (iOS, Android, Web)

- ⚡️ 60-120fps

- 🪝 Works with any React Native element/component

- ⌨️ Written in TypeScript

## Installation

```sh

npm install @animatereactnative/marquee

```

> Also, you need to install [react-native-reanimated](https://github.com/software-mansion/react-native-reanimated), and follow their installation instructions.

## Usage

```js

import { Marquee } from '@animatereactnative/marquee';

// ...

export function Example() {

  return (

    

      Powered by AnimateReactNative.com

    

  );

}

```

## Props

| name        | description                                                                                                                                            | required | type                   | default                      |

| ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | -------- | ---------------------- | ---------------------------- |

| `children`  | Any component that you'd like to apply infinite scrolling / marquee effect                                                                             | YES      | `React.ReactNode`      | 1                            |

| `speed`     | Animation speed                                                                                                                                        | NO       | `number`               | 1                            |

| `spacing`   | Spacing between repeting elements                                                                                                                      | NO       | `number`               | 0                            |

| `reverse`   | Determine if the animation should be reversed or not. Based on `direction`, `reverse` means left-to-right, right-to-left, top-to-bottom, bottom-to-top | NO       | `boolean`              | false                        |

| `direction` | Direction of the animation                                                                                                                             | NO       | `"horizontal"`         | `"vertical" or "horizontal"` |

| `style`     | View style to be applied to Marquee container.                                                                                                         | NO       | `StyleProp` |                              |

## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

[MIT](./LICENSE)

---