Animation

Built-in animations

Skel UI defaults to using a shimmer animation effect for skeletons, but it also includes a built-in pulse animation.

<Skel.Provider> ... </Skel.Provider>

<Skel.Provider skelUIPulse> ... </Skel.Provider>

Animation Timing

The timing of the animation can be customized via Skel.Provider.

App.tsx

import { Easing } from "react-native-reanimated";
 
<Skel.Provider
  animation={{
    duration: 3500 /* in millisecond */,
    easing: Easing.linear /* Should be imported from `react-native-reanimated` */,
    delay: 250 /* in millisecond */,
  }}
>
  ...
</Skel.Provider>

Custom animation

You can also pass your own animation component to Skel UI.

App.tsx

<Skel.Provider
  animation={{ component: <CustomAnimation /> }}
>
  ...
</Skel.Provider>

The custom animation component should have a width and height of 100%.

Animation

Built-in animations

‌

‌

Animation Timing

Custom animation

On this page