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} />
          <ShimmerView width={100} />
        </View>
      </View>
    </View>
  )
}

Circular Shape

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

Duration

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

Stopping Animation

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

Control Visibility

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
width	DimensionValue	100%	Control Width of the divider
height	DimensionValue	0.6	Control height of the divider
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