ShimmerView

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

Usage Playground

Animated

Visible

Circular

Border Radius

Duration

Mode

fade

wave

Code Snippet

import { ShimmerView } from "@react-native-blossom-ui/components";

    function Usage() {
        return (
            <ShimmerView/>
        );
    }

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