React-Native Expo (Managed) Firebase IDBIndex Error

Question

Below is the code to initialize firebase application. I have installed firebase module with expo install firebase command. There are no errors when using web browser. But on Expo Go i get this errors below:

ReferenceError: Can't find variable: IDBIndex ...

Invariant Violation: "main" has not been registered. This can happen if:

• Metro (the local dev server) is run from the wrong folder. Check if Metro is running, stop it and restart it in the current project.
• A module failed to load due to an error and AppRegistry.registerComponent wasn't called.

I'm new to node and react frameworks. Any advice will be helpful. Thanks

Should i update babel.config.json ? If yes, how ?

App.tsx

import { Component } from "react";
import {
  DarkTheme as PaperDarkTheme,
  DefaultTheme as PaperDefaultTheme,
  Provider as PaperProvider,
} from "react-native-paper";

import {
  NavigationContainer,
  DarkTheme as NavigationDarkTheme,
  DefaultTheme as NavigationDefaultTheme,
} from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

import { FirebaseApp, initializeApp } from "firebase/app";

import AppHeader from "./Components/AppHeader";
import ScreenHome from "./Components/ScreenHome";

export default class App extends Component<{}, {}> {
  app: FirebaseApp;
  constructor(props: any) {
    super(props);
    this.app = initializeApp(firebaseConfig);
    this.state = {};
    this.handleEvent = this.handleEvent.bind(this);
  }

  handleEvent() {
    console.log(this.props);
  }

  render() {
    return (
      <PaperProvider theme={CombinedDefaultTheme}>
        <NavigationContainer theme={CombinedDefaultTheme}>
          <Stack.Navigator initialRouteName="Home">
            <Stack.Screen
              component={ScreenHome}
              name="Home"
              options={({ navigation, route }) => ({
                header: (props) => <AppHeader navigation={navigation} />,
              })}
            />
          </Stack.Navigator>
        </NavigationContainer>
      </PaperProvider>
    );
  }
}

const CombinedDarkTheme = {
  ...PaperDarkTheme,
  ...NavigationDarkTheme,
  colors: {
    ...PaperDarkTheme.colors,
    ...NavigationDarkTheme.colors,
  },
};

const CombinedDefaultTheme = {
  ...PaperDefaultTheme,
  ...NavigationDefaultTheme,
  colors: {
    ...PaperDefaultTheme.colors,
    ...NavigationDefaultTheme.colors,
    accent: "yellow",
    primary: "tomato",
  },
};

const firebaseConfig = {##};

const Stack = createStackNavigator();

babel.config.json

module.exports = function (api) {
  api.cache(true);
  return {
    presets: ["babel-preset-expo"],
    env: {
      production: {
        plugins: ["react-native-paper/babel"],
      },
    },
  };
};