Skip to content

TypeError: Cannot read property 'displayName' of undefined #53

@btom7447

Description

@btom7447

I keep getting this error

ERROR Warning: TypeError: Cannot read property 'displayName' of undefined

This error is located at:

Call Stack
ScreenContentWrapper ()
RNSScreenStack ()
RNCSafeAreaProvider ()
App ()
ErrorOverlay ()

This is how I setup my TabLayout to use this Tabbar Interaction

import React from 'react';
import { View, Image } from 'react-native';
import { Tabs } from 'expo-router';
import Tabbar from "@mindinventory/react-native-tab-bar-interaction"; // Tabbar import

export default function TabLayout() {
  const tabs = [
    {
      name: 'Home',
      activeIcon: <Image source={require('../../assets/images/home-fill.png')} style={{ width: 25, height: 25 }} />,
      inactiveIcon: <Image source={require('../../assets/images/home.png')} style={{ width: 25, height: 25 }} />
    },
    {
      name: 'Order',
      activeIcon: <Image source={require('../../assets/images/gas-pump-fill.png')} style={{ width: 25, height: 25 }} />,
      inactiveIcon: <Image source={require('../../assets/images/gas-pump.png')} style={{ width: 25, height: 25 }} />
    },
    {
      name: 'Track',
      activeIcon: <Image source={require('../../assets/images/delivery-fill.png')} style={{ width: 25, height: 25 }} />,
      inactiveIcon: <Image source={require('../../assets/images/delivery.png')} style={{ width: 25, height: 25 }} />
    }
  ];

  return (
    <View style={{ flex: 1 }}>
      <Tabs>
        <Tabs.Screen name="home" options={{ headerShown: false }} />
        <Tabs.Screen name="order" />
        <Tabs.Screen name="track" />
      </Tabs>
      
      {/* Tabbar placed outside of Tabs */}
      <Tabbar
        tabs={tabs}
        containerWidth={350}
        onTabChange={(tab, index) => console.log('Tab changed')}
      />
    </View>
  );
}

Metadata

Metadata

Labels

No labels
No labels

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions