Version: Next

Skeleton

Skeleton is used to display the loading state of a component.

Examples#

Usage#

Color#

Composition#

IsLoaded#

Props#

Skeleton#

Name Type Description Default
fadeDuration number The fadeIn duration in seconds -
isLoaded boolean If true, it'll render its children -
speed number The animation speed in seconds -
startColor ResponsiveValue<"gray.300" | "trueGray.400" | "gray.500" | "contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "dark.50" | "dark.100" | "dark.200" | "dark.300" | "dark.400" | ... 232 more ... | (string & {})> The color at the animation start -
endColor ResponsiveValue<"gray.300" | "trueGray.400" | "gray.500" | "contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "dark.50" | "dark.100" | "dark.200" | "dark.300" | "dark.400" | ... 232 more ... | (string & {})> The color at the animation end -
size ResponsiveValue<number | "px" | "full" | "sm" | "6" | "2xs" | "8" | "xs" | "12" | "md" | "16" | "xl" | "24" | "32" | "2" | "0.5" | "4" | "3" | "lg" | "1" | "2xl" | "0" | (string & {}) | "container" | ... 30 more ... | "5/6"> Sizes for Skeleton -

Skeleton implements Box

SkeletonText#

Name Type Description Default
fadeDuration number The fadeIn duration in seconds -
isLoaded boolean If true, it'll render its children -
speed number The animation speed in seconds -
startColor ResponsiveValue<"gray.300" | "trueGray.400" | "gray.500" | "contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "dark.50" | "dark.100" | "dark.200" | "dark.300" | "dark.400" | ... 232 more ... | (string & {})> The color at the animation start -
endColor ResponsiveValue<"gray.300" | "trueGray.400" | "gray.500" | "contrastThreshold" | "white" | "black" | "lightText" | "darkText" | "dark.50" | "dark.100" | "dark.200" | "dark.300" | "dark.400" | ... 232 more ... | (string & {})> The color at the animation end -
lines number No of Lines in text -
_line ISkeletonProps Stying for each line -

SkeletonText implements Stack, Box

Styling#

NativeBase ships with a default theme for each component. Checkout the default theme of skeleton
We can easily extend the skeleton component theme using extendTheme function as shown below.
import { extendTheme, NativeBaseProvider } from "native-base";
const theme = extendTheme({
components: {
Skeleton: {
baseStyle: {},
defaultProps: {},
variants: {},
sizes: {},
}
}
});
function MyApp() {
return (
<NativeBaseProvider theme={theme}>
{/* Rest of the app goes here */}
</NativeBaseProvider>
)
}
Read more about extending component theme here.