CODEWITHSUNDEEP
javascriptreactjsreact-native
omarmo93
omarmo93

Reputation: 67

Trying to give a fade animation to my image carousel, React-Native

I want to animate this image carousel in reactNative, but have no idea how to start. Read the documentation about animations but still really stuck, have no idea how to incorporate it in. I tried it this way but keep getting a big fat error. Help!

import React from 'react';
import {StyleSheet, View, ScrollView, Dimensions, Image, Animated} from 'react-native'

const DEVICE_WIDTH = Dimensions.get('window').width;

class BackgroundCarousel extends React.Component {
    scrollRef = React.createRef();
    constructor(props) {
        super(props);

        this.state = {
            selectedIndex: 0,
            opacity: new Animated.Value(0)
        };
    }

    componentDidMount = () => {
        Animated.timing(this.state.opacity , {
            toValue: 1,
            duration: 500,
            useNativeDriver: true,
        }).start();
        setInterval(() => {
            this.setState(
                prev => ({ selectedIndex: prev.selectedIndex === 
                    this.props.images.length - 1 ? 0 : prev.selectedIndex +1 }),
            () => {
                this.scrollRef.current.scrollTo({
                    animated: true,
                    y: 0,
                    x: DEVICE_WIDTH * this.state.selectedIndex
                });
            }
            );
        }, 6000);

    };



    componentWillUnmount() {
        clearInterval(this.setState);
    }

    render() {
        const {images} = this.props
        const {selectedIndex} = this.state
        return (
            <Animated.Image
                onLoad={this.onLoad}
                {...this.props}
                style={[
                    {
                    opacity: this.state.opacity,
                    },
                    this.props.style,
                ]}
            />
            <View style= {{height: "100%", width: "100%"}}>
                {this.props.children}
                <ScrollView 

                horizontal 
                pagingEnabled
                scrollEnabled={false}
                ref={this.scrollRef}
                >
                    {images.map(image => (
                        <Image
                            key={image}
                            source={image}
                            style={styles.backgroundImage}
                        />
                    ))}
                </ScrollView>
            </View>
        )
    }
}

const styles = StyleSheet.create ({
    backgroundImage: {
        height: '100%',
        width: DEVICE_WIDTH,
    }

});

export default BackgroundCarousel; Any help would be appreciated. Don't know where I'm going wrong. Basically trying to add a fade effect when my background carousel changes from image to image.

Upvotes: 2

Views: 4078

Answers (2)

Aliunco
Aliunco

Reputation: 399

You can also use a simple & optimized library react-native-fadecarousel and use it like this:

import React from 'react'
import { View, StyleSheet, Image } from 'react-native';
import FadeCarousel from 'react-native-fadecarousel';

const FadeCarouselScreen = () => {

    const images = [
        'https://image.shutterstock.com/image-vector/dragon-scream-vector-illustration-tshirt-260nw-1410107855.jpg',
        'https://image.shutterstock.com/image-vector/dragon-head-vector-illustration-mascot-600w-1201914655.jpg',
        'https://i.pinimg.com/474x/b7/1a/bb/b71abb6dd7678bbd14a1f56be5291747--dragon-illustration-samurai-tattoo.jpg'
    ];

    return <FadeCarousel
                loop 
                fadeAnimationDuration={1000} 
                autoPlay={{enable: true , delay: 1000 }}>
        { 
            images.map((image, index) => {
                return <View key={`slide ${index}`} style={styles.slideItem}>
                    <Image style={styles.image} resizeMethod="resize" resizeMode="cover" source={{ uri: image }}/>
                </View>
            })
        }
    </FadeCarousel>
}

const styles = StyleSheet.create({
    image: {
        width: "100%",
        height: 300
    },
    slideItem: {
        width: "100%",
        height: 300,
        justifyContent: "center",
        alignContent: "center"
    }
})

export default FadeCarouselScreen

Upvotes: 0

Raj Rohit Yadav
Raj Rohit Yadav

Reputation: 688

I have fixed your code and removed all errors, copy-paste it in https://snack.expo.io/ and give it some time to load.

Note: I have removed this.props.images for website demo, please change in your real project.

Working fade carousal: https://snack.expo.io/@rajrohityadav/fade-carosal But I have not implemented this using React Animation.

import React from 'react';
import {StyleSheet, View, ScrollView, Dimensions, Image, Animated} from 'react-native'

const DEVICE_WIDTH = Dimensions.get('window').width;

export default class BackgroundCarousel extends React.Component {
    scrollRef = React.createRef();
    constructor(props) {
        super(props);

        this.state = {
            selectedIndex: 0,
            opacity: new Animated.Value(0)
        };
    }

    componentDidMount = () => {
        Animated.timing(this.state.opacity , {
            toValue: 1,
            duration: 500,
            useNativeDriver: true,
        }).start();
        setInterval(() => {
            this.setState(
                prev => ({ selectedIndex: prev.selectedIndex === 
                    3 - 1 ? 0 : prev.selectedIndex +1 }),
            () => {
                this.scrollRef.current.scrollTo({
                    animated: true,
                    y: 0,
                    x: DEVICE_WIDTH * this.state.selectedIndex
                });
            }
            );
        }, 6000);

    };



    componentWillUnmount() {
        clearInterval(this.setState);
    }

    render() {
        const images =[
    'https://image.shutterstock.com/image-vector/dragon-scream-vector-illustration-tshirt-260nw-1410107855.jpg','https://image.shutterstock.com/image-vector/dragon-head-vector-illustration-mascot-600w-1201914655.jpg',
    'https://i.pinimg.com/474x/b7/1a/bb/b71abb6dd7678bbd14a1f56be5291747--dragon-illustration-samurai-tattoo.jpg']//this.props
        const {selectedIndex} = this.state
        return (
          <>
            <Animated.Image
                onLoad={this.onLoad}
                {...this.props}
                style={[
                    {
                    opacity: this.state.opacity,
                    },
                    this.props.style,
                ]}
            />
            <View style= {{height: "100%", width: "100%"}}>
                {this.props.children}
                <ScrollView 

                horizontal 
                pagingEnabled
                scrollEnabled={false}
                ref={this.scrollRef}
                >
                    {images.map(image => (
                        <Image
                            key={image}
                            source={image}
                            style={styles.backgroundImage}
                        />
                    ))}
                </ScrollView>
            </View>
            </>
        )
    }
}

const styles = StyleSheet.create ({
    backgroundImage: {
        height: '100%',
        width: DEVICE_WIDTH,
    }

});

Upvotes: 2

Related Questions