Component

Loader

Animated loading indicator for inline and blocking loading states.

React Native

Loader

Inline progress indicator for busy states.

Loading account data

import { View } from 'react-native';
import { Loader, Text, useTheme } from '@sohantalukder/rn-kit';

export function LoadingState() {
  const { gutters, layout } = useTheme();

  return (
    <View style={[layout.itemsCenter, gutters.gap_12, gutters.padding_24]}>
      <Loader size={32} />
      <Text color="secondary">Loading transactions...</Text>
    </View>
  );
}

Live component

smallmediumlargecustom color

Pair long waits with descriptive text.
Use inside buttons only when the action is already submitted.

Usage

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

import { View } from 'react-native';
import { Loader, Text, useTheme } from '@sohantalukder/rn-kit';

export function LoadingState() {
  const { gutters, layout } = useTheme();

  return (
    <View style={[layout.itemsCenter, gutters.gap_12, gutters.padding_24]}>
      <Loader size={32} />
      <Text color="secondary">Loading transactions...</Text>
    </View>
  );
}

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

sizeComponentSize | numbermediumControls the rendered component scale.

colorColorValuethemeOverrides the component color while preserving layout and behavior.

styleStyleProp<ViewStyle>-Additional style object merged into the root element.

Theme

Loader 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

small
medium
large
custom color

Best Practices

Pair long waits with descriptive text.
Use inside buttons only when the action is already submitted.