0.1.1 • Published 7 months ago
react-native-roller v0.1.1
react-native-roller
React Native component for rolling things.
Installation
Supported version: react-native >= 0.68.0
yarn add react-native-rolleror
npm i react-native-rollerExample
Scroll texts in a loop, one row at a time
import Roller from 'react-native-roller'
<Roller
dataSource={[
'1 - While there is life, there is hope',
'2 - Do what you say,say what you do',
'3 - All things come to those who wait',
'4 - Nothing seek, nothing find'
]}
style={styles.bg}
/>
Display 3 rows in the visible area
<Roller
dataSource={[
'1 - While there is life, there is hope',
'2 - Do what you say,say what you do',
'3 - All things come to those who wait',
'4 - Nothing seek, nothing find'
]}
itemStyle={styles.bg}
visibleRowsNum={3}
spaceBetween={6}
/>
Enable the visible offset
<Roller
dataSource={[
'1 - While there is life, there is hope',
'2 - Do what you say,say what you do',
'3 - All things come to those who wait',
'4 - Nothing seek, nothing find'
]}
itemStyle={styles.bg}
visibleRowsNum={3}
spaceBetween={6}
enableVisibleOffset
/>
bg styles:
{
backgroundColor: 'rgba(0, 0, 0, 0.5)',
borderRadius: 4,
paddingHorizontal: 9,
}API
| prop | type | default value | description |
|---|---|---|---|
dataSource | any[] | DataSource array for rows | |
visibleRowsNum | number | 1 | Number of rows visible |
rowHeight | number | 30 | Height per row |
spaceBetween | number | 0 | Space between rows |
interval | number | 3000 | Interval between two rolling |
animationDuration | number | 600 | Duration of each rolling animation (milliseconds) |
fadeOutDuration | number | 600 | Duration of the fade-out animation for the first row |
fadeInDuration | number | 600 | Duration of the fade-in animation for the last row |
style | StyleProp<ViewStyle> | Container style | |
itemStyle | StyleProp<ViewStyle> | Item style | |
textStyle | StyleProp<TextStyle> | Text style | |
shouldRoll | boolean \| ((rowsLen: number, visibleRowsNum: number) => boolean) | true | Whether to roll |
forceRoll | boolean | true | Whether to roll when the number of dataSource is insufficient |
enableVisibleOffset | boolean | false | Whether to enable the visible offset |
License
MIT, see the LICENSE file for detail.