@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.
npm install --save @tttstudios/react-native-carousel
or
yarn add @tttstudios/react-native-carousel
We make use of React hooks so make sure you have at least:
- React 16.8
- React Native 0.60
import{View}from'react-native'import{RNCarousel}from'@tttstudios/react-native-carousel'
...
constbulbasaur=require('./assets/bulbasaur.png')constsquirtle=require('./assets/squirtle.png')constcharmander=require('./assets/charmander.png')constSOURCES=[bulbasaur,squirtle,charmander]...<Viewstyle={{flex: 1}}><RNCarouselsources={SOURCES}/></View>
...import{RNCarousel}from'@tttstudios/react-native-carousel'
...
constbulbasaur=require('./assets/bulbasaur.png')constsquirtle=require('./assets/squirtle.png')constcharmander=require('./assets/charmander.png')constSOURCES=[bulbasaur,squirtle,charmander]...<RNCarouselsources={SOURCES}onItemIn={()=>console.log('Hello!')}onItemOut={()=>console.log('Bye!')}inFocusDuration={2000}animationDuration={1000}containerStyle={{paddingHorizontal: 20}}contentStyle={{height: '50%'}}/>
...| 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 |
- Typescript definition file
- Typescript implementation
- Add basic unit tests
- Add integration tests
- Add support for video
Odin Mebesius |
|---|
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.
