superRaytin/react-native-roller

React Native component for rolling things.

react-native-roller

React Native component for rolling things.

Installation

Supported version: react-native >= 0.68.0

yarn add react-native-roller

or

npm i react-native-roller

Example

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.