react-native-shimmer

> 编程语言

Open source

Simple shimmering effect for any view in React Native

713 stars0 likes0 views

Website GitHub

About

Simple shimmering effect for any view in React Native

react-native-shimmer

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

Installation

bash

yarn add react-native-shimmer
cd ios && pod install

Installation for React Native

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 +):

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 getPackages() {
    return Arrays.asList(
      new MainReactPackage()
+   , new RNShimmerPackage()
    );
  }

}

Usage

NOTE: Shimmer may only have one child.

javascript

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`