React-native-android-shimmer NPM

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>