react-native-shimmer
Simple shimmering effect in React Native. Based on Shimmer/shimmer-android.
Installation
yarn add react-native-shimmer
cd ios && pod installInstallation for React Native <= 0.59
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.gradleto 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 inandroid/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
| Prop | Description | Default |
|---|---|---|
animating |
Whether or not to show 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. | 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 |
License
MIT License. Shimmer is under BSD license. © Joel Arvidsson 2016 - present