Skip to main content
Version: 7.0.0

SkeletonView

Allows showing a temporary skeleton view while your real view is loading
(code example)

tip

This component support margin modifiers.

note

Requires installing the 'react-native-shimmer-placeholder' and 'react-native-linear-gradient' libraries

Usage

Live Editor
<SkeletonView
  template={SkeletonView.templates.LIST_ITEM}
  showContent={isAvailable}
  renderContent={<ListItem><Text grey10 text60 marginL-10>The item</Text></ListItem>}
  times={10}
/>
Result
Loading...

API

borderRadius

The border radius of the skeleton view number

circle

Whether the skeleton is a circle (will override the borderRadius) boolean

colors

The colors of the skeleton view, the array length has to be >=2 string[]

customValue

Custom value of any type to pass on to SkeletonView and receive back in the renderContent callback. any

height

The height of the skeleton view number

listProps

Props that are available when using template={SkeletonView.templates.LIST_ITEM} SkeletonListProps

renderContent

A function that will render the content once the content is ready (i.e. showContent is true). The method will be called with the Skeleton's customValue (i.e. renderContent(props?.customValue)) (customValue?: any) => React.ReactNode

shimmerStyle

Additional style to the skeleton view ViewStyle

showContent

The content has been loaded, start fading out the skeleton and fading in the content boolean

style

Override container styles ViewStyle

template

Accessible through SkeletonView.templates.xxx

The type of the skeleton view. listItem | content

testID

The component test id string

times

Generates duplicate skeletons number

timesKey

A key prefix for the duplicated SkeletonViews string

width

The width of the skeleton view number