← All @molecule/* packages · App templates

@molecule/app-network-react-native

Provider bond · network · App (browser) · v1.0.1 · Apache-2.0

React Native network status provider

npm install @molecule/app-network-react-native

npm · Source on GitHub · Implements @molecule/app-network

How it works

@molecule/app-network-react-native is a provider bond on the app (browser) side: it implements the network core interface (@molecule/app-network) with a concrete vendor or library behind it.

Your code calls the core; you wire this provider once at startup. Swapping vendors later is one line in that wiring, not a rewrite.

import { setProvider } from '@molecule/app-network'
import { provider } from '@molecule/app-network-react-native'

setProvider(provider) // once, at app startup

Reference

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

React Native network status provider for molecule.dev.

Uses @react-native-community/netinfo to implement the NetworkProvider interface from @molecule/app-network: connection status/type, cellular generation, metered detection, and online/offline/change events.

Quick Start

import { setProvider } from '@molecule/app-network'
import { provider } from '@molecule/app-network-react-native'

setProvider(provider) // once, at app startup

Type

provider

Installation

npm install @molecule/app-network-react-native @molecule/app-i18n @molecule/app-logger @molecule/app-network @react-native-community/netinfo

API

Interfaces

ReactNativeNetworkConfig

Configuration for the React Native network provider.

interface ReactNativeNetworkConfig {
  /**
   * URL to use for active connectivity checks.
   * @default 'https://clients3.google.com/generate_204'
   */
  connectivityCheckUrl?: string

  /**
   * Timeout in milliseconds for connectivity checks.
   * @default 5000
   */
  connectivityCheckTimeout?: number
}

Functions

createReactNativeNetworkProvider(config)

Creates a React Native network status provider backed by @react-native-community/netinfo.

function createReactNativeNetworkProvider(config?: ReactNativeNetworkConfig): NetworkProvider
  • config — Optional provider configuration.

Returns: A NetworkProvider implementation for React Native.

Constants

provider

Default React Native network status provider.

const provider: NetworkProvider

Core Interface

Implements @molecule/app-network interface.

Bond Wiring

Setup function to register this provider with the core interface:

import { setProvider } from '@molecule/app-network'
import { provider } from '@molecule/app-network-react-native'

export function setupNativeNetworkReactNative(): void {
  setProvider(provider)
}

Injection Notes

Requirements

Peer dependencies:

  • @molecule/app-i18n ^1.0.1
  • @molecule/app-logger ^1.0.1
  • @molecule/app-network ^1.0.1
  • @react-native-community/netinfo >=9.0.0

Runtime Dependencies

  • @molecule/app-i18n

  • @molecule/app-logger

  • @molecule/app-network

  • @react-native-community/netinfo

  • Install the @react-native-community/netinfo peer (>= 9). It is imported lazily: without it every call rejects with an install hint, and onChange/onOnline/onOffline fail to attach (surface as an unhandled rejection) — call await getStatus() once at startup to fail fast.

  • checkConnectivity() performs an active HTTP HEAD probe — by default to https://clients3.google.com/generate_204. Point connectivityCheckUrl (or the per-call url argument) at your own endpoint if third-party egress is a concern.

  • getCapabilities(): connection type, cellular generation, and metered detection are supported; speed estimation is not.

Translations

Translation strings are provided by @molecule/app-locales-network.