Skel UI

React Native

Styling

Skel UI provides styling through Skel Provider and Component props in react-native.

Skel UI Provider

Overrides the skeleton's default colors and border-radius via Skel.Provider.

App.tsx
<Skel.Provider
  color="#a1a1aa"
  radius={4}
  shimmer={{ color: "#e4e4e7" }}
>
  ...
</Skel.Provider>

Component props

The width, height and radius of the skeleton for each element can be modified with three special props.

<Skel.Text sw="75%" sh={64} sr={16}>
  ...
</Skel.Text>
NameTypeDescription
swstringWidth of the skeleton
shstringHeight of the skeleton
srnumberOverrides the default skeleton border-radius

By default, the border-radius defined in style will be applied to the skeleton. Therefore, avoid setting sr unless you want a different border-radius for the skeleton.

Text based on numberOfLines

Skel UI listen to the numberOfLines prop in Text component.

<Skel.Text> ... </Skel.Text>
<Skel.Text numberOfLines={3}> ... </Skel.Text>
Edit on GitHub

Previous

Animation

Next

Rendering List

On this page