react-native-android-shimmer

Simple shimmering effect for android in React Native. Based on Shimmer.

Installation

$ yarn add react-native-android-shimmer

Option: Manually

• Edit android/settings.gradle to look like this (without the +):

  rootProject.name = 'MyApp'
  
  include ':app'
  
  + include ':react-native-android-shimmer'
  + project(':react-native-android-shimmer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-android-shimmer/android')

• Edit android/app/build.gradle (note: app folder) to look like this:

  apply plugin: 'com.android.application'
  
  android {
    ...
  }
  
  dependencies {
    compile fileTree(dir: 'libs', include: ['*.jar'])
    compile "com.android.support:appcompat-v7:23.0.1"
    compile "com.facebook.react:react-native:+"  // From node_modules
  + compile project(':react-native-android-shimmer')
  }

• Edit your MainApplication.java (deep in android/app/src/main/java/...) to look like this (note two places to edit):

  package com.myapp;
  
  + import com.ibrahim.ReactAndroidShimmerPackage;
  
  ....
  
    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
        new MainReactPackage()
  +   , new ReactAndroidShimmerPackage()
      );
    }
  
  }

Usage

NOTE: Shimmer may only have one child and currently doesn't work with View.

Example with Text

import AndroidShimmer from 'react-native-android-shimmer';

<AndroidShimmer
    baseAlpha={0.5}
    duration={2000}>
    <Text>Loading...</Text>
</AndroidShimmer>

Example with Image

import AndroidShimmer from 'react-native-android-shimmer';

<AndroidShimmer
    style={{height: 250, flexDirection: 'column', backgroundColor: 'transparent'}}
    baseAlpha={0.8}
    duration={2000}>
    <View style={{flex: 1, backgroundColor: 'transparent'}}>
        <Image style={{height: 250, flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}} source={{uri: "https://images.pexels.com/photos/59963/crocus-flower-blossom-bloom-59963.jpeg?w=1260&h=750&auto=compress&cs=tinysrgb"}}>
            <Text style={{fontSize: 47, color: '#FFF'}}>Lorem Ipsum</Text>
        </Image>
    </View>
</AndroidShimmer>

Properties

Prop	Description
baseAlpha	Alpha used to render the base view i.e. the unhighlighted view over which the highlight is drawn.
duration	Time it takes for the highlight to move from one end of the layout to the other.
dropoff	Controls the size of the fading edge of the highlight.
intensity	Controls the brightness of the highlight at the center.
maskShape	Shape of the highlight mask, either with a linear or a circular gradient.
maskAngle	Angle at which the highlight mask is animated, from left-to-right, top-to-bottom etc.
tilt	Angle at which the highlight is tilted, measured in degrees.
repeatMode	What the animation should do after reaching the end, either restart from the beginning or reverse back towards it.

License

MIT License. Shimmer is under BSD license. © Ibrahim Ahmed 2017-now