Skeleton | NativeBase | Universal Components for React and React Native

Nativebase logo
NativeBase
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
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.500" | "text.50" | "text.600" | "muted.700" | "muted.600" | ... 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.500" | "text.50" | "text.600" | "muted.700" | "muted.600" | ... 342 more ... | (string & {})>
lines
No of Lines in text
Type: number
_line
Stying for each line
Type: InterfaceSkeletonProps
_stack
Props to be passed to the Stack used inside.
Type: InterfaceStackProps
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