createMaterialCollapsibleTopTabNavigator not found in 'react-native-collapsible-tab-view'

[sierradean]

I am attempting to use the TabNavigator wrapper for the collapsible header. However, I run npm install react-native-collapsible-tab-view and my import looks like this (how I import everything else for the project import {createMaterialCollapsibleTopTabNavigator} from 'react-native-collapsible-tab-view' When attempting to initialize the navigator (const Tab = createMaterialCollapsibleTopTabNavigator();) I receive the attached error:

I attempted to console log the createMaterialCollapsibleTopTabNavigator function and it return with undefined, hence the function is not found in the package. Did I install wrong? I have additionally installed all the dependencies as follows: from package.json "react-native-reanimated": "~1.9.0", "@react-navigation/material-top-tabs": "^5.2.10", "@react-navigation/native": "^5.4.0", "react-native-tab-view": "^2.15.2", I am currently using npm as my package manager instead of yarn, does the installation only work with yarn?

Any guidance would be greatly appreciated. I qualified this as a question as compared to a bug as I feel it is a problem with my implementation not with the package.

Thank you!

[andreialecu]

Hey @sierradean the current version does not have react navigation support built in yet.

I have a work in progress implementation which I'm going to share here: https://gist.github.com/andreialecu/3843786a4b849c33b559963656467f2f

You can simply drop it into your project and use it like:

import createCollapsibleNavigator from './create-collapsible-navigator';

const Tab = createCollapsibleNavigator();

export function SomeComponent() {
  return (
        <Tab.Navigator
          collapsibleOptions={{
            lazy: true,
            tabBarHeight: styles.tabBar.height,
            headerHeight: styles.headerContainer.minHeight,
            renderHeader: () => (
              <YourHeader />
            ),
            renderTabBar: (props) => (
              <MaterialTabBar
                {...props}
                //scrollEnabled
              />
            ),
          }}
        >
          <Tab.Screen
            name="info"
            options={{
              title: 'Info',
            }}
          >
            {() => <Info />}
          </Tab.Screen>
          // other screens here
        </Tab.Navigator>

[sierradean]

Ah thank you! I misunderstood the documentation. I will try that out!

[Jamal-ReachFirst]

Re-open this issue until it is fixed and pushed to the package.

[RobertUpchurch]

Is this still not available in newer versions?