react-native-perfect-marquee

React Native Perfect Marquee Component React Native Perfect Marquee is a lightweightReact Native component that harnesses silky smooth marquees. 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.

Installation

Run in the command prompt :

npm i react-native-perfect-marquee

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

import Marquees from "react-native-perfect-marquee";

Then wrap the tags around any component or text you'd like to slide. <Marquees 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} />

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} /> /> ) } export default App;

Props Explained:

Bidirectional Scrolling: Marquee can scroll both left and right, based on user preference. Smooth Animation: Scrolling is continuous and smooth, enhancing user experience. Customizable Appearance: Supports multiple properties for full customization of text and background. Autofill Support: Dynamically adjusts text width for perfect scrolling. Dynamic Properties: textColor: Customize the text color.

Example: textColor={'green'} fontWeight: Control the font weight.

Example: fontWeight={'800'} fontFamily: Specify the font family for the title text.

Example: fontFamily={'Arial'} fontSize: Adjust the font size of the title.

Example: fontSize={32} autofill: Automatically adjusts the text width for scrolling.

Example: autofill={true} marqueeDirection: Set the scroll direction ('left' or 'right').

Example: marqueeDirection={'left'} marqueeSpeed: Control the speed of the scrolling text.

Example: marqueeSpeed={2} title: The actual text content that will scroll.

Example: title={'Welcome to React Native Marquee'} letterSpacing: Define the spacing between letters.

Example: letterSpacing={2} backgroundColor: Set the background color of the marquee.

Example: backgroundColor={'black'} marginTop and marginBottom: Add margins to the top and bottom.

Example: marginTop={10}, marginBottom={20} padding: Add padding around the marquee content.

Example: padding={15}