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.

Any Issues-- Contact me on Instagram Directly m_deepakverma

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 <Marquees> 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;

| 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' | marqueeDirection={'left'}| | 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}` |

Any Issues or any update contact me on Instagram Account m_deepakverma