Component

NoInternet

Network failure state with icon, copy, animation, and retry action.

←→

React Native

No Internet

Network failure state with retry action.

Connection lost

Please check your connection and try again.

Try again

import { NoInternet, toast } from '@sohantalukder/rn-kit';

export function OfflineScreen() {
  return (
    <NoInternet
      text="No connection"
      description="Check your internet connection and try again."
      onRetry={() => toast.show({ type: 'info', title: 'Retrying connection' })}
    />
  );
}

Live component

defaultstaticcustom copy

Provide a retry path.
Use clear offline copy without blame.

Usage

import { NoInternet } from '@sohantalukder/rn-kit';

import { NoInternet, toast } from '@sohantalukder/rn-kit';

export function OfflineScreen() {
  return (
    <NoInternet
      text="No connection"
      description="Check your internet connection and try again."
      onRetry={() => toast.show({ type: 'info', title: 'Retrying connection' })}
    />
  );
}

Props

These are the most important props to consider first. The custom preview highlights the common setup before you move into app-specific states.

PropTypeDefaultDescription

textstring-Primary text rendered by the component.

descriptionstring-Supporting copy shown below the title or primary message.

onRetry() => void-Called when the user taps the retry action.

animatedbooleantrueEnables or disables the animated presentation for the state view.

iconSizenumberthemeSets the rendered icon dimensions.

Theme

NoInternet reads from the rn-kit theme context where applicable. Wrap your app with ThemeProvider and prefer package theme tokens over hardcoded screen-level colors.

Variants

default
static
custom copy

Best Practices

Provide a retry path.
Use clear offline copy without blame.