1.0.0 • Published 2 years ago
react-native-rolling-bar v1.0.0
react-native-rolling-bar
Rolling bar UI component for React Native.
Demo
Install
npm install react-native-rolling-barProps
| 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
- 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>- 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