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

¿Qué cambió? ## Implementación del Servicio ## Cómo usarlo ## 1. Inicialización Global ## 2. Consumo de Valores ## Notas Rápidas ## Otra Opción Con el lanzamiento de la versión 23.x.x, React Native Firebase adoptó completamente la API Modular (similar al Firebase Web SDK v9). 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). 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). Singleton Auto-Inicializable ¡Hasta luego a todos! Templates let you quickly answer FAQs or store snippets for re-use. Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment's permalink. Hide child comments as well For further actions, you may consider blocking this person and/or reporting abuse COMMAND_BLOCK: 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 } Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: 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 } COMMAND_BLOCK: 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 } COMMAND_BLOCK: 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 /> } Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: 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 /> } COMMAND_BLOCK: 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 /> } CODE_BLOCK: const isNewUiEnabled = await RemoteConfigService.getValueAsBoolean('enable_new_interface') Enter fullscreen mode Exit fullscreen mode CODE_BLOCK: const isNewUiEnabled = await RemoteConfigService.getValueAsBoolean('enable_new_interface') CODE_BLOCK: const isNewUiEnabled = await RemoteConfigService.getValueAsBoolean('enable_new_interface') COMMAND_BLOCK: 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() } Enter fullscreen mode Exit fullscreen mode COMMAND_BLOCK: 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() } COMMAND_BLOCK: 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() } - 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.