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

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 ? It will become hidden in your post, but will still be visible via the comment's permalink. as well , this person and/or 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 { 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 /> } 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') 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() } 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.