CODEWITHSUNDEEP
react-nativeexporeact-native-navigation
Dreyser Eguia
Dreyser Eguia

Reputation: 438

React native bottom tab navigation error, brand new app from expo template

I just created a new app using expo template, and when executed without any change to code it throws following error

    C02SW0WD:Projects user$ expo init testTabApp
? Choose a template: 
  ----- Managed workflow -----
  blank                 a minimal app as clean as an empty canvas 
  blank (TypeScript)    same as blank but with TypeScript configuration 
***❯ tabs                  several example screens and tabs using react-navigation*** 
  ----- Bare workflow -----
  minimal               bare and minimal, just the essentials to get you started 
  minimal (TypeScript)  same as minimal but with TypeScript configuration

error detail without any change in code

As an additional test, I created a black project also using expo init (blank -> a minimal app as clean as an empty canvas), the app worked as expected... then I added bottom tab navigation required npms:

  1. yarn add @react-navigation/native
  2. yarn add @react-navigation/bottom-tabs
  3. yarn add react-native-screens
  4. yarn add react-native-safe-area-context

After that I create two empty screens and modified App.js to use bottom tab navigation as follows:

import React from 'react';
import { Text, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Chat from './screens/Chat';
import Home from './screens/Home';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="Chat" component={Chat} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

Once again, same error about "undefined is not a function (near '...Object.fromEntries...')"

Any thougts??

Upvotes: 2

Views: 1425

Answers (1)

dblazeski
dblazeski

Reputation: 534

UPDATE: The issue is fixed within the package, update it to the latest version. https://github.com/react-navigation/react-navigation/commit/51f4d11fdf4bd2bb06f8cd4094f051816590e62c

The method Object.fromEntries is missing. Add yarn add @babel/polyfill and update your .babelrc file to use it:

{
    "presets": [
        "module:metro-react-native-babel-preset",
        "@babel/polyfill"
    ]
}

Should work after that, more info is available on the website https://babeljs.io/docs/en/babel-polyfill

Upvotes: 1

Related Questions