React Native Carousel

@tttstudios/react-native-carousel is a React Native component to make it simple to display a series of images with a crossfade animation between them.

Installation

npm install --save @tttstudios/react-native-carousel or yarn add @tttstudios/react-native-carousel

Installation Requirements

We make use of React hooks so make sure you have at least:

• React 16.8
• React Native 0.60

Usage

import { View } from 'react-native'
import { RNCarousel } from '@tttstudios/react-native-carousel'

...

    const bulbasaur = require('./assets/bulbasaur.png')
    const squirtle = require('./assets/squirtle.png')
    const charmander = require('./assets/charmander.png')

    const SOURCES = [bulbasaur, squirtle, charmander]

...

    <View style={{ flex: 1 }}>
        <RNCarousel sources={SOURCES}/>
    </View>

...

More Advanced Usage

import { RNCarousel } from '@tttstudios/react-native-carousel'

...

    const bulbasaur = require('./assets/bulbasaur.png')
    const squirtle = require('./assets/squirtle.png')
    const charmander = require('./assets/charmander.png')

    const SOURCES = [bulbasaur, squirtle, charmander]

...

  <RNCarousel
    sources={SOURCES}
    onItemIn={() => console.log('Hello!')}
    onItemOut={() => console.log('Bye!')}
    inFocusDuration={2000}
    animationDuration={1000}
    containerStyle={{ paddingHorizontal: 20 }}
    contentStyle={{ height: '50%' }}>
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <TouchableOpacity
        style={{
        height: 50,
        width: 300,
        backgroundColor: 'black',
        opacity: 0.75,
        borderRadius: 10,
        alignItems: 'center',
        justifyContent: 'center'}}
        onPress={() => console.log("You pressed me!")}>
        <Text style={{ fontSize: 16, color: 'white' }}>Gotta Catch 'Em All!</Text>
      </TouchableOpacity>
    </View>

...

Parameters

| Parameter | Required | Description | | ------------------ | -------- | ------------------------------------------------------- | | sources | YES | Images to be displayed | | onItemIn() | NO | Function called when an image goes out of view | | onItemOut() | NO | Function called when an image comes into view | | inFocusDuration | NO | Time in ms that an image is shown | | animationDuration | NO | Time in ms that the transition between two images takes | | children | NO | children to be displayed on top of carousel images | | containerStyle | NO | Styling applied to container | | contentStyle | NO | Styling applied to content |

Roadmap

• [x] Typescript definition file
• [x] Typescript implementation
• [x] Add basic unit tests
• [ ] Add integration tests
• [ ] Add support for video

Contributors

Premium Support By TTT Studios

react-native-carousel is presented by the mobile team at TTT Studios. We are a Digital Innovation Studio based out of Vancouver, Canada, delivering custom software and solutions that are designed and developed 100% in-house. The technologies we work with include AR & VR, IoT, AI, security & encryption, and cloud computing.