Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-native-shimmer

Package Overview
Dependencies
Maintainers
1
Versions
11
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-native-shimmer

Simple shimmering effect in React Native

  • 0.6.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Maintainers
1
Created
Source

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 => 'node_modules/react-native-shimmer'

$ 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

PropDescriptionDefault
animatingWhether or not to show shimmering effect.true
directionThe direction of shimmering animation, valid values are up, down, left, right.right
durationThe shimmering animation duration in milliseconds.1000
pauseDurationThe time interval between shimmerings in milliseconds.400
animationOpacityThe opacity of the content while it is shimmering.1
opacityThe opacity of the content before it is shimmering.0.5
highlightLengthThe highlight length of shimmering. Range of 0–1. iOS only1
beginFadeDurationThe duration of the fade used when shimmer begins. iOS only0
endFadeDurationThe duration of the fade used when shimmer ends. iOS only0
tiltThe tilt angle of the highlight, in degrees. Android only0
intensityThe intensity of the highlight mask. Range of 0–1. Android only0

License

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

Keywords

FAQs

Package last updated on 30 Mar 2020

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc