Skeleton

Display

A shimmer placeholder that mimics content layout while data loads. Fully customisable width, height, and border radius.

Installation

bash

npx native-mate add skeleton

Examples

#FAFAFA

Radius100%

Usage

tsx

import { Skeleton } from '~/components/ui/skeleton'

// Text line placeholder
<Skeleton width="80%" height={16} />

// Avatar placeholder
<Skeleton width={48} height={48} borderRadius={24} />

// Card placeholder
<Skeleton width="100%" height={120} borderRadius={12} />

Props

Prop	Type	Default	Description
width	number \| string	—	Width of the skeleton element.
height	number	—	Height of the skeleton element.
borderRadius	number	8	Corner radius.
style	ViewStyle	—	Additional styles forwarded to the animated container.

Example

tsx

import { Skeleton } from '~/components/ui/skeleton'
import { View } from 'react-native'

export function SkeletonExample() {
  return (
    <View style={{ gap: 12, padding: 16 }}>
      {/* Profile card skeleton */}
      <View style={{ flexDirection: 'row', alignItems: 'center', gap: 12 }}>
        <Skeleton width={48} height={48} borderRadius={24} />
        <View style={{ gap: 6, flex: 1 }}>
          <Skeleton width="60%" height={14} />
          <Skeleton width="40%" height={12} />
        </View>
      </View>
      <Skeleton width="100%" height={140} borderRadius={12} />
      <Skeleton width="90%" height={14} />
      <Skeleton width="75%" height={14} />
    </View>
  )
}

Progress

Toast