Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/oblador/react-native-shimmer
Simple shimmering effect for any view in React Native
https://github.com/oblador/react-native-shimmer
Last synced: 3 months ago
JSON representation
Simple shimmering effect for any view in React Native
- Host: GitHub
- URL: https://github.com/oblador/react-native-shimmer
- Owner: oblador
- License: mit
- Created: 2016-05-11T22:48:04.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-02-22T17:48:35.000Z (9 months ago)
- Last Synced: 2024-05-03T01:08:32.641Z (6 months ago)
- Language: Java
- Size: 479 KB
- Stars: 668
- Watchers: 10
- Forks: 89
- Open Issues: 17
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
- awesome-react-native-native-modules - react-native-shimmer ★137
README
# react-native-shimmer
Simple shimmering effect in React Native. Based on [Shimmer](https://github.com/facebook/Shimmer)/[shimmer-android](https://github.com/facebook/shimmer-android).
## Installation
```sh
yarn add react-native-shimmer
cd ios && pod install
```
Installation for React Native <= 0.59
### Option: With [CocoaPods](https://cocoapods.org/)
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](http://facebook.github.io/react-native/docs/linking-libraries-ios.html#content).
#### 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.
```js
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](http://opensource.org/licenses/mit-license.html). Shimmer is under BSD license. © Joel Arvidsson 2016 - present