rn-fade-carousel v1.0.0

React Native Fade Carousel

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

Installation

npm install rn-fade-carousel --save

Usage

Properties:

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