Function Example

example/src/App.tsx:16–109

()

}

function Example() {
  const ref = React.useRef<MarqueeRef>(null);
  return (
    <View style={styles.container}>
      <StatusBar hidden />
      <Marquee speed={1}>
        <Heading primary={primary}>@animatereactnative/marquee</Heading>
      </Marquee>
      <Marquee spacing={20} speed={1}>
        <Heading primary={primary}>Powered by AnimateReactNative.com</Heading>
      </Marquee>
      <Marquee spacing={20} speed={2}>
        <Heading primary={primary}>Built with Reanimated</Heading>
      </Marquee>
      <Marquee spacing={10} speed={0.75} style={{ marginTop: 12 }}>
        <Box size={50} primary={primary} />
      </Marquee>
      <Marquee
        ref={ref}
        spacing={10}
        speed={4}
        style={{ marginTop: 12 }}
        reverse
        frameRate={30}
      >
        <View style={{ flexDirection: 'row' }}>
          {[...Array(5).keys()].map((i) => {
            return (
              <Box
                key={`box-${i}`}
                spacing={i === 4 ? 0 : 10}
                size={120}
                primary={primary}
              >
                <Heading primary={!primary}>{i}</Heading>
              </Box>
            );
          })}
        </View>
      </Marquee>
      <View
        style={{
          flexDirection: 'row',
          height: 300,
          padding: 10,
          overflow: 'hidden',
        }}
      >
        {[...Array(3).keys()].map((i) => {
          return (
            <Marquee
              spacing={10}
              speed={1}
              style={{ marginTop: 12 }}
              reverse={i === 1}
              frameRate={60}
              key={`marquee-${i}`}
              direction="vertical"