Skip to content

floydkim/react-native-rolling-bar

Repository files navigation

react-native-rolling-bar

Rolling bar UI component for React Native.

Demo

demo image

Install

npm install react-native-rolling-bar

Props

Name type default value description
customStyle Object - custom styles for container
interval number 3000 content change interval time in milliseconds
animationDuration number 600 fade transition duration in milliseconds
delayBetween number 100 delay in milliseconds between fade-out and fade-in of next content (too short delay would cause incorrect transition)
defaultStyle boolean false If false, removes default style. Set true If you want to use default style.
forceRoll boolean false If true, force rolling animation even if there is only one content.

Usage

  1. As a rolling banner
import RollingBar from 'react-native-rolling-bar';

// ...

  <RollingBar interval={3000} defaultStyle={true}>
    // You can fully customize this RollingBar component with customStyle prop.
    <ChildComponentOne />
    <ChildComponentTwo />
    <ChildComponentTree />
    ...
  </RollingBar>
  1. As a transition content
import RollingContent from 'react-native-rolling-bar';

// ...

  <YourBarComponent>
    // Without default style, you can also put the RollingBar inside your bar component.
    <RollingContent interval={3000} defaultStyle={false} customStyle={yourStyle}>
      <ChildOne />
      <ChildTwo />
      ...
    </RollingContent>
  </YourBarComponent>

Acknowledge

Project template generated using react-native-builder-bob 👍

License

MIT