Home > Software design >  Error: Text strings must be rendered within a <Text> component in BottomTabBar (at SceneView.t
Error: Text strings must be rendered within a <Text> component in BottomTabBar (at SceneView.t

Time:10-26

I have Implemented a bottomTab Navigation in my App. I got this error

Error: Text strings must be rendered within a <Text> component.

This error is located at:
    in BottomTabBar (at SceneView.tsx:132)
    in StaticContainer
    in StaticContainer (at SceneView.tsx:125)
    in EnsureSingleNavigator (at SceneView.tsx:124)
    in SceneView (at useDescriptors.tsx:217)
    in RCTView (at View.js:34)
    in View (at CardContainer.tsx:281)

I have tried to solve this issue but i unable to solve this issue. because i unable to understand that , This error is related to code OR node modules. Please suggest the solution.

const BottomTabBar = (tabProps) => (
    <>
      {bottomTabData.tabs && bottomTabData.tabs.length && (
        <BottomTab.Navigator
          tabBarOptions={{
            safeAreaInset: { bottom: 'never', top: 'never' },
          }}
          lazy
          // eslint-disable-next-line react/jsx-props-no-spreading
          tabBar={(props) => <BottomTabComp {...props} tabsData={bottomTabData} />}
          initialRouteName={bottomTabData && bottomTabData.tabs && bottomTabData.tabs[(notifyData && notifyData.bottom_tab_index) || bottomTabData.highlighted_tab_index].title}
          // initialRouteName={bottomTabData && bottomTabData.tabs && bottomTabData.tabs[2].title}
        >
          {bottomTabData.tabs && bottomTabData.tabs.length && bottomTabData.tabs.map((tab) => (
            <BottomTab.Screen
              key={tab.id}
              name={tab.title}
              initialParams={{
                data: tabProps.route && tabProps.route.params && tabProps.route.params.data,
                notifyData,
              }}
              component={tab && tab.page_type === 'DISCOVER' ? DiscoverStack : tab.page_type === 'NOTIFICATION' ? NotificationTabStack : HomeStack}
            />
          ))}
        </BottomTab.Navigator>
      )}
    </>
  );

CodePudding user response:

read the article, and hopefully, you will find the solution. https://stackoverflow.com/a/59108109/14758149

CodePudding user response:

Somewhere in your code there is a {''} outside of <Text>Some Text</Text>

Probably look like this -> <Text>Some Text</Text>{''}

Please check if this is the case

  • Related