NetworkBanner

Animated banner for displaying network connectivity status with retry and dismiss actions.

iOSAndroid

Preview NetworkBanner on your device

Scan with Expo Go

Download Expo Go, then scan the QR code to preview native components.

Installation

pnpm dlx @docyrus/cli add @docyrus/rn-network-banner

Required Packages(1 package)

pnpm add react-native-reanimated

Usage

import { NetworkBanner } from '@/components/docyrus-native/network-banner';

<NetworkBanner
  visible={!isOnline}
  variant="offline"
  onRetry={() => checkConnection()}
  onDismiss={() => setDismissed(true)}
/>

API Reference

Prop	Type	Default	Description
`visible`	`boolean`	—	Whether the banner is visible
`variant`	`'offline' \| 'slow' \| 'reconnecting'`	`'offline'`	Network status variant
`message`	`string`	—	Custom message (overrides variant default)
`onRetry`	`() => void`	—	Retry button handler (shows button when provided)
`retryLabel`	`string`	`'Retry'`	Retry button text
`onDismiss`	`() => void`	—	Dismiss button handler (shows X when provided)
`position`	`'top' \| 'bottom'`	`'top'`	Banner position on screen
`className`	`string`	—	Additional CSS classes

Translation Keys

Built-in copy is read through useUiTranslation() — provide these keys via <UiTranslationProvider>. Without a provider the English fallback is shown.

Key	English fallback	Used for
`ui.networkBanner.offline`	You're offline	`offline` message (`message` prop wins)
`ui.networkBanner.slow`	Slow connection	`slow` message
`ui.networkBanner.reconnecting`	Reconnecting...	`reconnecting` message
`ui.networkBanner.retry`	Retry	Retry button (`retryLabel` prop wins)

Type Exports

Type	Description
`NetworkBannerProps`	Props for NetworkBanner component
`NetworkBannerVariant`	`'offline' \| 'slow' \| 'reconnecting'`