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

#reactnative #javascript #webdev #braziliandevs

Com o lançamento da versão 23.x.x, o React Native Firebase adotou a API Modular (semelhante ao Firebase Web SDK v9).

O que mudou?

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).

Implementação de um Serviço

A implementação abaixo centraliza a lógica do Remote Config em um serviço reutilizável:

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
}

Como usar

1. Inicialização Global

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.

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 />
}

2. Consumindo Valores

Como os métodos são async, você pode chamá-los sempre que precisar de uma flag específica:

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

Observações Rápidas

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.

Outra Opção

Singleton Auto-Inicializável

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()
}