How to import getReactNativePersistence from firebase?

I have read many articles and spent the whole day trying to fix the problem with firebase auth and AsyncStorage which seems to be solved here

As a solution the propose to use import { getReactNativePersistence } from 'firebase/auth/react-native'; I tried and copy-pasted their solution but every time I try to run expo it keeps giving me the following error: Unable to resolve "firebase/auth/react-native" from "App.js"

I installed the following packages: npm i @react-native-firebase/app and npm i @react-native-firebase/auth

This is my packaje.json file:

"dependencies": {
    "@expo/config-plugins": "~6.0.0",
    "@react-native-async-storage/async-storage": "1.17.11",
    "@react-native-camera-roll/camera-roll": "^5.2.4",
    "@react-native-community/datetimepicker": "6.7.3",
    "@react-native-community/netinfo": "9.3.7",
    "@react-native-community/slider": "4.4.2",
    "@react-native-firebase/app": "^17.3.1",
    "@react-native-firebase/auth": "^17.3.1",
    "@react-navigation/bottom-tabs": "^6.3.2",
    "@react-navigation/elements": "^1.3.3",
    "@react-navigation/material-top-tabs": "^6.2.2",
    "@react-navigation/native": "^6.0.10",
    "@react-navigation/stack": "^6.2.2",
    "@react-navigation/web": "^1.0.0-alpha.9",
    "axios": "^0.21.1",
    "expo": "^48.0.4",
    "expo-av": "~13.2.1",
    "expo-blur": "~12.2.2",
    "expo-camera": "~13.2.1",
    "expo-device": "~5.2.1",
    "expo-env-info": "^1.0.5",
    "expo-file-system": "~15.2.2",
    "expo-image-manipulator": "~11.1.1",
    "expo-image-picker": "~14.1.1",
    "expo-image-picker-multiple": "^1.4.1",
    "expo-linking": "~4.0.1",
    "expo-location": "~15.1.1",
    "expo-media-library": "~15.2.2",
    "expo-modules-autolinking": "~1.1.0",
    "expo-notifications": "~0.18.1",
    "expo-permissions": "~14.1.1",
    "expo-server-sdk": "^3.6.0",
    "expo-status-bar": "~1.4.4",
    "expo-video-player": "^1.6.1",
    "expo-video-thumbnails": "~7.2.1",
    "firebase": "^8.2.3",
    "firebase-admin": "^10.3.0",
    "firebase-functions": "^3.21.2",
    "formik": "^2.2.9",
    "moment": "^2.29.1",
    "react": "^18.2.0",
    "react-dom": "18.2.0",
    "react-infinite-scroll-component": "^6.1.0",
    "react-native": "0.71.3",
    "react-native-bottomsheet-reanimated": "0.0.39",
    "react-native-dropdown-picker": "^4.0.9",
    "react-native-expo-cached-image": "^1.3.1",
    "react-native-form-validator": "^0.3.5",
    "react-native-geocoding": "^0.5.0",
    "react-native-gesture-handler": "~2.9.0",
    "react-native-gifted-chat": "^0.16.3",
    "react-native-google-places-autocomplete": "^2.1.2",
    "react-native-image-modal": "^2.0.3",
    "react-native-image-zoom-viewer": "^3.0.1",
    "react-native-interactable-reanimated": "0.0.15",
    "react-native-loading-spinner-overlay": "^2.0.0",
    "react-native-map-clustering": "^3.4.2",
    "react-native-maps": "1.3.2",
    "react-native-material-menu": "^2.0.0",
    "react-native-mentions": "^1.1.4",
    "react-native-modalbox": "^2.0.2",
    "react-native-optimized-flatlist": "^1.0.4",
    "react-native-orientation": "^3.1.3",
    "react-native-pager-view": "6.1.2",
    "react-native-paper": "^4.9.2",
    "react-native-parsed-text": "0.0.22",
    "react-native-popup-dialog": "^0.18.3",
    "react-native-progress": "^5.0.0",
    "react-native-ratings": "^8.1.0",
    "react-native-reanimated": "~2.14.4",
    "react-native-safe-area-context": "4.5.0",
    "react-native-screens": "~3.20.0",
    "react-native-svg": "13.4.0",
    "react-native-tab-view": "^3.1.1",
    "react-native-unimodules": "~0.14.5",
    "react-native-vector-icons": "^8.1.0",
    "react-native-video": "^2.3.1",
    "react-native-video-player": "^0.12.0",
    "react-native-walkthrough-tooltip": "^1.3.1",
    "react-native-web": "~0.18.11",
    "react-navigation": "^4.4.4",
    "react-redux": "^7.2.2",
    "redux": "^4.0.5",
    "redux-devtools-extension": "^2.13.9",
    "redux-thunk": "^2.4.2",
    "rn-tooltip": "^3.0.1",
    "rne-modal-tooltip": "gist:b28c003d87c619674def0878473338a0",
    "unimodules-permissions-interface": "^6.1.0",
    "yup": "^0.32.9"
  }

Can someone tell me what I am doing wrong and how to fix it, because I already spent too much time on this issue.

It is likely that there's some issues with expo and getReactNativePersistence

This is the workaround i found to temporarily fix this :

• Created a new project in an empty directory : npm init
• Installed Firebase : npm i firebase
• Went to newproject/node_modules/@firebase and copied the auth folder
• Went to the expo project, and pasted the auth folder in the project root
• Renamed the auth folder to : @firebase-auth
• In the main package.json, added this under "scripts":

For Windows :

"postinstall": "node -e \"require('fs').symlinkSync(require('path').resolve('@firebase-auth'), 'node_modules/@firebase/auth', 'junction')\""

For Linux/macOS :

"postinstall": "ln -s $(pwd)/@firebase-auth node_modules/@firebase/auth"

• I ran npm install so the shortcut was made
  • Simple visual here :

This creates a symbolic link / shortcut to the real @firebase/auth folder i just pasted.

• Finally i was able to import getReactNativePersistence directly like so :

//@ts-ignore
import { getReactNativePersistence } from '@firebase/auth/dist/rn/index.js';

I hope this is helpful!