Nearest Phase Modulator

    @tttstudios/react-native-carousel
    TypeScript icon, indicating that this package has built-in type declarations

    1.1.0 • Public • Published

    Banner

    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


    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.

    Empowering Business Through Technology

    Install

    npm i @tttstudios/react-native-carousel

    DownloadsWeekly Downloads

    30

    Version

    1.1.0

    License

    MIT

    Unpacked Size

    15 kB

    Total Files

    7

    Last publish

    Collaborators

    • tttstudios