Skip to main content

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