React Native Revolver

A pure JavaScript component supporting revolving animation

Installation

npm install --save react-native-revolver
or
yarn add react-native-revolver

Usage

import Revolver from 'react-native-revolver';

const ExampleWithTexts = () => {
  return (
    <Revolver
      data={[
        'Is this the real life?',
        'Is this just fantasy?',
        'Caught in a landside, no escape from reality',
      ]}
    />
  )
}

const ExampleWithElements = () => {
  return (
    <Revolver
      data={[
        <View
          key={1}
          style={{
            width: 100,
            height: 15,
            backgroundColor: 'pink',
          }}
        />,
        <Text key={2}>Is this the real life? Is this just fantasy?</Text>,
        <Text key={3} style={{ color: 'green' }}>
          Caught in a landside, no escape from reality
        </Text>
      ]}
    />
  )
}

Properties

Revolver component inherits ViewProps and the followings are configurable:

| Prop | Type | Required | Default | Description |-----------|--------------------------------|----------|---------| ----------- | data | string[] or ReactElement[] | true | | items to animate | direction | up or down | false | up | the direction of sliding animation | delay | number (ms) | false | 3000 | delay between animations | duration | number (ms) | false | 600 | duration of the sliding animation | textProps | TextProps | false | | if items are string, this textProps will apply to all items

Contribution

Do you have any idea or want to change something? Just open an issue. Contributions are always welcome.