Help with crash when animating a header

[mikeymop]

My goal is to recreate a 'parallax header', or a header that shrinks in height as a scroll.
Ideally I would be able to hook in more animations, such as the background color or opacity of the header as it shrinks, however I am learning and just want reduce the height for now.

I am doing this using three components (MVE):

Main:

const STATUS_BAR_HEIGHT = Platform.OS === 'ios' ? 45 : StatusBar.currentHeight;
const MIN_HEADER_HEIGHT = 25 + STATUS_BAR_HEIGHT;
const MAX_HEADER_HEIGHT = 200 + STATUS_BAR_HEIGHT;

const MainPage = ({navigation, route}) => {
  const scrollOffset = useSharedValue(0);

  const scrollHandler = useAnimatedScrollHandler({
    onScroll: event => {
      scrollOffset.value = event.contentOffset.y;
    },
  });

  return (
    <>
      <Header theme={theme} scrollOffset={scrollOffset}></Header>
      <PropertyInfo property={property} scrollHandler={scrollHandler} />
    </>
  )

Header:

const Header = ({theme, scrollOffset }) => {
  const container = useAnimatedStyle(() => {
    return { height: (MAX_HEADER_HEIGHT - scrollOffset.value)}
  });

  return (
    <Animated.View style={[HeaderStyles.container, container]}>
      <StatusBar barStyle="dark-content" />
      <Appbar.Header style={{backgroundColor: 'rgba(255,255,255,0)'}}>
        <Text>Button</Text>
      </Appbar.Header>
      <LinearGradient colors={['rgba(255,255,255,0)','rgba(1,1,1,1)']} style={HeaderStyles.linearGradient}>
        <View style={{backgroundColor: 'cyan'}}>
          <Text>
            Header
          </Text>
        </View>
      </LinearGradient>
    </Animated.View>
  )
}

ScrollView

const PropertyInfo = ({property, scrollHandler}) => {
  return (
    <Animated.ScrollView scrollEventThrottle={16} onScroll={scrollHandler}>
      <Text>{JSON.stringify(property, null,2)}</Text>
    </Animated.ScrollView>
  )
}

Currently this functions, in that it shrinks the header as I scroll. However it seems that if I scroll far enough such that the height becomes 0, or if I scroll back far enough such that the height exceeds MAX_HEADER_HEIGHT that the UI thread crashes.

*** Terminating app due to uncaught exception 'NSInternalInconsistencyException', reason: 'Mouting block is expected to not be set'
terminating with uncaught exception of type NSException

I think I need interpolate however I am not really sure. I took a shot by doing:

const container = useAnimatedStyle(() => {
    return { height: interpolate(scrollOffset.value, {
        inputRange: [(-MAX_HEADER_HEIGHT+scrollOffset.value), 0],,
        outputRange: [MAX_HEADER_HEIGHT, MIN_HEADER_HEIGHT],
        extrapolateRight: Extrapolate.CLAMP
      }
    )
    }
  });

My reasoning being that:

• Input ranges needs to be ascending, so if it went from -y to 0, it would output the numbers MAX_HEADER_HEIGHT to MIN_HEADER_HEIGHT.
• output range should be the valid limits I set for the Header height
• extrapolateRight should be used because the sharedvalue in inputRange might exceed 0. Therefore I want to limit it's range by clamping it.

However this gives me an error that is new to me:

Error: Exception in HostFunction: Malformed calls from JS: field sizes are different.

[[28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,28,62],[5,3,5,3,5,3,5,5,3,5,3,5,3,5,5,5,3,5,6],[[3819,"RCTText",1,
...

I know I am missing some understanding, however I have read through the fundamentals and feel as though I have a grasp on sharedValues, etc. I think I am missing something in terms of using the interpolate() function.

Can someone help me fill in the holes in my knowledge?

[mrousavy]

It looks like you're using the wrong interpolate syntax (v1). interpolate in v2 would look like this:

interpolate(scrollOffset.value, [(-MAX_HEADER_HEIGHT+scrollOffset.value), 0], [MAX_HEADER_HEIGHT, MIN_HEADER_HEIGHT], Extrapolate.CLAMP)

[mikeymop]

Yep this was the problem, thank you!

I was a little confused because many examples available were for v1. However with a little bit of time I've found the v2 syntax much easier to understand.

[daxaxelrod]

Hrm narrowed it down to animated fontSize using the v2 interpolate

const fontSize = interpolate(
translateY.value,
[0, 80],
[14, 28],
Extrapolate.CLAMP,
);

[mrousavy]

Also the error is caused by RCTText, maybe try temporarily removing the <Text> component?