title: How to intially set opacity when using interpolation
body: <p>I have quite an issue, where I cannot set initially opacity of an image as 0 when using interpolated scroll value.</p>
  
  <p>So when I am using <code>logoOpacity</code> value Animated.View is fully visible, but for example if I use <code>__opacity</code> it does apply valid value and image is partly visible.</p>
  
  <p>Using <code>logoOpacity</code> variable DOES WORK correctly when I am starting to scroll - it's all about the initial value - that I can not set to hide view.</p>
  
  <p>How to achieve to interpolate on scroll and start Animated.View visibility from 0 to 100?</p>
  
  <p>Please see code below:</p>
  
  <pre><code>import React, { Component } from 'react';
  import {
    Animated,
    Platform,
  } from 'react-native';
  import {connectStyle} from "@shoutem/theme/index";
  
  import { View } from '@shoutem/ui/components/View'
  import { Text } from '@shoutem/ui/components/Text'
  import { Image } from '@shoutem/ui/components/Image'
  
  
  import { Fonts, Colors, Layout } from '../../constants';
  
  const HEADER_MAX_HEIGHT = 260; //
  const HEADER_MIN_HEIGHT = 160; // Layout.NAVIGATION_HEADER_HEIGHT; // Platform.OS === 'ios' ? 60 : 73;
  const HEADER_SCROLL_DISTANCE = HEADER_MAX_HEIGHT - HEADER_MIN_HEIGHT;
  
  /**
   * https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e
   *
   */
  class OpportunityBlock extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        scrollY: new Animated.Value(
            // iOS has negative initial scroll value because content inset...
            Platform.OS === 'ios' ? -HEADER_MAX_HEIGHT : 0,
        )
      };
    }
  
    render() {
  
      const { style } = this.props
  
      // Because of content inset the scroll value will be negative on iOS so bring
      // it back to 0.
      const scrollY = Animated.add(
          this.state.scrollY,
          Platform.OS === 'ios' ? HEADER_MAX_HEIGHT : 0,
      );
  
      // Small logo animations
      const logoOpacity = scrollY.interpolate({
        inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
        outputRange: [0, 0, 1],
        extrapolate: 'clamp',
      });
  
      const __opacity = new Animated.Value(0.3);
  
      return (
          &lt;View styleName={"vertical"}&gt;
  
            {/* MAIN CONTENT SECTION **/}
            &lt;Animated.ScrollView
                style={{ flex: 1 }}
                scrollEventThrottle={1}
                onScroll={Animated.event(
                    [{
                      nativeEvent: {
                        contentOffset: { y: this.state.scrollY }
                      }
                    }],
                    { useNativeDriver: true },
                )}
            &gt;
  
              &lt;View style={style.scrollViewContent}&gt;
                &lt;Text&gt;XX&lt;/Text&gt;
              &lt;/View&gt;
            &lt;/Animated.ScrollView&gt;
  
            &lt;Animated.View
                style={[
                  style.logoContainer,
                  {
                    opacity: logoOpacity,
                  },
                ]}
            &gt;
              &lt;Image
                  styleName={'small'}
                  source={{ uri: item.images[0].url }}
              /&gt;
            &lt;/Animated.View&gt;
          &lt;/View&gt;
      );
    }
  }
  
  const style = {
    content: {
      flex: 1,
    },
    logoContainer: {
      position: 'absolute',
      top: 0,
      left:0,
      opacity:0,
      // right: -100, // initial position
      marginTop:30,
      paddingLeft:10,
    },
  
    scrollViewContent: {
      // iOS uses content inset, which acts like padding.
      paddingTop: Platform.OS !== 'ios' ? HEADER_MAX_HEIGHT : 0 // paddingTop: HEADER_MAX_HEIGHT // Platform.OS !== 'ios' ? HEADER_MAX_HEIGHT : 0,
    }
  }
  
  // connect the component to the theme
  export default connectStyle('mbm.common.OpportunityBlock', style)(OpportunityBlock);
  </code></pre>
  
  <p>Test use case:
  It seems issue is related to the scrollY animated value because that case does not work correctly and image is fully visible even tough scrollY is 0. Maybe something with intital scroll value?</p>
  
  <pre><code>const logoOpacityDoesNotWork = scrollY.interpolate({
    inputRange: [0, 0, 250],
    outputRange: [0.1, 0.1, 1],
    extrapolate: 'clamp',
  });
  
  
  const logoOpacityWorks = (new Animated.Value(120)).interpolate({
        inputRange: [0, 0, 250],
        outputRange: [0.1, 0.1, 1],
        extrapolate: 'clamp',
      });
  </code></pre>