Skip to main content

SkeletonView

<SkeletonView
  template={SkeletonView.templates.LIST_ITEM}
  showContent={isAvailable}
  renderContent={<ListItem><Text grey10 text60 marginL-10>The item</Text></ListItem>}
  times={10}
/>
INFO
This component support margin modifiers.
APIThis is the list of additional props for the component

borderRadius
number
​

The border radius of the skeleton view

circle
boolean
​

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

colors
string[]
​

The colors of the skeleton view, the array length has to be >=2. Default is [Colors.grey70, Colors.grey60, Colors.grey70]

customValue
any
​

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

height
number
​

The height of the skeleton view

listProps
SkeletonListProps
​

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

renderContent
(customValue?: any) => React.ReactNode
​

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))

shimmerStyle
ViewStyle
​

Additional style to the skeleton view

showContent
boolean
​

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

style
ViewStyle
​

Override container styles

template
listItem | content
​

The type of the skeleton view.Accessible through SkeletonView.templates.xxx

testID
string
​

The component test id

times
number
​

Generates duplicate skeletons

timesKey
string
​

A key prefix for the duplicated SkeletonViews

width
number
​

The width of the skeleton view