Simple shimmering effect in React Native
npm install @freakycoder/react-native-shimmerSimple shimmering effect in React Native. Based on Shimmer/shimmer-android.
``sh`
yarn add react-native-shimmer
cd ios && pod install
Installation for React Native <= 0.59
Add the following to your Podfile and run pod update:
`
pod 'react-native-shimmer', :path => 'node_modules/react-native-shimmer'
$ react-native link react-native-shimmer
#### 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 +):
`diff
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:
`diff
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):
`diff
package com.myapp;
+ import com.oblador.shimmer.RNShimmerPackage;
....
@Override
protected List
return Arrays.
new MainReactPackage()
+ , new RNShimmerPackage()
);
}
}
`
NOTE: Shimmer may only have one child.
`js
import Shimmer from 'react-native-shimmer';
`
| 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` |
MIT License. Shimmer is under BSD license. © Joel Arvidsson 2016 - present