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%' }}
/>
...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 |
| containerStyle | NO | Styling applied to container |
| contentStyle | NO | Styling applied to content |
Roadmap
- Typescript definition file
- Typescript implementation
- Add basic unit tests
- Add integration tests
- Add support for video
Contributors
Odin Mebesius |
|---|
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.
