title: React Native interpolate maximum call stack size exceeded
body: <p>I'm kinda new to RN and I'm having a hard time tracking down a "Maximum stack call exceeded". I understand that the error is related to some kind of infinite loop going on in my code but I can't find it. </p>
  
  <p><strong>Code</strong></p>
  
  <p>EventScreen:</p>
  
  <pre class="lang-js prettyprint-override"><code>import Animated, { interpolate, Extrapolate, Value } from "react-native-reanimated";
  
  export default class EventScreen extends React.Component&lt;EventScreenProps, EventScreenState&gt; {
    render() {
      const animatedValueRef = new Value(0);
      const height = interpolate(animatedValueRef, {
        inputRange: [-MAX_HEADER_HEIGHT, 0],
        outputRange: [0, MAX_HEADER_HEIGHT],
        extrapolate: Extrapolate.CLAMP
      });
  
      return (
        &lt;SafeAreaView style={style.screenContainer}&gt;
          &lt;CollapsibleHeaderBar backgroundImage={event?.flyer} animatedValueRef={animatedValueRef} &gt;
            &lt;TouchableOpacity style={style.shareButton}&gt;
              &lt;Icon2 name="ios-share-alt" size={24} style={style.shareButtonIcon} /&gt;
              &lt;Text style={style.shareButtonText}&gt;CONDIVIDI&lt;/Text&gt;
            &lt;/TouchableOpacity&gt;
          &lt;/CollapsibleHeaderBar&gt;
          &lt;Animated.ScrollView
            style={style.flexOne}
            onScroll={onScroll({ y: animatedValueRef })}
            showsVerticalScrollIndicator={false}
            scrollEventThrottle={1}&gt;
            &lt;View style={style.cover}&gt;
              &lt;Animated.View style={[style.gradient, { height }]} /&gt;
              &lt;LinearGradient style={style.flexOne} colors={["transparent", "rgba(0, 0, 0, 0.2)", Colors.appBackgroundColorValue]} /&gt;
            &lt;/View&gt;
            ...
          &lt;/Animated.ScrollView&gt;
          ...
        &lt;/SafeAreaView&gt;
      )
    }
  }
  </code></pre>
  
  <p>CollapsibleHeaderBar:</p>
  
  <pre class="lang-js prettyprint-override"><code>import { interpolate, Extrapolate, color } from "react-native-reanimated";
  
  export default class CollapsibleHeaderBar extends React.PureComponent&lt;CollapsibleHeaderBarProps&gt; {
  
    render() {
      const { backgroundImage, collapsedText, animatedValueRef } = this.props;
      const opacity = interpolate(animatedValueRef, {
        inputRange: [-50, 0, HEADER_DELTA + 60],
        outputRange: [0, 0, 1],
        extrapolate: Extrapolate.CLAMP,
      });
      const textOpacity = interpolate(animatedValueRef, {
        inputRange: [HEADER_DELTA - 30, HEADER_DELTA],
        outputRange: [0, 1],
        extrapolate: Extrapolate.CLAMP,
      });
      const backgroundColor = color(18, 18, 18, interpolate(animatedValueRef, {
        inputRange: [MIN_HEADER_HEIGHT, HEADER_DELTA - 30],
        outputRange: [0.3, 1],
        extrapolate: Extrapolate.CLAMP,
      }));
      const borderBottomColor = color(65, 65, 65, interpolate(animatedValueRef, {
        inputRange: [MIN_HEADER_HEIGHT, HEADER_DELTA - 30],
        outputRange: [0.3, 1],
        extrapolate: Extrapolate.CLAMP,
      }));
      return (
        &lt;View&gt;
          &lt;Animated.View style={style.headerContainer}&gt;
            &lt;Image style={style.backgroundImage} source={{ uri: backgroundImage }} /&gt;
            &lt;Animated.View style={[style.barOverlay, { opacity }]} /&gt;
          &lt;/Animated.View&gt;
          &lt;Animated.View style={[style.barAnimation, { backgroundColor, borderBottomColor }]}&gt;
            &lt;View style={style.barContainer}&gt;
              &lt;TouchableOpacity onPress={this._onBackPressed}&gt;
                &lt;Icon name="chevron-left" size={24} style={style.goBackIcon} /&gt;
              &lt;/TouchableOpacity&gt;
              &lt;Animated.Text style={{ opacity: textOpacity }}&gt;{collapsedText}&lt;/Animated.Text&gt;
            &lt;/View&gt;
            {this.props.children}
          &lt;/Animated.View&gt;
        &lt;/View&gt;
      );
    }
  }
  </code></pre>
  
  <p><strong>Error</strong></p>
  
  <p><a href="https://i.stack.imgur.com/NBuWk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NBuWk.png" alt="enter image description here"></a></p>
  
  <p><strong>What I've understood so far</strong></p>
  
  <ul>
  <li>The error seems to be related to me passing a react-native-reanimated Value from the EventScreen to the CollapsibleHeaderBar</li>
  <li>The react-native-reanimated Value by itself is working since it's used on the EventScreen (see the height interpolation)</li>
  <li>The problem seems also to be related to the interpolation on the CollapsibleHeaderBar</li>
  <li>Commenting out the CollapsibleHeaderBar from the EventScreen solves the problem</li>
  <li>Commenting out the styles with the interpolation components in the CollapsibleHeaderBar also solves the problem</li>
  <li>The code apparently stops working after the render phase of the CollapsibleHeaderBar</li>
  <li>I've seen other examples of this kind of cross-components animations, so theoretically it should be possible</li>
  <li>The onScroll event never gets triggered (apparently the error occurs before)</li>
  <li>Each render function is called only once, so the loop is not there</li>
  </ul>
  
  <p>Thanks for your help.</p>