How update output param value in interpolate?

[evgenyshenets91]

I am using react-native-reanimated": "^3.3.0.
I have next structure in my project and my header includes some context which is come from API, that means after getting info I have to put some text in header. I don't have static height for it and it dynamically update his height.

<View>
<Header>
<Animated.FlatList
            ListHeaderComponent={<QuickLinks navigation={navigation} />}
            data={cardsNavItems}
            scrollEventThrottle={16}
            onScroll={handleScroll}
            renderItem={({ item }) => {
              return <HorizontalNavCard {...item} cardStyle={styles.card} clickable={true} />;
            }}
            keyExtractor={(_, index) => index.toString()}
          />
</View>

For getting the latest height I can use onLayout with first render and I successfully get it, like not 0. But when I add next code, where I put descriptionHeight to my View inside the

seems that descriptionHeight changes my height to 0 and I for some reasons viewHeight inside descriptionHeight doesn't apply output value.

  const measureHeight = useCallback(() => {
    if (viewRef.current && !isHeightMeasured.current) {
      viewRef.current.measure((x, y, width, height) => {
        setViewHeight(height);
        isHeightMeasured.current = true;
      });
    }
  }, [viewRef]);

  const [viewHeight, setViewHeight] = React.useState(0);
  
  const descriptionHeight = useAnimatedStyle(() => {
    const height = interpolate(scrollPosition.value, [0, 500], [viewHeight, 0], Extrapolate.CLAMP);
    return {
      height,
    };
  }, [scrollPosition.value, viewHeight]);