Skeleton | NativeBase | Universal Components for React and React Native

Data Display
Typography
Disclosure
Media and Icons
Others
Skeleton
Skeleton showcases the loading state of a component.
Show Code
Playground
Examples
Usage
Playground
Color
Playground
Composition
Playground
IsLoaded
Playground
Props
Skeleton
fadeDuration
The fadeIn duration in seconds
Type: number
isLoaded
If true, it'll render its children
Type: boolean
speed
The animation speed in seconds
Type: number
startColor
The color at the animation start
Type: ResponsiveValue<"gray.300" | "muted.50" | "muted.800" | "text.500" | "text.400" | "text.900" | "muted.200" | "muted.300" | "muted.400" | "muted.500" | "text.50" | "text.600" | "muted.700" | ... 342 more ... | (string & {})>
endColor
The color at the animation end
Type: ResponsiveValue<"gray.300" | "muted.50" | "muted.800" | "text.500" | "text.400" | "text.900" | "muted.200" | "muted.300" | "muted.400" | "muted.500" | "text.50" | "text.600" | "muted.700" | ... 342 more ... | (string & {})>
size
Sizes for Skeleton
Type: ResponsiveValue<number | "full" | "sm" | "6" | "2xs" | "2" | "8" | "xs" | "3" | "12" | "md" | "4" | "16" | "xl" | "5" | "24" | "32" | "7" | "0.5" | "2.5" | "lg" | "1" | "2xl" | "1.5" | "10" | "20" | "64" | ... 27 more ... | "5/6">
SkeletonText
fadeDuration
The fadeIn duration in seconds
Type: number
isLoaded
If true, it'll render its children
Type: boolean
speed
The animation speed in seconds
Type: number
startColor
The color at the animation start
Type: ResponsiveValue<"gray.300" | "muted.50" | "muted.800" | "text.500" | "text.400" | "text.900" | "muted.200" | "muted.300" | "muted.400" | "muted.500" | "text.50" | "text.600" | "muted.700" | ... 342 more ... | (string & {})>
endColor
The color at the animation end
Type: ResponsiveValue<"gray.300" | "muted.50" | "muted.800" | "text.500" | "text.400" | "text.900" | "muted.200" | "muted.300" | "muted.400" | "muted.500" | "text.50" | "text.600" | "muted.700" | ... 342 more ... | (string & {})>
lines
No of Lines in text
Type: number
_line
Stying for each line
Type: Partial<InterfaceSkeletonProps>
_stack
Props to be passed to the Stack used inside.
Type: Partial<IStackProps>
Styling
NativeBase ships with a default theme for each component. Checkout the default theme of skeleton.
Info: We can easily extend the skeleton component theme using extendTheme function as described in the documentation .
Nativebase logo
MadeWithNativeBase