Version: 3.0.6

Skeleton

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

Implements#

Examples#

Usage#

Color#

IsLoaded#

Props#

Skeleton composes Box so you can pass all Box props to it.

NameTypeDescriptionDefault
startColorstringThe color at the animation start.-
endColorstringThe color at the animation end.-
variantcircle, rect, textVariation of Skeleton to usetext
sizenumber, stringThe size of the Skeleton-

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.