animate-react-native / marquee Goto Github PK

only scroll if scrolling is neccessary

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

Updated language switch to RTL mode; addressed library limitations and corrected default behavior to align with RTL settings.

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?