ShimmerView

Component to display loading placeholders with shimmer animation.
Supports custom shapes, color, duration, stopping animation, and visibility control.

Usage

function ShimmerViewUsage() {
  return (
    <View>
      <ShimmerView height={140} borderRadius={20} />
      <View row>
        <ShimmerView circular height={60} />
        <View style={{marginStart: 20, alignSelf: 'center'}}>
          <ShimmerView width={200} height={16} />
          <ShimmerView width={100} height={12} />
        </View>
      </View>
    </View>
  )
}

Circular Shape

Use the circular prop to render the shimmer as a circle instead of a rectangle.

function ShimmerViewCircular() {
  return (
    <View row>
      <ShimmerView circular height={40} />
      <ShimmerView
        circular
        height={40}
        color="gold"
        style={{marginHorizontal: 20}}
      />
    </View>
  )
}

Duration

Use the duration prop to control the speed of the shimmer animation.

function ShimmerViewDuration() {
  return (
    <View>
      <ShimmerView height={40} duration={400} />
    </View>
  )
}

Stopping Animation

Use animated prop to pause/resume the shimmer animation.

function ShimmerViewStopAnimation() {
  return (
    <View>
      <ShimmerView height={40} animated={false} />
    </View>
  )
}

Control Visibility

Use visible prop to toggle shimmer visibility without unmounting the component.

Reset

function ShimmerViewVisibility() {
  const [isLoading, setIsLoading] = useState(true)

  const onReset = () => {
    setIsLoading(true)
    setTimeout(() => {
      setIsLoading(false)
    }, 2000)
  }

  useEffect(onReset, [])

  return (
    <View style={{alignSelf: 'center'}}>
      <ShimmerView visible={isLoading} circular height={100}>
        <Avatar
          mode="circle"
          size={100}
          url="https://picsum.photos/200/300?random=1"
          style={{marginVertical: 8}}
        />
      </ShimmerView>
      <Button title="Reset" size="small" onPress={onReset} />
    </View>
  )
}

Props

Prop	Data Type	Default Value	Description
Extends	DividerProps	--	Inherits properties from DividerProps
animated	boolean	true	Set it to false to disable the animation
visible	boolean	true	Set it to false to Hide the shimmer view and show it's children
circular	boolean	--	Set it to true to have the circular shape
borderRadius	number	--	Border radius of the view
duration	number	1000	Set it to false to disable the animation
mode	"fade" | "wave"	fade	Set the mode of the animation
width	DimensionValue	100%	Control Width of the divider
height	DimensionValue	1	Control height of the divider
spacing	DimensionValue	0	Spacing around the line
color	string	background900	Color of the divider
label	string	--	Label inside the divider
labelPosition	"left" | "right" | "center"	center	Label position where it will be rendered
row	boolean	--	Set true for horizontal(flexDirection) view