MCPcopy Index your code
hub / github.com/animate-react-native/marquee

github.com/animate-react-native/marquee @v0.5.2

Chat with this repo
repository ↗ · DeepWiki ↗ · release v0.5.2 ↗ · + Follow
7 symbols 20 edges 11 files 0 documented · 0%
What it actually does AI analysis from the code graph — generated when you open this
loading…
README

React Native Marquee

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

NPM Version runs with expo npm npm Follow Miron Catalin

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

npm install @animatereactnative/marquee

Also, you need to install react-native-reanimated, and follow their installation instructions.

Usage

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

// ...

export function Example() {
  return (
    <Marquee spacing={20} speed={1}>
      <Heading>Powered by AnimateReactNative.com</Heading>
    </Marquee>
  );
}

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<ViewStyle>
position A shared value that you can pass and it will be modified when the marquee runs. Useful if you want to interpolate or run any additional animations NO SharedValue<number>
withGesture Indicates if the Marquee can be controlled by the gestures NO boolean

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

  <img alt="AnimateReactNative.com - Premium and Custom React Native animations." src="https://www.animatereactnative.com/animatereactnative_logo.svg" width="50%">

Core symbols most depended-on inside this repo

App
called by 0
example/src/App.tsx
Example
called by 0
example/src/App.tsx
Heading
called by 0
example/src/components/Heading.tsx
Box
called by 0
example/src/components/Box.tsx
AnimatedChild
called by 0
src/index.tsx
start
called by 0
src/index.tsx
stop
called by 0
src/index.tsx

Shape

Function 7

Languages

TypeScript100%

Modules by API surface

src/index.tsx3 symbols
example/src/App.tsx2 symbols
example/src/components/Heading.tsx1 symbols
example/src/components/Box.tsx1 symbols

For agents

$ claude mcp add marquee \
  -- python -m otcore.mcp_server <graph>

⬇ download graph artifact