react-native-perfect-marquee

React Native Perfect Marquee

React Native Perfect Marquee is a lightweightReact Native component that harnesses silky smooth marquees for both ANDROIDos and Ios.Also RTL compatible (I18nManager)

This React Native Perfect Marquee component allows text to scroll smoothly in both directions (left to right or right to left). It supports both a single title and looped title, offering a seamless, customizable animation with various dynamic properties.

Latest Update

numOfRepetitions=120 default (If render is not an issue manually set to 400 to 800 as per requirement). Default is sufficient.

RTL compatible (I18nManager)

Any Issues

Please let me know
Email me on- [e-mail]
Message me on Instagram- m_deepakverma (Quick response)
Link-- https://www.instagram.com/m_deepakverma/profilecard/?igsh=MXBpYjdua2FwbDgzaw==

Installation

npm i react-native-perfect-marquee

Usage

First Configure

react-native-reanimated

Step 1: Install the package

npm install react-native-reanimated

Step 2: Add Reanimated's babel plugin

module.exports = { presets: [ ... // don't add it here : ], plugins: [ ... 'react-native-reanimated/plugin', ], };

Step 3: Clear Metro bundler cache (recommended)

npm start -- --reset-cache

Did'nt worked

Try restart your whole project

Still not working

Check official documentation of react-native-reanimated on below link https://docs.swmansion.com/react-native-reanimated/docs/fundamentals/getting-started/

To use the component, first import Marquee into your file:

Reload metro after making changes or restart app import Marquees from "react-native-perfect-marquee"; Then wrap the tags around any component or text you'd like to slide. //always wrap it with outer container for work perfectly

A sample file might look like this:

 import React from "react";
 import { View } from "react-native";
 import Marquees from  "react-native-perfect-marquee";
 const App =({data})=>{ 
   return
    ( 
     
   <Marquees 
  textColor={data?.style?.text_color}  //you can also use it dynamically
  fontWeight={data?.style?.fontWeight}
  textColor={'red'}
      fontWeight={'900'}
      fontFamily={Rubik}
      fontSize={32}
       autofill ={true}  or just write autofill
      marqueeDirection={'left'}  OR {'right}
      marqueeSpeed={10}
      title={'ENTER YOUR TEXT HERE'}
      letterSpacing={5}
      backgroundColor={'black'}
      marginTop={10}
      marginBottom={10}
      padding={22}
                />
            />
  </View>
        )
      }
      export default App;

Prop	Description	Value	Example
textColor	Customize the color of the scrolling text.	string	textColor={'green'}
fontWeight	Control the font weight of the scrolling text.	'900'	fontWeight={'900'}
fontFamily	Specify the font family for the title text.	string	fontFamily={'Arial'}
fontSize	Adjust the font size of the title text.	32	fontSize={32}
autofill	Automatically adjusts the text width for smooth scrolling.	boolean	autofill={true}
marqueeDirection	Set the scroll direction of the marquee, either left or right.	`'left'	'right'
marqueeSpeed	Control the speed of the scrolling text.	10 to 100	marqueeSpeed={10}
title	The actual text content that will scroll in the marquee.	string	title={'Marquee'}
letterSpacing	Define the spacing between letters of the scrolling text.	1 to 5	letterSpacing={2}
backgroundColor	Set the background color of the marquee.	string	backgroundColor={'red'}
marginTop	Add margin to the top of the marquee.	number	marginTop={10}
marginBottom	Add margin to the bottom of the marquee.	number	marginBottom={10}
padding	Add padding around the content inside the marquee.	number	padding={10}

Support Me on PayPal Or GooglePay

Welcome help me to build this awesome lib.

[PayPal]

Or via Google Pay:

UPI-- deepak142verma@okaxis

Any amount appreciated