Animating Images from scale 0 to 1

Issue Description

When using Animated.event to map the user’s scroll position to the scale of an image, if the scroll position is such that the scale of the image is zero when the view is first rendered then the image will never be displayed.

Gifs speak a thousand words…

The yellow box error is complaining about fetch,

Unable to symbolicate stack trace: fetch is not a function

Most likely because I am using Apollo Client, #9605

Steps to Reproduce / Code Snippets

constructor(props) {
    super(props);

    this.state = {
      scrollY: new Animated.Value(SCROLL_MIN)
    };

    this.onScroll = Animated.event([{
      nativeEvent: {
        contentOffset: {
          y: this.state.scrollY
        }
      }
    }]);
  }

renderAvatar() {
    if(this.props.presentationStyle !== expanded) {
      return null;
    }

    const props = {
      style: [styles.avatar],
      source: {
        uri: this.state.business.avatar
      }
    };

    const interpolate = {
      inputRange: [SCROLL_MIN, SCROLL_MAX_AVATAR],
      extrapolate: 'clamp'
    };

    const scale = this.state.scrollY.interpolate({
      ...interpolate,
      outputRange: [1, 0]
    });

    const translateY = this.state.scrollY.interpolate({
      ...interpolate,
      outputRange: [0, TRANSLATE_AVATAR_MAX]
    });

    props.style.push({
      transform: [{translateY}, {scale}]
    });

    return <Animated.Image {...props} />
  }

Expected Results

The image should scale from 0 to 1 when the initial scale is 0.

Additional Information

• React Native version: 0.35.0
• Platform(s) (iOS, Android, or both?): IOS
• Operating System (macOS, Linux, or Windows?): OSX

[Daniel-Goodwin]

In the meantime set the initial scale value to 0.01, that will force it to be rendered but is not big enough to be visible.

[kevinmcampos]

@Daniel-Goodwin you sir, has just saved my day!