TypeError: _app2.default.database is not a function. (In ‘_app2.default.database()’, ‘_app2.default.database’ is undefined)

this error is strange .What wrong in react native in firebase I installed firebase already by npm install here is my code

import React, {Component} from 'react'
import {View} from 'react-native'
import Card from './card'
import { initializeApp } from 'firebase/app'
import firebase from 'firebase/compat/app'
import database from 'firebase/database'
import 'firebase/database'

const firebaseConfig = {
  apiKey: "AIzaSyA_AXaJ_hLC3jXMOIjaXLyktgX1t7e--FU",
  authDomain: "tinderclone-99d8e.firebaseapp.com",
  projectId: "tinderclone-99d8e",
  storageBucket: "tinderclone-99d8e.appspot.com",
  messagingSenderId: "264605926507",
  appId: "1:264605926507:web:c9309a6669322ef6839d2e",
  databaseURL:'https://tinderclone-99d8e-default-rtdb.asia-southeast1.firebasedatabase.app/'
  
};


firebase.initializeApp(firebaseConfig)

export default class App extends Component {

  state = {
    profileIndex: 0,
  }

  componentWillMount() {
    firebase.database().ref().child('users').once('value', (snap) => {
      console.log('Data', snap.val())
    })
  }


  nextCard = () => {
    this.setState({profileIndex: this.state.profileIndex + 1})
  }

  render() {
    const {profileIndex} = this.state
    return (
      <View style={{flex:1}}>
        {profiles.slice(profileIndex, profileIndex + 3).reverse().map((profile) => {
          return (
            <Card
              key={profile.id}
              profile={profile}
              onSwipeOff={this.nextCard}
            />
          )
        })}
      </View>
    )
  }
}

const profiles = [
  {
    id: '259389830744794',
    name: 'Candice',
    birthday: '10/18/1986',
    bio: 'Supermodel',
  },
  {
    id: '720115413',
    name: 'Alessandra',
    birthday: '1/10/1989',
    bio: 'Dancer',
  },
  {
    id: '169571172540',
    name: 'Miranda',
    birthday: '12/12/1983',
    bio: 'Doctor',
  },
  {
    id: '1476279359358140',
    name: 'Alissa',
    birthday: '2/11/1990',
    bio: 'Comedian',
  },
  {
    id: '1140849052644433',
    name: 'Behati',
    birthday: '3/23/1991',
    bio: 'Developer',
  },
  {
    id: '912478262117011',
    name: 'Rosie',
    birthday: '9/4/1989',
    bio: 'Artist',
  },
  {
    id: '173567062703796',
    name: 'Kendall',
    birthday: '8/17/1992',
    bio: 'Truck Driver',
  },
]

error is

TypeError: _app2.default.database is not a function. (In '_app2.default.database()', '_app2.default.database' is undefined)

This error is located at:
    in App (created by ExpoRoot)
    in ExpoRoot
    in RCTView (created by View)
    in View (created by AppContainer)
    in RCTView (created by View)
    in View (created by AppContainer)
    in AppContainer

how can solve this error I try to connect with realtime database

enter image description here

can someone help me this issue what wrong in codes I wonder why it difficult to connect with firebase.What are gross mistake in this code database connection is not simple in firebase .Really suprise .

Answer

You’re importing Firebase v9 (as far as I can tell) with:

import database from 'firebase/database'

This import means you’re using the new modular syntax of the v9 SDK.

But then in your code you try to access the database with:

firebase.database()...

And this is the v8 style syntax, which you didn’t import.

If you want to continue to use the v8 syntax, you should import the compat library as you did for import firebase from 'firebase/compat/app'. So:

import database from 'firebase/compat/database'

Also see the Firebase v9 upgrade guide.