Research
Security News
Quasar RAT Disguised as an npm Package for Detecting Vulnerabilities in Ethereum Smart Contracts
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
react-native-shimmer
Advanced tools
Simple shimmering effect in React Native. Based on Shimmer/shimmer-android.
yarn add react-native-shimmer
cd ios && pod install
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 link react-native-shimmer
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/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')
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')
}
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()
);
}
}
NOTE: Shimmer
may only have one child.
import Shimmer from 'react-native-shimmer';
<Shimmer>
<Text>Loading...</Text>
</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
FAQs
Simple shimmering effect in React Native
The npm package react-native-shimmer receives a total of 2,818 weekly downloads. As such, react-native-shimmer popularity was classified as popular.
We found that react-native-shimmer demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Research
Security News
Socket researchers uncover a malicious npm package posing as a tool for detecting vulnerabilities in Etherium smart contracts.
Security News
Research
A supply chain attack on Rspack's npm packages injected cryptomining malware, potentially impacting thousands of developers.
Research
Security News
Socket researchers discovered a malware campaign on npm delivering the Skuld infostealer via typosquatted packages, exposing sensitive data.