bug: Cannot read property 'ScrollViewWithHeaders' of undefined

[oscarbc96]

Description

Something changed between versions v0.8.0 and v0.9.0 (I wasn't able to identify which part is causing it), which produces this error when using ScrollViewWithHeaders:

 ERROR  TypeError: Cannot read property 'ScrollViewWithHeaders' of undefined

Reproduction

This is the code I'm using to test it:

import React from 'react'
import {Platform, StyleSheet, Text, View} from 'react-native'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {
  Header,
  LargeHeader,
  ScalingView,
  ScrollHeaderProps,
  ScrollLargeHeaderProps,
  ScrollViewWithHeaders,
} from '@codeherence/react-native-header'

const HeaderComponent: React.FC<ScrollHeaderProps> = ({showNavBar}) => {
  return (
    <Header
      showNavBar={showNavBar}
      ignoreTopSafeArea={Platform.OS === 'ios'}
      headerCenter={
        <>
          <Text style={styles.navBarTitle} numberOfLines={1}>
            Profile
          </Text>
        </>
      }
      headerCenterStyle={styles.smallHeaderCenterStyle}
    />
  )
}

const LargeHeaderComponent: React.FC<ScrollLargeHeaderProps> = ({scrollY}) => (
  <LargeHeader headerStyle={styles.largeHeaderStyle}>
    <ScalingView scrollY={scrollY} style={styles.centerHeaderContainer} translationDirection='none'>
      <Text style={styles.title}>Profile</Text>
      <Text style={styles.profileText}>
        Let&apos;s get you set up with your profile so you can start using the app.
      </Text>
    </ScalingView>
  </LargeHeader>
)

export const Screen = () => {
  const {bottom} = useSafeAreaInsets()

  return (
    <ScrollViewWithHeaders
      style={styles.container}
      HeaderComponent={HeaderComponent}
      LargeHeaderComponent={LargeHeaderComponent}
      contentContainerStyle={{paddingBottom: bottom}}>
      <View style={styles.children}>
        <Text key={`profile-text-}`}>Scroll to see header animation</Text>
      </View>
    </ScrollViewWithHeaders>
  )
}

const styles = StyleSheet.create({
  container: {flex: 1},
  children: {paddingVertical: 32, justifyContent: 'center', alignItems: 'center'},
  navBarTitle: {fontSize: 16, fontWeight: 'bold'},
  title: {fontSize: 32, fontWeight: 'bold'},
  profileText: {
    fontSize: 12,
    fontWeight: 'normal',
    color: '#8E8E93',
    maxWidth: '80%',
    textAlign: 'center',
  },
  centerHeaderContainer: {justifyContent: 'center', alignItems: 'center'},
  avatar: {marginBottom: 8},
  smallHeaderCenterStyle: {gap: 4},
  largeHeaderStyle: {alignItems: 'center', justifyContent: 'center'},
})

Expected behavior

No error raised

Actual behavior

It raises the error.

Environment

react-native-header	>= v0.9.0 (I get the error on each version after v0.9.0)
Platform & OS (if applicable)	iOS/Android
Device (if applicable)	iPhone 14 Pro Max
react-native-reanimated	^3.4.2
react-native-safe-area-context	^4.7.1

Additional Information

Please provide any additional information that may be helpful in resolving the issue.

[e-younan]

Thanks for the report - I'll take a look now.

[e-younan]

I have tried updating from 0.8.0 to 0.9.0 and saw an error, but it was related to @shopify/flash-list missing. If you install @shopify/flash-list as a dependency into your project, does it work?

[oscarbc96]

Thank you for checking so quickly! I attempted to reinstall @shopify/flash-list but was unsuccessful.

[e-younan]

I'm not quite sure why the import isn't defined. In your node_modules, can you check the library's source code to see if the "ScrollViewWithHeaders" component is exported?

If it's there, I suggest you try deleting node_modules and the application off your simulator/test device, re-install dependencies, and install your application again.

If it still doesn't work, if you could provide a snack that reproduces the error, I would appreciate that.