Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit d157d6e

Browse files
feat(RippleLoader): add frequency attribute
1 parent 553f4bb commit d157d6e

File tree

4 files changed

+27
-22
lines changed

4 files changed

+27
-22
lines changed

‎README.md

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,21 +14,23 @@ A useful indicator component for React Native
1414
Make sure that you are in your React Native project directory and run:
1515
```
1616
$ npm install react-native-indicator --save
17+
$ npm install @react-native-community/art --save
1718
```
1819

19-
### Android
20+
For react-native >= 0.60 ReactNativeART should be auto-linked and no additional action is required.
2021

21-
It works, have fun!
22-
23-
### iOS
22+
For react-native < 0.60 you need to link ReactNative ART:
23+
```
24+
$ react-native link @react-native-community/art
25+
```
2426

25-
Following the [Art module](https://github.com/react-native-community/art) instruction to configure.
27+
More info, following the [Art module](https://github.com/react-native-community/art) instruction to configure.
2628

2729
## Usage
2830

2931
Import react-native-indicator as a JavaScript module:
3032
```
31-
import {CirclesLoader, PulseLoader, TextLoader, DotsLoader, ...} from 'react-native-indicator';
33+
import {CirclesLoader, PulseLoader, TextLoader, DotsLoader, ...} from 'react-native-indicator';
3234
```
3335

3436
Here is currently available types:
@@ -54,12 +56,12 @@ Here is currently available types:
5456

5557
```
5658
render(){
57-
return(
58-
<View>
59-
<CirclesLoader />
60-
<TextLoader text="Loading" />
61-
</View>
62-
);
59+
return(
60+
<View>
61+
<CirclesLoader />
62+
<TextLoader text="Loading" />
63+
</View>
64+
);
6365
}
6466
```
6567

@@ -138,6 +140,7 @@ render(){
138140
| prop | type | default | description |
139141
| ---- | ---- | ---- | ---- |
140142
| size | number | 10 | circle's size |
143+
| frequency | number | 1600 | scale's frequency |
141144
| color | string | '#1e90ff' | indicator's color |
142145
| strokeWidth | number | 3 | outline width |
143146

‎lib/loader/RippleLoader.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,12 +10,14 @@ export default class RippleLoader extends React.PureComponent {
1010
color: PropTypes.string,
1111
size: PropTypes.number,
1212
strokeWidth: PropTypes.number,
13+
frequency: PropTypes.number,
1314
};
1415

1516
static defaultProps = {
1617
color,
1718
size: 40,
1819
strokeWidth: 3,
20+
frequency: 1600,
1921
};
2022

2123
state = {
@@ -28,7 +30,7 @@ export default class RippleLoader extends React.PureComponent {
2830
this.state.scales.forEach((item, i) => {
2931
const id = setTimeout(() => {
3032
this._animation(i);
31-
}, i * 1200);
33+
}, i * this.props.frequency*0.75);
3234
this.timers.push(id);
3335
});
3436
}
@@ -41,9 +43,14 @@ export default class RippleLoader extends React.PureComponent {
4143
}
4244

4345
_animation = (i) => {
46+
const { frequency } = this.props;
4447
Animated.parallel([
45-
Animated.timing(this.state.scales[i], { toValue: 1, duration: 1600 }),
46-
Animated.timing(this.state.opacities[i], { toValue: 0, duration: 1600, delay: 800 }),
48+
Animated.timing(this.state.scales[i], { toValue: 1, duration: frequency }),
49+
Animated.timing(this.state.opacities[i], {
50+
toValue: 0,
51+
duration: frequency,
52+
delay: frequency / 2,
53+
}),
4754
]).start(() => {
4855
if (!this.unmounted) {
4956
this.state.scales[i].setValue(0.1);

‎lib/loader/TextLoader.js

Lines changed: 1 addition & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,12 +15,7 @@ export default class TextLoader extends React.PureComponent {
1515
state = {
1616
opacities: [0, 0, 0],
1717
};
18-
patterns = [
19-
[0, 0, 0],
20-
[1, 0, 0],
21-
[1, 1, 0],
22-
[1, 1, 1],
23-
];
18+
patterns = [[0, 0, 0], [1, 0, 0], [1, 1, 0], [1, 1, 1]];
2419
timers = [];
2520

2621
componentDidMount() {

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-native-indicator",
3-
"version": "1.1.0",
3+
"version": "1.2.0",
44
"description": "React Native Indicator Component",
55
"main": "index.js",
66
"scripts": {

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /