@react-native-firebase/remote-config and firebase/remote-config getRemoteConfig have two config types

[kopax-polyconseil]

Hello,

In our react native and react native web project, we use :

• native: @react-native-firebase/remote-config v14.9.0
• web: firebase 9.6.11

We already opened an issue here regarding the absence of non compat mode for @react-native-firebase/* modules, and after adding those two configurations:

native in shims/remote-config/index.ts

export { default } from '@react-native-firebase/remote-config'

web in shims/remote-config/index.web.ts

import { getRemoteConfig } from 'firebase/remote-config'

import { DEFAULT_REMOTE_CONFIG } from 'libs/firebase/remoteConfig/remoteConfig.constants'

import initializeApp from '../firebase-init'

const app = initializeApp()
const firebaseRemoteConfig = getRemoteConfig(app)
firebaseRemoteConfig.defaultConfig = DEFAULT_REMOTE_CONFIG

export default firebaseRemoteConfig

We have a when using those conf some typing error:

Failed to compile.

/home/dka/workspace/github.com/pass-culture/pass-culture-app-native/src/libs/firebase/remoteConfig/remoteConfig.services.web.ts
TypeScript error in /home/dka/workspace/github.com/pass-culture/pass-culture-app-native/src/libs/firebase/remoteConfig/remoteConfig.services.web.ts(9,35):
Argument of type 'FirebaseModuleWithStatics<Module, Statics>' is not assignable to parameter of type 'RemoteConfig'.  TS2345

     7 | export const remoteConfig = {
     8 |   async refresh() {
  >  9 |     return await fetchAndActivate(firebaseRemoteConfig)
       |                                   ^
    10 |   },
    11 |   // `getValues()` does not fetch anything, it accesses the values fetched by fetchAndActivate()`.
    12 |   // So be sure to have your remote config refreshed before using `getValues()`.

This is our remoteConfig.services.ts:

import firebaseRemoteConfig from 'libs/firebase/shims/remote-config'

import { DEFAULT_REMOTE_CONFIG } from './remoteConfig.constants'
import { CustomRemoteConfig, GenericRemoteConfig } from './remoteConfig.types'

export const remoteConfig = {
  async configure() {
    await firebaseRemoteConfig().setDefaults(DEFAULT_REMOTE_CONFIG as GenericRemoteConfig)
  },
  async refresh() {
    return await firebaseRemoteConfig().fetchAndActivate()
  },
  /**
  `getValues()` does not fetch anything, it accesses the values fetched by `firebaseRemoteConfig().fetchAndActivate()`.
  So be sure to have your remote config refreshed before using `getValues()`.
  *
  * @returns object with remote config params.
  */
  getValues(): CustomRemoteConfig {
    const parameters = firebaseRemoteConfig().getAll()
    return {
      test_param: parameters.test_param.asString(),
      homeEntryIdNotConnected: parameters.homeEntryIdNotConnected.asString(),
      homeEntryIdGeneral: parameters.homeEntryIdGeneral.asString(),
      homeEntryIdWithoutBooking_18: parameters.homeEntryIdWithoutBooking_18.asString(),
      homeEntryIdWithoutBooking_15_17: parameters.homeEntryIdWithoutBooking_15_17.asString(),
      homeEntryId_18: parameters.homeEntryId_18.asString(),
      homeEntryId_15_17: parameters.homeEntryId_15_17.asString(),
    }
  },
}

This is our remoteConfig.services.web.ts:

import { fetchAndActivate, getAll } from 'firebase/remote-config'

import firebaseRemoteConfig from 'libs/firebase/shims/remote-config'

import { CustomRemoteConfig } from './remoteConfig.types'

export const remoteConfig = {
  async refresh() {
    return await fetchAndActivate(firebaseRemoteConfig)
  },
  // `getValues()` does not fetch anything, it accesses the values fetched by fetchAndActivate()`.
  // So be sure to have your remote config refreshed before using `getValues()`.
  getValues(): CustomRemoteConfig {
    const parameters = getAll(firebaseRemoteConfig)
    return {
      test_param: parameters.test_param.asString(),
      homeEntryIdNotConnected: parameters.homeEntryIdNotConnected.asString(),
      homeEntryIdGeneral: parameters.homeEntryIdGeneral.asString(),
      homeEntryIdWithoutBooking_18: parameters.homeEntryIdWithoutBooking_18.asString(),
      homeEntryIdWithoutBooking_15_17: parameters.homeEntryIdWithoutBooking_15_17.asString(),
      homeEntryId_18: parameters.homeEntryId_18.asString(),
      homeEntryId_15_17: parameters.homeEntryId_15_17.asString(),
    }
  },
}

Do you have any plan tu add support for an universal interface equal to the one in firebase >= v9 ?

Our current workaround was to add the suffix .web while importing the web config in the web client.

[mikehardy]

Isn't this effectively the same as the issue linked "support modular firebase-js-sdk syntax"?

[kopax-polyconseil]

I believe we still use the compat syntax while waiting react-native-firebase to support the new firebase 9 syntax, and we didn't had typing issue so far, until we started to use remote config

[mikehardy]

Okay, perhaps you need to return as RemoteConfig in your shim? Don't get me wrong, I'm all for shims and I use them personally, but perfect typing cannot be expected at the moment, and some forcible type coercion might be the best way to do it. I haven't used remote-config in shims yet so I haven't personally seen this. All of this shimming is just "best effort" / "let's make it work" so that's as far as I've thought of remote-config with regard to shims, and if forcing the type works I'd consider that "good enough for now"

[kopax-polyconseil]

In this case we rather add the .web extension to the import or rename both native and web as it is better not to fool the typing.

Will this be homogenized in the future?