Component

Skeleton

Placeholder block for loading layouts.

React Native

Skeleton

Match loading shapes to final content.

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

export function ProfileSkeleton() {
  const { gutters } = useTheme();

  return (
    <View style={gutters.gap_12}>
      <Skeleton width={64} height={64} borderRadius={32} />
      <Skeleton width="80%" height={16} />
      <Skeleton width="55%" height={16} />
    </View>
  );
}

Live component

lineavatarcard

Match the final content shape.
Use sparingly on fast transitions.

Usage

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

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

export function ProfileSkeleton() {
  const { gutters } = useTheme();

  return (
    <View style={gutters.gap_12}>
      <Skeleton width={64} height={64} borderRadius={32} />
      <Skeleton width="80%" height={16} />
      <Skeleton width="55%" height={16} />
    </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

widthnumber | string-Sets the rendered width of the component.

heightnumber | string-Sets the rendered height of the component.

borderRadiusnumber0Controls corner rounding for image, avatar, or surface content.

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

Theme

Skeleton 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

line
avatar
card

Best Practices

Match the final content shape.
Use sparingly on fast transitions.