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

License

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