title: Trying to give a fade animation to my image carousel, React-Native
body: <p>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!</p>
  
  <pre><code>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 = () =&gt; {
          Animated.timing(this.state.opacity , {
              toValue: 1,
              duration: 500,
              useNativeDriver: true,
          }).start();
          setInterval(() =&gt; {
              this.setState(
                  prev =&gt; ({ selectedIndex: prev.selectedIndex === 
                      this.props.images.length - 1 ? 0 : prev.selectedIndex +1 }),
              () =&gt; {
                  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 (
              &lt;Animated.Image
                  onLoad={this.onLoad}
                  {...this.props}
                  style={[
                      {
                      opacity: this.state.opacity,
                      },
                      this.props.style,
                  ]}
              /&gt;
              &lt;View style= {{height: "100%", width: "100%"}}&gt;
                  {this.props.children}
                  &lt;ScrollView 
  
                  horizontal 
                  pagingEnabled
                  scrollEnabled={false}
                  ref={this.scrollRef}
                  &gt;
                      {images.map(image =&gt; (
                          &lt;Image
                              key={image}
                              source={image}
                              style={styles.backgroundImage}
                          /&gt;
                      ))}
                  &lt;/ScrollView&gt;
              &lt;/View&gt;
          )
      }
  }
  
  const styles = StyleSheet.create ({
      backgroundImage: {
          height: '100%',
          width: DEVICE_WIDTH,
      }
  
  });
  </code></pre>
  
  <p>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.</p>