react-native-rolling-bar

Rolling bar UI component for React Native.

Demo

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>

2. 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