react-native-indicator - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

index.js

@@ -9,2 +9,3 @@ /**
 import Text from './lib/loader/TextLoader';
+import MultipleDots from './lib/loader/MultipleDotsLoader';
 
@@ -14,1 +15,2 @@ export const CircleLoader = Circle;
 export const TextLoader = Text;
+export const MultipleDotsLoader = MultipleDots;

lib/loader/PulseLoader.js

@@ -14,3 +14,4 @@ /**
         color: PropTypes.string,
-        size: PropTypes.number
+        size: PropTypes.number,
+        betweenSpace: PropTypes.number
     };
@@ -20,3 +21,4 @@
         color: '#1e90ff',
-        size: 10
+        size: 10,
+        betweenSpace: 5
     };
@@ -29,2 +31,3 @@
         };
+        this.timers = [];
         this._animation = this._animation.bind(this);
@@ -34,5 +37,5 @@ }
     _renderCircle(i){
-        const {color, size} = this.props;
+        const {color, size, betweenSpace} = this.props;
         return(
-            <AnimatedCircle radius={size} fill={color} x={size + i * (size+5)} y={size} scale={this.state.scales[i]}/>
+            <AnimatedCircle radius={size} fill={color} x={size + i * (size+betweenSpace)} y={size} scale={this.state.scales[i]}/>
         );
@@ -42,5 +45,5 @@ }
     render(){
-        const {size} = this.props;
+        const {size, betweenSpace} = this.props;
         return(
-            <Surface width={size*3 + (size+5)*2} height={size*2}>
+            <Surface width={size*3 + (size+betweenSpace)*2} height={size*2}>
                 {this._renderCircle(0)}
@@ -55,3 +58,4 @@ {this._renderCircle(1)}
         this.state.scales.forEach((item, i) => {
-            setTimeout(()=>{this._animation(i)}, i*200);
+            const id = setTimeout(()=>{this._animation(i)}, i*250);
+            this.timers.push(id);
         });
@@ -62,2 +66,5 @@ }
         this.unmounted = true;
+        this.timers.forEach((id)=>{
+            clearTimeout(id);
+        });
     }
@@ -67,4 +74,4 @@
         Animated.sequence([
-            Animated.timing(this.state.scales[i], {toValue: 0.1, duration: 400, easing: Easing.bezier(.2,.68,.18,1.08)}),
-            Animated.timing(this.state.scales[i], {toValue: 1, duration: 400, easing: Easing.bezier(.2,.68,.18,1.08)})
+            Animated.timing(this.state.scales[i], {toValue: 0.2, duration: 500}),
+            Animated.timing(this.state.scales[i], {toValue: 1, duration: 500})
         ]).start(()=>{
@@ -71,0 +78,0 @@ if(!this.unmounted)

lib/loader/TextLoader.js

@@ -9,14 +9,8 @@ /**
 
-export default class CircleLoader extends Component{
+export default class TextLoader extends Component{
     static propTypes = {
         text: PropTypes.string.isRequired,
-        color: PropTypes.string,
-        size: PropTypes.number
+        textStyle: Text.propTypes.style
     };
 
-    static defaultProps = {
-        color: '#1e90ff',
-        size: 14
-    };
-
     constructor(props){
@@ -32,8 +26,8 @@ super(props);
     render(){
-        const {text, color, size} = this.props;
+        const {text, textStyle} = this.props;
         return(
             <View style={{flexDirection: 'row'}}>
-                <Text style={{fontSize: size, color: color}}>{text}</Text>
+                <Text style={textStyle}>{text}</Text>
                 {this.state.opacities.map((item, i)=>{
-                    return <Text key={i} style={{opacity: item, fontSize: size, color: color}}>.</Text>
+                    return <Text key={i} style={[{opacity: item}, textStyle]}>.</Text>
                 })}
@@ -40,0 +34,0 @@ </View>

package.json

 {
   "name": "react-native-indicator",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "description": "React Native Indicator Component",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

 # react-native-indicator
 
-A useful indicator component for React Native
+A useful indicator component for React Native
+
+## Installation
+
+Make sure that you are in your React Native project directory and run:
+```
+$ npm install react-native-indicator --save 
+```
+
+### Android
+
+It works, have fun!
+
+### iOS
+
+Add ```ART.xcodeproj``` from ```node_modules/react-native/React/Libraries/ART``` to your Libraries then link ```libART.a```. To see more details about **Linking Libraries**, jump to [this](https://facebook.github.io/react-native/docs/linking-libraries-ios.html).
+
+## Usage
+
+Import react-native-indicator as a JavaScript module:
+```
+import {CircleLoader, PulseLoader, TextLoader} from 'react-native-indicator';
+```
+
+## Props
+
+##### CircleLoader
+
+| prop | type | default | isRequired | description |
+| ---- | ---- | ---- | ---- | ---- |
+| size | number | 10 | no | circle's size |
+| color | string | '#1e90ff' | no | the indicator's color |
+
+
+##### PulseLoader
+
+| prop | type | default | isRequired | description |
+| ---- | ---- | ---- | ---- | ---- |
+| size | number | 10 | no | circle's size |
+| color | string | '#1e90ff' | no | the indicator's color |
+| betweenSpace | number | 5 | no | the distance between two dots |
+
+
+##### TextLoader
+
+| prop | type | default | isRequired | description |
+| ---- | ---- | ---- | ---- | ---- |
+| **text** | string | none | **yes** | contents |
+| textStyle | style | inherited | no | text's style |
+
+
+##### MultipleDotsLoader
+
+| prop | type | default | isRequired | description |
+| ---- | ---- | ---- | ---- | ---- |
+| size | number | 40 | no | circle's size |
+| color | string | '#1e90ff' | no | the indicator's color |
+| dotRadius | number | 10| no | each dot's size |

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

AI-detected possible typosquat

Supply chain risk

AI has identified this package as a potential typosquat of a more popular package. This suggests that the package may be intentionally mimicking another package's name, description, or other metadata.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

13250

increased by75.96%

Number of package files

13

increased by44.44%

Lines of code

321

increased by67.19%

Number of lines in readme file

60

increased by1900%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes