Need help with react-native-shimmer?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

oblador
497 Stars 70 Forks MIT License 48 Commits 10 Opened issues

Description

Simple shimmering effect for any view in React Native

Services available

!
?

Need anything else?

Contributors list

# 1,499
JavaScr...
Objecti...
Shell
React N...
42 commits
# 418,373
React
Ethereu...
Blockch...
CSS
2 commits
# 168,942
Node.js
HTML
netflix
Objecti...
1 commit
# 295,012
React
Webpack
Redux
CSS
1 commit
# 250,439
archive...
HTML
Sass
toolcha...
1 commit
# 99,939
markdow...
Linux
Markdow...
Ubuntu
1 commit

react-native-shimmer

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

Shimmer

Installation

yarn add react-native-shimmer
cd ios && pod install
Installation for React Native <= 0.59

Option: With CocoaPods

Add the following to your Podfile and run pod update:

pod 'react-native-shimmer', :path =&gt; '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';


  Loading...
;

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

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.