Effortless Marquee Animations in React Native

react native reanimated react native open source react native marquee react native ticker

Nov 07, 2024

Marquee animations are a fantastic way to display scrolling text or content in a limited space, perfect for showcasing announcements, headlines, or featured items. The new @animatereactnative/marquee library makes creating smooth, customizable marquee effects effortless in React Native. In this post, we’ll explore the library’s core features, prop options, and how to get started.

Preview from:https://animate-react-native.github.io/marquee/ Open in a new tab

🎉 Key Features of `@animatereactnative/marquee`

Smooth Animation: Built using React Native Reanimated, this library ensures seamless and lag-free animations.
Flexible Customization: Control the speed, spacing, and style of the marquee to align with any design.
Responsive Design: Optimized for various screen sizes, ensuring consistent visuals across platforms.
Ease of Use: Designed to be developer-friendly, making marquee animations accessible with minimal configuration.

📥 Installation

To install @animatereactnative/marquee, use npm or yarn:


1# Using npm
2npm install @animatereactnative/marquee
3
4# Using yarn
5yarn add @animatereactnative/marquee
6

@animate-react-native/marquee depends on the React Native Reanimated library. To add it, follow these steps:


1npm install react-native-reanimated
2# or
3yarn add react-native-reanimated
4

Once both @animatereactnative/marquee and react-native-reanimated are installed, you’re all set to start using marquee animations!

⚙️ Basic Usage with Flexible Content

Creating a marquee animation is simple. Here’s an example from the official repository that demonstrates how you can wrap any React Native component within the marquee effect:


1import { Marquee } from '@animatereactnative/marquee';
2
3// ...
4
5export function Example() {
6  return (
7    <Marquee spacing={20} speed={1}>
8      <Heading>Powered by AnimateReactNative.com</Heading>
9    </Marquee>
10  );
11}
12

Wrap any component: You can pass any React Native component inside Marquee, including Text, Image, or custom components, to create an interactive and visually engaging marquee.
Example content: In this example, we display a combination of text messages and images that will scroll continuously. This is great for announcements, promotions, or displaying a series of images and messages together.

Customizing the Marquee with Props

The @animatereactnative/marquee library offers a range of props for easy customization:

Prop	Description	Required	Type	Default
`children`	Any component or text to apply the infinite scrolling effect	Yes	`React.ReactNode`	—
`speed`	Controls the speed of the marquee animation	No	`number`	`1`
`spacing`	Sets the spacing between repeated items	No	`number`	`0`
`style`	Styles to apply to the marquee container	No	`StyleProp<ViewStyle>`	—

🎨 Use Cases for Marquee Animations

The library is suitable for many applications:

News Headlines: Display the latest news in a scrolling format.
Sales Announcements: Showcase sales or promotions.
Stock Tickers: Show live stock prices or exchange rates.
Event Highlights: Announce event schedules or important updates.

🛠️ Open Source Contributions

As an open-source project, @animatereactnative/marquee welcomes contributions! You can help by:

Submitting pull requests for enhancements or bug fixes.
Opening issues for feature requests or bugs.
Providing feedback on usability and new features.

Visit the GitHub repository for more details:

🚀 Final Code Example


1import React from 'react';
2import { Marquee } from '@animatereactnative/marquee';
3import { Text, Image, View, StyleSheet } from 'react-native';
4
5export default function App() {
6  return (
7    <View style={styles.container}>
8      {/* Marquee Component */}
9      <Marquee speed={1.5} spacing={20} style={styles.marqueeContainer}>
10        {/* Custom Content */}
11        <Image
12          source={{ uri: '<https://placekitten.com/200/200>' }}
13          style={styles.image}
14        />
15        <Text style={styles.text}>Limited-time offers available now!</Text>
16        <Image
17          source={{ uri: '<https://placekitten.com/200/200>' }}
18          style={styles.image}
19        />
20        <Text style={styles.text}>Sign up today for exclusive discounts!</Text>
21      </Marquee>
22    </View>
23  );
24}
25
26const styles = StyleSheet.create({
27  container: {
28    flex: 1,
29    justifyContent: 'center',
30    alignItems: 'center',
31  },
32  marqueeContainer: {
33    paddingVertical: 10,
34    backgroundColor: '#333',
35    borderRadius: 5,
36  },
37  image: {
38    width: 50,
39    height: 50,
40    borderRadius: 25,
41    marginHorizontal: 10,
42  },
43  text: {
44    color: '#fff',
45    fontSize: 18,
46    fontWeight: 'bold',
47    marginHorizontal: 10,
48  },
49});
50
51

This guide covers everything you need to get started with @animate-react-native/marquee, from installation to implementation and customization. Enjoy bringing smooth marquee effects to your app!