rn-fade-carousel

1.0.0 • Public • Published

React Native Fade Carousel

React Native Fade Carousel is a RN package to allow transitions between images using a fade in/out effect.

Preview

Installation

npm install rn-fade-carousel --save

Usage

Properties:

Property Type Description
elements Array An array of Image elements. You need to specify the size of the images in the styles props of the Image element (See sample below).
containerStyle Object The style object configuration that you would like for the carousel wrapper View.
fadeDuration Int The time in milliseconds that you would the fade transitions to last.
stillDuration Int The time in milliseconds that you would like the image to stay visible after the fade in transition.
start Boolan a flag to tell the component to start (true) or stop (false) the transition of the images.

Sample

import React, { Component } from "react";
import { View, Image, Dimensions } from "react-native";
import FadeCarousel from "rn-fade-carousel";
import Wall1 from "./src/images/01.jpg";
import Wall2 from "./src/images/02.jpg";
import Wall3 from "./src/images/03.jpg";
import Wall4 from "./src/images/04.jpg";
 
const { height: screenHeight, width: screenWidth } = Dimensions.get("window");
 
export default class App extends Component {
    slides = [
        <Image source={Wall1} style={styles.imageScroll} resizeMode="cover" />,
        <Image source={Wall2} style={styles.imageScroll} resizeMode="cover" />,
        <Image source={Wall3} style={styles.imageScroll} resizeMode="cover" />,
        <Image source={Wall4} style={styles.imageScroll} resizeMode="cover" />
    ];
 
    render() {
        return (
            <View style={styles.containerStyle}>
                <FadeCarousel
                    elements={this.slides}
                    containerStyle={styles.carouselContainer}
                    fadeDuration={2000}
                    stillDuration={2000}
                    start={true}
                />
            </View>
        );
    }
}
 
const styles = {
    containerStyle: {
        flex: 1
    },
    carouselContainer: {
        flex: 1,
        alignItems: "center",
        justifyContent: "center"
    },
    imageScroll: {
        width: screenWidth,
        height: screenHeight
    }
};

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

Package Sidebar

Install

npm i rn-fade-carousel

Weekly Downloads

2

Version

1.0.0

License

MIT

Unpacked Size

8.64 kB

Total Files

5

Last publish

Collaborators

  • davidrenji