animate-react-native
add more directions and delay to marquee
Hey @catalinmiron
This library is great, thanks for open-sourcing it! I wanted to contribute back by providing a super simple adaptation of your code to also support vertical marquee, along with additional directions like in the HTML marquee, since I've seen myself needing this recently. I also added a delay prop if people want to delay starting the animation.
Quick demo (over 10MB):
https://share.cleanshot.com/lgcYtj3J
Code used for the demo:
<View>
<View style={{ flexDirection: 'row', columnGap: 20 }}>
<Marquee spacing={8} speed={1} direction="up" delay={200}>
{images.map((image, index) => (
<View key={index}>
<Image key={index} source={{ uri: image }} style={{ width: 100, height: 100 }} />
{index !== images.length - 1 && <Space height={8} />}
</View>
))}
</Marquee>
<Marquee spacing={8} speed={1} direction="down" delay={800}>
{images.map((image, index) => (
<View key={index}>
<Image key={index} source={{ uri: image }} style={{ width: 100, height: 100 }} />
{index !== images.length - 1 && <Space height={8} />}
</View>
))}
</Marquee>
<Marquee spacing={8} speed={1} direction="up" delay={1400}>
{images.map((image, index) => (
<View key={index}>
<Image key={index} source={{ uri: image }} style={{ width: 100, height: 100 }} />
{index !== images.length - 1 && <Space height={8} />}
</View>
))}
</Marquee>
</View>
<Marquee spacing={8} speed={1} direction="right">
<Text>The quick brown fox jumps over the lazy dog.</Text>
</Marquee>
<View style={{ height: 10 }} />
<Marquee spacing={8} speed={1} direction="left">
<Text>The quick brown fox jumps over the lazy dog.</Text>
</Marquee>
</View>
The PR changes just the source code of the component, nothing else in the library. If there's any other "housekeeping" stuff needed to support this properly, let me know!
Good day,
@catalinmiron can this be merged, please?
@catalinmiron hi, I'm a subscriber to AnimateReactNative and love the product. Would you happen to consider merging this PR? Would love for the vertical marquee direction.
Thanks!
