10
React Native Marquee component
source link: https://reactnativeexample.com/react-native-marquee-component/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
React Native Marquee
animatereactnative-marquee.mp4
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/marqueeAlso, 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
GitHub
</div
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK