App crashes when using the hook useHeaderMeasurements

[sahil-republic]

When I am trying to use the animated top value from the useHeaderMeasurements, the app crashing with error regarding the useTabsContext. Currently, I am using this in this way.

export const TopTabBar: React.FC = () =>  {

 const { height, top } = useHeaderMeasurements();

  return (
      <Tabs.Container
        pagerProps={{ scrollEnabled: false }}
        renderHeader={Header}
        ref={tabsRef}
        minHeaderHeight={64}
        renderTabBar={(props) => (
          <MaterialTabBar
            {...props}
            contentContainerStyle={{
              backgroundColor: 'white',
              paddingHorizontal: 20,
            }}
            scrollEnabled
            activeColor="rgba(48, 31, 245, 1)"
            indicatorStyle={{
              backgroundColor: 'rgba(48, 31, 245, 1)',
              height: 3,
              borderTopLeftRadius: 8,
              borderTopRightRadius: 8,
            }}
            labelStyle={{
              fontSize: 14,
              fontFamily: 'Inter-SemiBold',
              lineHeight: 16.87,
              textTransform: 'capitalize',
            }}
          />
        )}
      >
        <Tabs.Tab name="A">
          <Tabs.ScrollView
            accessibilityComponentType=""
            accessibilityTraits=""
            style={{
              width: WIDTH,
            }}
            contentContainerStyle={{
              backgroundColor: 'white',
            }}
          >
            <Container>{renderItems}</Container>
          </Tabs.ScrollView>
        </Tabs.Tab>
        <Tabs.Tab name="B">
          <Tabs.ScrollView accessibilityComponentType="" accessibilityTraits="">
            <View style={[styles.box, styles.boxA]} />
            <View style={[styles.box, styles.boxB]} />
          </Tabs.ScrollView>
        </Tabs.Tab>
      </Tabs.Container>
    </>
  );
};

When I write the hook inside this component, I get this error:

Is there a different way to use this hook? Any help would be appreciated, Thanks!

[tiagocorreiaalmeida]

@sahil-republic You are using the hook on the same place of the provider, try to call the hook on a nested component and it will work properly