React Native Mantine › Miscellaneous
Marquee
Continuously scrolling content loop
Import: import { Marquee } from 'react-native-mantine';
Usage
import { Badge, Marquee } from 'react-native-mantine';
<Marquee duration={20000} gap="md">
<Badge color="blue">React</Badge>
<Badge color="grape">React Native</Badge>
<Badge color="teal">TypeScript</Badge>
</Marquee>
// Vertical marquee
<Marquee
orientation="vertical"
duration={12000}
style={{ height: 120 }}
>
<Text>First announcement</Text>
<Text>Second announcement</Text>
</Marquee>Props
| Prop | Type | Default | Description |
|---|---|---|---|
children (required) | React.ReactNode | Content that is scrolled | |
reverse | boolean | false | If set, the content is scrolled in the opposite direction |
orientation | 'horizontal' | 'vertical' | "horizontal" | Scroll orientation |
repeat | number | 4 | Number of content copies rendered to create a seamless loop |
duration | number | 100000 | Duration of one full loop in ms |
gap | number | "xs" | "sm" | "md" | "lg" | "xl" | "md" | Key of theme.spacing or number, gap between content copies |
fadeEdges | boolean | true | Determines whether edges should be faded with a gradient |
fadeEdgeColor | MantineColor | Color of the fade gradient, should match the background the component is rendered on | |
fadeEdgeSize | number | string | "10%" | Size of the fade gradient |
style | ViewStyle | Additional styles to apply to the root element |