Giter Club home page Giter Club logo

marquee's Introduction

React Native Marquee

animatereactnative-marquee.mp4

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
style View style to be applied to Marquee container. NO StyleProp<ViewStyle>

Contributing

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

License

MIT


AnimateReactNative.com - Premium and Custom React Native animations.

marquee's People

Contributors

catalinmiron avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

marquee's Issues

navigation

i use this package but its not working

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import {Marquee} from '@animatereactnative/marquee';

const stockData = [
{name: 'ASPN', price: 100, change: +2.55, color: '#fff'},
{name: 'B', price: 150, change: -1.75, color: '#fff'},
{name: 'Reliance', price: 2200, change: +2.55, color: '#fff'},
{name: 'TATA', price: 150, change: -1.75, color: '#fff'},
];

const generateStockText = () => {
const stocks = stockData.map((item, index) => {
const changeTextColor = item.change > 0 ? styles.greenText : styles.redText;
return (

<Text style={{marginRight: 30,color:"#fff"}}>{item.name}
<Text style={{color:"#fff"}}> โ‚น{item.price}
({item.change}%)

);
});

return <View style={{flexDirection: 'row'}}>{stocks};
};

const StockMarketSwiper = () => {
const stockTexts = generateStockText();

return (

{stockTexts}

);
};

const styles = StyleSheet.create({
container: {
marginVertical: 10,
},
marquee: {
backgroundColor: 'rgba(0,0,0,0)',
flexDirection: 'row',
alignItems: 'center',
},
stockItem: {
backgroundColor: '#232B37',
padding: 8,
margin: 3,
flexDirection: 'row',
alignItems: 'center',
borderRadius: 5,

},
stockText: {
color: 'white',
fontSize: 13,
fontWeight: '400',
},
greenText: {
color: 'green',
},
redText: {
color: 'red',
},
});

export default StockMarketSwiper;

how i fix this

Does not work on web when using the transpiled version directly

When we try to use the component in a NextJS application, nothing is displayed. If we copy the source code in a file and we use the reanimated babel plugin it works but if we don't use the reanimated plugin then it's the same thing than if use the library. This leads me to believe the issue comes from the library being transpiled without using the reanimated plugin (I don't see it included in your babel.config.js) but I don't know more precisely what is really happening. Is there a reason for not using the reanimated babel plugin?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.