Implementación de Remote Config Modular (v23.x.x)

#webdev #spanish #reactnative #javascript

Con el lanzamiento de la versión 23.x.x, React Native Firebase adoptó completamente la API Modular (similar al Firebase Web SDK v9).

¿Qué cambió?

En versiones anteriores se utilizaba una instancia basada en clases (por ejemplo, remoteConfig().fetchAndActivate()).

Con la API modular, la instancia de configuración se pasa como primer argumento a funciones independientes como fetchAndActivate(instance).

Implementación del Servicio

import {
  fetchAndActivate,
  getRemoteConfig,
  getValue,
  setConfigSettings
} from '@react-native-firebase/remote-config'

// Tiempo de caché (ej.: 5 minutos)
export const REMOTE_CONFIG_CACHE_TIME = 300000

let remoteConfig: any = null

/**
 * Inicializa la instancia de Remote Config y define configuraciones globales.
 */
const initializeRemoteConfig = async () => {
  if (!remoteConfig) {
    remoteConfig = getRemoteConfig()
  }

  await setConfigSettings(remoteConfig, {
    minimumFetchIntervalMillis: REMOTE_CONFIG_CACHE_TIME
  })
}

/**
 * Obtiene y activa los valores más recientes antes de retornarlos como string.
 */
const getValueAsString = async (property: string): Promise<string> => {
  await fetchAndActivate(remoteConfig)
  return getValue(remoteConfig, property).asString()
}

/**
 * Obtiene y activa los valores más recientes antes de retornarlos como boolean.
 */
const getValueAsBoolean = async (property: string): Promise<boolean> => {
  await fetchAndActivate(remoteConfig)
  return getValue(remoteConfig, property).asBoolean()
}

export const RemoteConfigService = {
  getValueAsBoolean,
  getValueAsString,
  initializeRemoteConfig
}

Cómo usarlo

1. Inicialización Global

Se recomienda inicializar el servicio al inicio del ciclo de vida de la aplicación (por ejemplo, en App.tsx o en una store de Redux).

import { useEffect } from 'react'
import { RemoteConfigService } from './services/RemoteConfigService'

const App = () => {
  const setupRemoteConfig = async () => {
    try {
      await RemoteConfigService.initializeRemoteConfig()
    } catch (error) {
      console.error('Error al inicializar Remote Config:', error)
    }
  }

  useEffect(() => {
    setupRemoteConfig()
  }, [])

  return <MainNavigator />
}

2. Consumo de Valores

const isNewUiEnabled =
  await RemoteConfigService.getValueAsBoolean('enable_new_interface')

Notas Rápidas

Instancia Global: Si usas Expo o React Native estándar y la configuración de Firebase es correcta, @react-native-firebase se inicializa automáticamente.
Seguridad: Siempre envuelve la inicialización en un bloque try/catch.

Otra Opción

Singleton Auto-Inicializable

let remoteConfig = null

const initializeRemoteConfig = async () => {
  if (remoteConfig) return

  const instance = getRemoteConfig()

  await setConfigSettings(instance, {
    minimumFetchIntervalMillis: REMOTE_CONFIG_CACHE_TIME
  })

  remoteConfig = instance
}

const getValueAsString = async (property: string): Promise<string> => {
  await initializeRemoteConfig()

  await fetchAndActivate(remoteConfig)

  return getValue(remoteConfig, property).asString()
}

const getValueAsBoolean = async (property: string): Promise<boolean> => {
  await initializeRemoteConfig()

  await fetchAndActivate(remoteConfig)

  return getValue(remoteConfig, property).asBoolean()
}