React Native Shimmer
Switch branches/tags
Nothing to show
Clone or download
Latest commit aba74b5 Apr 17, 2018
Failed to load latest commit information.
MovieScreen.js Create MovieScreen.js Apr 17, 2018 Update Apr 17, 2018
Shimmer.js Create Shimmer.js Apr 17, 2018
shimmer1.gif updated Apr 17, 2018


React Native Shimmer

Shimmer is an easy way to add a shimmering effect to any view in your app. It's useful as an unobtrusive loading indicator.

  • Copy Shimmer.js file to your project
  • Now install Gredient effect library from here React Native Linear Gradient
  • After installation link libraries react-native link
  • For the below gif image code has been added here check MovieScreen

Video Tutorial Link

Shimmer Effect

Alt text

How to use

import Shimmer from '../components/Shimmer';

<Shimmer autoRun={true} visible={false}>
  <Text>Movie Screen</Text>


Prop Description Default
autoRun Whether or not to show shimmering effect. true
visible show/hide shimmering effect. true
direction The direction of shimmering animation, valid values are up, down, left, right. right
duration The shimmering animation duration in milliseconds. 1000
pauseDuration The time interval between shimmerings in milliseconds. 400
animationOpacity The opacity of the content while it is shimmering. 1
opacity The opacity of the content before it is shimmering. iOS only 0.5
highlightLength The highlight length of shimmering. Range of 0–1. iOS only 1
beginFadeDuration The duration of the fade used when shimmer begins. iOS only 0
endFadeDuration The duration of the fade used when shimmer ends. iOS only 0
tilt The tilt angle of the highlight, in degrees. Android only 0
intensity The intensity of the highlight mask. Range of 0–1. Android only 0