Pular para o conteúdo principal

@rogeriodocarmo/offline-detector-native

Mostra quando um app React Native está sem internet: por padrão, um snackbar com Tentar novamente, um banner e um indicador, além de um estado de tela cheia opcional. Sem código nativo, sem Reanimated, sem gesture-handler. Exige React 18 ou mais recente e React Native 0.73 ou mais recente. Veja o início rápido para nativo.

Props de OfflineDetector​

PropNotas
netInfoO módulo NetInfo, passado pelo app. Ignorado quando adapter é informado.
adapterUm PlatformAdapter. Padrão: createNativeAdapter({ netInfo }), criado uma vez.
probeConfigurações da sonda de alcance (veja a referência do react).
fetchO transporte da sonda.
onOfflineDispara quando o status passa a offline.
onOnlineDispara quando o status volta de offline para online.
onChangeDispara a cada mudança de status.
onErrorRecebe exceções lançadas por ouvintes e callbacks.
initialStatusComo no pacote react.
detectorComo no pacote react.
localeen, pt-BR, es; o padrão segue o idioma do dispositivo.
stringsSobrescritas de texto.
distinguishReasontrue diz "Sem conexão com a rede" ou "Conectado, mas sem internet".
fullScreentrue, ou { continueOffline: true } para a saída. Desligado por padrão.
onContinueOfflineDispara quando "Continuar offline" é tocado.
onRestoreFocusDispara quando o estado de tela cheia sai, para o app devolver o foco do leitor de tela.
snackbarOpções por peça: dismissible.
bannerOpções por peça: dismissible, position, overlay.
indicatorOpções por peça: dismissible, position, variant.
dismissibleAs peças podem ser deslizadas para sumir (padrão); uma peça dispensada volta na próxima transição.
onDismiss(piece) => void.
motion'auto', 'reduced', 'full'.
colorScheme'auto', 'light', 'dark'.
themeSobrescritas de tokens em Partial<OfflineTheme>. Veja Temas.
insetsMargens de área segura em Partial<Insets>.
recoveryMsQuanto tempo "Conexão restabelecida" aparece. Padrão 4000.
slotsSubstitui uma peça por completo. Veja Slots.

O conteúdo do app fica oculto para a tecnologia assistiva enquanto o estado de tela cheia aparece.

Adapter​

createNativeAdapter({ netInfo?, appState? }) devolve um PlatformAdapter:

  • netInfo é o módulo NetInfo (NetInfoLike: fetch() e addEventListener()), passado pelo app. O pacote nunca o importa. Sem ele, presume-se que a interface está ativa e só a sonda decide; builds de desenvolvimento avisam uma vez.
  • appState usa por padrão o AppState do React Native (AppStateLike). Um retorno ao primeiro plano é uma mudança de background ou inactive para active.
  • A interface está ativa quando isConnected !== false.

Tema​

OfflineTheme é o objeto tipado de tokens; lightTheme e darkTheme são os dois padrões; createTheme(overrides?, scheme?) mescla sobrescritas sobre um deles; useOfflineTheme(...) devolve o tema resolvido dentro de um componente. Todas as chaves estão em Temas.

Margens de área segura​

Insets é { top, right, bottom, left } em dp. O padrão é a altura da barra de status do Android no topo e zero nos demais lados, o que está errado em iPhones com notch: passe as margens reais (por exemplo, de useSafeAreaInsets()).

Peças​

Snackbar, Banner, Indicator e FullScreen são exportados com SnackbarProps, BannerProps, IndicatorProps e FullScreenProps. Recebem as mesmas props das peças web: phase, message, strings, e opcionalmente state, actions, visible, rootProps e theme, além de extras nativos (announce, reduceMotion, insets, icons, style, testID; no banner position, overlay, showRetry, offset; no indicador variant, position, offsetTop, offsetBottom; no snackbar offsetBottom; na tela cheia onRestoreFocus).

actions é { retry?, dismiss?, continueOffline? }. Uma peça é dispensável exatamente quando actions.dismiss está presente, e a tela cheia mostra "Continuar offline" exatamente quando actions.continueOffline está. Não há props separadas de tentar de novo, dispensar ou título: use actions e message (o título da tela cheia). Uma peça deslizada para fora volta ao repouso quando visible volta a ser true, então ela reaparece na próxima transição. PieceIcons tipa os glifos substituíveis. Um slot recebe o contrato PieceRenderProps, com theme preenchido.

O hook de deslizar, as regras de deslize e de tempo e o auxiliar de acessibilidade que esconde o conteúdo do app são internos e não são exportados; <OfflineDetector> esconde o conteúdo do app para você enquanto o estado de tela cheia aparece.

Hooks e tipos​

  • useReducedMotion(motion?) é true quando o movimento deve ser reduzido; 'auto' lê a configuração do sistema.
  • useOfflineTheme(...) devolve o tema resolvido dentro dos seus próprios componentes.
  • O pacote nativo reexporta a API do react, então um app instala um único pacote: os hooks useNetworkStatus, useRecheckOnReturn, useOfflineDetector e useCheckingFeedback, e os tipos OfflineState, OfflineStrings, OfflineUiOptions, PieceRenderProps, DismissiblePiece, Locale, IndicatorPosition, RecheckOnReturnOptions e UseNetworkStatusResult. Veja a referência do react. O pacote web reexporta a mesma lista.

Índice de exportações​

Tudo o que o pacote exporta, valores e tipos.

  • AppStateLike (tipo)
  • Banner (componente)
  • BannerProps (tipo)
  • Bezier (tipo)
  • DismissiblePiece (tipo)
  • FullScreen (componente)
  • FullScreenProps (tipo)
  • Indicator (componente)
  • IndicatorPosition (tipo)
  • IndicatorProps (tipo)
  • Insets (tipo)
  • Locale (tipo)
  • NativeAdapterOptions (tipo)
  • NetInfoLike (tipo)
  • OfflineDetector (componente)
  • OfflineDetectorProps (tipo)
  • OfflineDetectorSlot (tipo)
  • OfflineDetectorSlots (tipo)
  • OfflineState (tipo)
  • OfflineStrings (tipo)
  • OfflineTheme (tipo)
  • OfflineUiOptions (tipo)
  • Phase (tipo)
  • PieceIcons (tipo)
  • PieceProps (tipo)
  • PieceRenderProps (tipo)
  • RecheckOnReturnOptions (tipo)
  • STRINGS (constante)
  • ShadowStyle (tipo)
  • Snackbar (componente)
  • SnackbarProps (tipo)
  • UseNetworkStatusResult (tipo)
  • createNativeAdapter (função)
  • createTheme (função)
  • darkTheme (constante)
  • indicatorName (função)
  • lightTheme (constante)
  • offlineMessage (função)
  • packageName (constante)
  • resolveDismissible (função)
  • resolveLocale (função)
  • resolveStrings (função)
  • useCheckingFeedback (hook)
  • useDismissals (hook)
  • useNetworkStatus (hook)
  • useOfflineDetector (hook)
  • useOfflineTheme (hook)
  • useRecheckOnReturn (hook)
  • useReducedMotion (hook)