react-native-shimmer

Simple shimmering effect in React Native. Based on Shimmer/shimmer-android.

Installation

$ yarn add react-native-shimmer

IOS NOTE: react-native-shimmer relies on Shimmer from Facebook. If not using CocoaPods, you need to add Shimmer to your Xcode project manually. Follow the instructions on their repo and then continue with the following instructions:

Option: With CocoaPods

Add the following to your Podfile and run pod update:

pod 'react-native-shimmer', :path => 'node_modules/react-native-shimmer' 

Option: With react-native link

$ react-native link react-native-shimmer

Option: Manually

iOS

Add ios/RNShimmer.xcodeproj to Libraries and add libRNShimmer.a to Link Binary With Libraries under Build Phases. More info and screenshots about how to do this is available in the React Native documentation.

Android

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

rootProject.name = 'MyApp'  include ':app'  + include ':react-native-shimmer' + project(':react-native-shimmer').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-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-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.oblador.shimmer.RNShimmerPackage;  ....    @Override   protected List<ReactPackage> getPackages() {     return Arrays.<ReactPackage>asList(       new MainReactPackage() +   , new RNShimmerPackage()     );   }  }

Usage

NOTE: Shimmer may only have one child.

import Shimmer from 'react-native-shimmer';  <Shimmer>   <Text>Loading...</Text> </Shimmer>;

Properties

License

MIT License. Shimmer is under BSD license. © Joel Arvidsson 2016 - present