Tools: Usando Remote Config Modular no React Native (v23.x.x)

O que mudou? ## Implementação de um Serviço ## Como usar ## 1. Inicialização Global ## 2. Consumindo Valores ## Observações Rápidas ## Outra Opção Com o lançamento da versão 23.x.x, o React Native Firebase adotou a API Modular (semelhante ao Firebase Web SDK v9). Nas versões anteriores, utilizávamos uma instância baseada em classes, por exemplo, remoteConfig().fetchAndActivate(). Na versão modular, agora passamos a instância de configuração como primeiro argumento para funções independentes, como fetchAndActivate(instance). A implementação abaixo centraliza a lógica do Remote Config em um serviço reutilizável: Recomenda-se inicializar o serviço logo no início do ciclo de vida do app, por exemplo, em App.tsx ou em um Redux Store. Como os métodos são async, você pode chamá-los sempre que precisar de uma flag específica: Singleton Auto-Inicializável Espero ter ajudado, até mais! 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' // Tempo de cache (ex.: 5 minutos) export const REMOTE_CONFIG_CACHE_TIME = 300000 let remoteConfig: any = null /** * Inicializa a instância do Remote Config e define configurações globais. */ const initializeRemoteConfig = async () => { if (!remoteConfig) { remoteConfig = getRemoteConfig() } await setConfigSettings(remoteConfig, { minimumFetchIntervalMillis: REMOTE_CONFIG_CACHE_TIME }) } /** * Busca e ativa os valores mais recentes antes de retorná-los como string. */ const getValueAsString = async (property: string): Promise<string> => { await fetchAndActivate(remoteConfig) return getValue(remoteConfig, property).asString() } /** * Busca e ativa os valores mais recentes antes de retorná-los 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' // Tempo de cache (ex.: 5 minutos) export const REMOTE_CONFIG_CACHE_TIME = 300000 let remoteConfig: any = null /** * Inicializa a instância do Remote Config e define configurações globais. */ const initializeRemoteConfig = async () => { if (!remoteConfig) { remoteConfig = getRemoteConfig() } await setConfigSettings(remoteConfig, { minimumFetchIntervalMillis: REMOTE_CONFIG_CACHE_TIME }) } /** * Busca e ativa os valores mais recentes antes de retorná-los como string. */ const getValueAsString = async (property: string): Promise<string> => { await fetchAndActivate(remoteConfig) return getValue(remoteConfig, property).asString() } /** * Busca e ativa os valores mais recentes antes de retorná-los 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' // Tempo de cache (ex.: 5 minutos) export const REMOTE_CONFIG_CACHE_TIME = 300000 let remoteConfig: any = null /** * Inicializa a instância do Remote Config e define configurações globais. */ const initializeRemoteConfig = async () => { if (!remoteConfig) { remoteConfig = getRemoteConfig() } await setConfigSettings(remoteConfig, { minimumFetchIntervalMillis: REMOTE_CONFIG_CACHE_TIME }) } /** * Busca e ativa os valores mais recentes antes de retorná-los como string. */ const getValueAsString = async (property: string): Promise<string> => { await fetchAndActivate(remoteConfig) return getValue(remoteConfig, property).asString() } /** * Busca e ativa os valores mais recentes antes de retorná-los 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('Falha ao inicializar o 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('Falha ao inicializar o 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('Falha ao inicializar o 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() } - Instância Global: Se você estiver usando Expo ou React Native "padrão" e já tiver o google-services.json (ou GoogleService-Info.plist) configurado corretamente, o @react-native-firebase/app é inicializado automaticamente. - Segurança: Sempre envolva a inicialização em um bloco try/catch para evitar crashes causados por falhas de rede no primeiro fetch.