react-native-shimmer - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

index.js

@@ -8,2 +8,3 @@ import React, {
   requireNativeComponent,
+  ViewPropTypes,
 } from 'react-native';
@@ -13,8 +14,20 @@
   static propTypes = {
+    ...ViewPropTypes,
     animating: PropTypes.bool,
     direction: PropTypes.oneOf(['up', 'down', 'left', 'right']),
+    duration: PropTypes.number,
     pauseDuration: PropTypes.number,
     animationOpacity: PropTypes.number,
     opacity: PropTypes.number,
-    speed: PropTypes.number,
+    speed: (() => {
+      let didWarn = false;
+      return (props, propName, componentName, ...rest) => {
+        if (props[propName] && !didWarn) {
+          didWarn = true;
+          console.warn('Shimmer.speed prop has been deprecated. Please use `duration` instead.');
+        }
+      };
+    })(),
+    tilt: PropTypes.number,
+    intensity: PropTypes.number,
     highlightLength: PropTypes.number,
@@ -27,7 +40,20 @@ beginFadeDuration: PropTypes.number,
     animating: true,
+    animationOpacity: 1,
+    duration: 1000,
+    opacity: 0.5,
+    tilt: 0,
+    pauseDuration: 400,
+    beginFadeDuration: 0,
+    endFadeDuration: 0,
   };
 
   render() {
-    const { direction, ...props } = this.props;
-    return (<RNShimmeringView shimmeringDirection={direction} {...props} />);
+    const { direction, opacity, ...props } = this.props;
+    return (
+      <RNShimmeringView
+        shimmeringOpacity={opacity}
+        shimmeringDirection={direction}
+        {...props}
+      />
+    );
   }
@@ -39,3 +65,4 @@ }
     shimmeringDirection: true,
+    shimmeringOpacity: true,
   },
 });

package.json

 {
   "name": "react-native-shimmer",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "Simple shimmering effect in React Native",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # react-native-shimmer
 
-Simple shimmering effect in React Native. Based on [Shimmer](https://github.com/facebook/Shimmer).
+Simple shimmering effect in React Native. Based on [Shimmer](https://github.com/facebook/Shimmer)/[shimmer-android](https://github.com/facebook/shimmer-android).
 
@@ -17,4 +17,56 @@ ![Shimmer](https://github.com/facebook/Shimmer/blob/master/shimmer.gif?raw=true)
 
+#### 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<ReactPackage> getPackages() {
+    return Arrays.<ReactPackage>asList(
+      new MainReactPackage()
++   , new RNShimmerPackage()
+    );
+  }
+
+}
+```
+
 ### Option: With [CocoaPods](https://cocoapods.org/)
@@ -30,3 +82,3 @@
 
-NOTE: `Shimmer` may only have one child and currently doesn't work with `View`.
+NOTE: `Shimmer` may only have one child.
 
@@ -44,15 +96,17 @@ ```js
 | Prop | Description | Default |
-|---|---|---|
-|**`animating`**|Wether or not to show shimmering effect. |`true`|
+|------|-------------|---------|
+|**`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. |`0.5`|
-|**`opacity`**|The opacity of the content before it is shimmering. |`1`|
-|**`speed`**|The speed of shimmering, in points per second. |`230`|
-|**`highlightLength`**|The highlight length of shimmering. Range of 0–1. |`1`|
-|**`beginFadeDuration`**|The duration of the fade used when shimmer begins. |`0.1`|
-|**`endFadeDuration`**|The duration of the fade used when shimmer ends. |`0.3`|
+|**`animationOpacity`**|The opacity of the content while it is shimmering. |`1`|
+|**`opacity`**|The opacity of the content before it is shimmering. *iOS only*|`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-now
+[MIT License](http://opensource.org/licenses/mit-license.html). Shimmer is under BSD license. © Joel Arvidsson 2016 - present

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

143252

98.45%

Number of package files

35

29.63%

Lines of code

241

653.13%

Number of lines in readme file

110

96.43%

Worsened metrics

Number of medium supply chain risk alerts

1

Infinity%

No dependency changes