Skip to content

Commit f5b5d3c

Browse files
deveixdeveix
committed
Changing old react component to use react hooks
1 parent cc3102d commit f5b5d3c

File tree

3 files changed

+448
-539
lines changed

3 files changed

+448
-539
lines changed

‎README.md‎

Lines changed: 73 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,32 @@
1-
### Custom Android Pull to Refresh
1+
### Custom Pull to Refresh Component
22

33
Inspired by the shots from the author: https://dribbble.com/yupnguyen
44

55
[Expo Demo](https://expo.io/@devilsanek/animated-pull-to-refresh)
66

7-
| Coffee Concept | Coin Concept | Weather Concept
8-
| ------------------------- |:-----------------------:|:-----------------------:|
9-
| ![Output sample](https://github.com/NadiKuts/react-native-pull-down/blob/master/examples/SimpleAnimations/resources/coffee_animation.gif)|![Output sample](https://github.com/NadiKuts/react-native-pull-down/blob/master/examples/SimpleAnimations/resources/coin_animation.gif) |![Output sample](https://github.com/NadiKuts/react-native-pull-down/blob/master/examples/SimpleAnimations/resources/weather_animation.gif)|
7+
| Coffee Concept | Coin Concept | Weather Concept |
8+
| ----------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------: |
9+
| ![Output sample](https://github.com/NadiKuts/react-native-pull-down/blob/master/examples/SimpleAnimations/resources/coffee_animation.gif) | ![Output sample](https://github.com/NadiKuts/react-native-pull-down/blob/master/examples/SimpleAnimations/resources/coin_animation.gif) | ![Output sample](https://github.com/NadiKuts/react-native-pull-down/blob/master/examples/SimpleAnimations/resources/weather_animation.gif) |
1010

1111
### Description
1212

13-
Currently, react-native provides RefreshControl out of the box. (Which uses standard circle android animation).
14-
https://facebook.github.io/react-native/docs/refreshcontrol.html.
13+
Currently, react-native provides RefreshControl out of the box. (Which uses standard circle android animation).
14+
https://facebook.github.io/react-native/docs/refreshcontrol.html.
1515

16-
However, it is not 'yet' possible to override the animation that runs during refreshing phase. This package aims to fill this gap and provide a 'relatively' easy way to add your own custom animation.
16+
However, it is not 'yet' possible to override the animation that runs during refreshing phase. This package aims to fill this gap and provide a 'relatively' easy way to add your own custom animation.
1717

1818
### Installation
1919

20-
1. Install the package using either:
20+
1. Install the package using either:
21+
2122
```sh
2223
$ npm install --save react-native-pull-refresh
2324
# or
2425
$ yarn add react-native-pull-refresh
2526
```
2627

2728
2. Install and link the Lottie package (renders Adobe After Effect animations):
28-
https://github.com/airbnb/lottie-react-native
29+
https://github.com/airbnb/lottie-react-native
2930

3031
```sh
3132
yarn add lottie-react-native
@@ -45,59 +46,58 @@ You can find `< Header />` and `< ScrollItem />` components in the sample folder
4546
import PullToRefresh from 'react-native-pull-refresh';
4647

4748
export default class weatherAnimation extends Component {
48-
constructor( ) {
49-
super( );
50-
this.state = {
51-
isRefreshing: false,
52-
};
53-
}
54-
55-
onRefresh() {
56-
this.setState({isRefreshing: true});
57-
58-
// Simulate fetching data from the server
59-
setTimeout(() => {
60-
this.setState({isRefreshing: false});
61-
}, 5000);
62-
}
63-
64-
render() {
65-
return (
66-
<View style={{flex:1}}>
67-
<Header/>
68-
<View style={{flex: 7, backgroundColor: '#F8F4FC'}}>
69-
<PullToRefresh
70-
isRefreshing= {this.state.isRefreshing}
71-
onRefresh= {this.onRefresh.bind(this)}
72-
animationBackgroundColor = {'#564A63'}
73-
pullHeight = {180}
74-
contentView = {
75-
<ScrollView>
76-
<ScrollItem/>
77-
<ScrollItem/>
78-
<ScrollItem/>
79-
<ScrollItem/>
80-
<ScrollItem/>
81-
<ScrollItem/>
82-
<ScrollItem/>
83-
<ScrollItem/>
84-
<ScrollItem/>
85-
</ScrollView>
86-
}
87-
88-
onPullAnimationSrc ={require('./umbrella_pull.json')}
89-
onStartRefreshAnimationSrc ={require('./umbrella_start.json')}
90-
onRefreshAnimationSrc = {require('./umbrella_repeat.json')}
91-
onEndRefreshAnimationSrc = {require('./umbrella_end.json')}
92-
/>
93-
</View>
94-
</View>
95-
);
96-
}
49+
constructor() {
50+
super();
51+
this.state = {
52+
isRefreshing: false,
53+
};
54+
}
55+
56+
onRefresh() {
57+
this.setState({ isRefreshing: true });
58+
59+
// Simulate fetching data from the server
60+
setTimeout(() => {
61+
this.setState({ isRefreshing: false });
62+
}, 5000);
63+
}
64+
65+
render() {
66+
return (
67+
<View style={{ flex: 1 }}>
68+
<Header />
69+
<View style={{ flex: 7, backgroundColor: '#F8F4FC' }}>
70+
<PullToRefresh
71+
isRefreshing={this.state.isRefreshing}
72+
onRefresh={this.onRefresh.bind(this)}
73+
animationBackgroundColor={'#564A63'}
74+
pullHeight={180}
75+
onPullAnimationSrc={require('./umbrella_pull.json')}
76+
onStartRefreshAnimationSrc={require('./umbrella_start.json')}
77+
onRefreshAnimationSrc={require('./umbrella_repeat.json')}
78+
onEndRefreshAnimationSrc={require('./umbrella_end.json')}>
79+
// content to pull goes here
80+
<ScrollView>
81+
<ScrollItem />
82+
<ScrollItem />
83+
<ScrollItem />
84+
<ScrollItem />
85+
<ScrollItem />
86+
<ScrollItem />
87+
<ScrollItem />
88+
<ScrollItem />
89+
<ScrollItem />
90+
</ScrollView>
91+
</PullToRefresh>
92+
</View>
93+
</View>
94+
);
95+
}
9796
}
9897
```
9998

10099
#### Animation Files Format
100+
101101
Lottie JSON - https://github.com/airbnb/lottie-react-native
102102

103103
Lottie is a mobile library, developed by AirBnB for Android and iOS that parses Adobe After Effects animations exported as JSON with bodymovin and renders them natively on mobile.
@@ -108,36 +108,35 @@ You can find file examples in `examples/SimpleAnimations/animations` folder
108108

109109
#### General Props
110110

111-
| Prop | Type | Description |
112-
|---|---|---|
113-
|**`isRefreshing`**|`Boolean`|Refresh state set by parent to trigger refresh.|
114-
|**`pullHeight`**|`Integer`|Pull Distance _Default 180._|
115-
|**`onRefresh`**|`Function`|Callback after refresh event|
116-
|**`contentView`**|`Object`|The content: ScrollView or ListView|
117-
|**`animationBackgroundColor`**|`string`|Background color|
118-
|**`onScroll`**|`Function`|Custom onScroll event|
111+
| Prop | Type | Description |
112+
| ------------------------------ | ---------- | ----------------------------------------------- |
113+
| **`isRefreshing`** | `Boolean` | Refresh state set by parent to trigger refresh. |
114+
| **`pullHeight`** | `Integer` | Pull Distance _Default 180._ |
115+
| **`onRefresh`** | `Function` | Callback after refresh event |
116+
| **`animationBackgroundColor`** | `string` | Background color |
117+
| **`onScroll`** | `Function` | Custom onScroll event |
119118

120119
#### Animation Source Files Props
121120

122-
| Prop | Description |
123-
|---|---|
124-
|**`onPullAnimationSrc`**|Animation JSON that runs when scroll view is pulled down|
125-
|**`onStartRefreshAnimationSrc`**|Animation JSON that runs after view was pulled and released|
126-
|**`onRefreshAnimationSrc`**|Animation JSON that runs continuously until isRefreshing props is not changed|
127-
|**`onEndRefreshAnimationSrc`**|Animation JSON that runs after isRefreshing props is changed|
121+
| Prop | Description |
122+
| -------------------------------- | ----------------------------------------------------------------------------- |
123+
| **`onPullAnimationSrc`** | Animation JSON that runs when scroll view is pulled down |
124+
| **`onStartRefreshAnimationSrc`** | Animation JSON that runs after view was pulled and released |
125+
| **`onRefreshAnimationSrc`** | Animation JSON that runs continuously until isRefreshing props is not changed |
126+
| **`onEndRefreshAnimationSrc`** | Animation JSON that runs after isRefreshing props is changed |
128127

129128
### Demo
129+
130130
The demo app can be found at `examples/SimpleAnimations`.
131131

132132
Install Expo App on your [Android smartphone](https://play.google.com/store/apps/details?id=host.exp.exponent&referrer=www)
133133

134-
Scan this QR-code with your Expo App.
134+
Scan this QR-code with your Expo App.
135135

136136
![alt text](https://github.com/NadiKuts/react-native-pull-refresh/blob/master/examples/SimpleAnimations/resources/scan.png)
137137

138138
... or go [here](https://expo.io/@devilsanek/animated-pull-to-refresh) and try it out!
139139

140-
141140
### Contribution / Issues
142141

143142
Are very welcome! :)

0 commit comments

Comments
 (0)