Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Changing old react component to use react hooks #47

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Changing old react component to use react hooks #47

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
147 changes: 73 additions & 74 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,31 +1,32 @@
### Custom Android Pull to Refresh
### Custom Pull to Refresh Component

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

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

| Coffee Concept | Coin Concept | Weather Concept
| ------------------------- |:-----------------------:|:-----------------------:|
| ![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)|
| Coffee Concept | Coin Concept | Weather Concept |
| ----------------------------------------------------------------------------------------------------------------------------------------- | :-------------------------------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------------------------------: |
| ![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) |

### Description

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

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.
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.

### Installation

1. Install the package using either:
1. Install the package using either:

```sh
$ npm install --save react-native-pull-refresh
# or
$ yarn add react-native-pull-refresh
```

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

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

export default class weatherAnimation extends Component {
constructor( ) {
super( );
this.state = {
isRefreshing: false,
};
}

onRefresh() {
this.setState({isRefreshing: true});

// Simulate fetching data from the server
setTimeout(() => {
this.setState({isRefreshing: false});
}, 5000);
}

render() {
return (
<View style={{flex:1}}>
<Header/>
<View style={{flex: 7, backgroundColor: '#F8F4FC'}}>
<PullToRefresh
isRefreshing= {this.state.isRefreshing}
onRefresh= {this.onRefresh.bind(this)}
animationBackgroundColor = {'#564A63'}
pullHeight = {180}
contentView = {
<ScrollView>
<ScrollItem/>
<ScrollItem/>
<ScrollItem/>
<ScrollItem/>
<ScrollItem/>
<ScrollItem/>
<ScrollItem/>
<ScrollItem/>
<ScrollItem/>
</ScrollView>
}

onPullAnimationSrc ={require('./umbrella_pull.json')}
onStartRefreshAnimationSrc ={require('./umbrella_start.json')}
onRefreshAnimationSrc = {require('./umbrella_repeat.json')}
onEndRefreshAnimationSrc = {require('./umbrella_end.json')}
/>
</View>
</View>
);
}
constructor() {
super();
this.state = {
isRefreshing: false,
};
}

onRefresh() {
this.setState({ isRefreshing: true });

// Simulate fetching data from the server
setTimeout(() => {
this.setState({ isRefreshing: false });
}, 5000);
}

render() {
return (
<View style={{ flex: 1 }}>
<Header />
<View style={{ flex: 7, backgroundColor: '#F8F4FC' }}>
<PullToRefresh
isRefreshing={this.state.isRefreshing}
onRefresh={this.onRefresh.bind(this)}
animationBackgroundColor={'#564A63'}
pullHeight={180}
onPullAnimationSrc={require('./umbrella_pull.json')}
onStartRefreshAnimationSrc={require('./umbrella_start.json')}
onRefreshAnimationSrc={require('./umbrella_repeat.json')}
onEndRefreshAnimationSrc={require('./umbrella_end.json')}>
// content to pull goes here
<ScrollView>
<ScrollItem />
<ScrollItem />
<ScrollItem />
<ScrollItem />
<ScrollItem />
<ScrollItem />
<ScrollItem />
<ScrollItem />
<ScrollItem />
</ScrollView>
</PullToRefresh>
</View>
</View>
);
}
}
```

#### Animation Files Format

Lottie JSON - https://github.com/airbnb/lottie-react-native

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.
Expand All @@ -108,36 +108,35 @@ You can find file examples in `examples/SimpleAnimations/animations` folder

#### General Props

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

#### Animation Source Files Props

| Prop | Description |
|---|---|
|**`onPullAnimationSrc`**|Animation JSON that runs when scroll view is pulled down|
|**`onStartRefreshAnimationSrc`**|Animation JSON that runs after view was pulled and released|
|**`onRefreshAnimationSrc`**|Animation JSON that runs continuously until isRefreshing props is not changed|
|**`onEndRefreshAnimationSrc`**|Animation JSON that runs after isRefreshing props is changed|
| Prop | Description |
| -------------------------------- | ----------------------------------------------------------------------------- |
| **`onPullAnimationSrc`** | Animation JSON that runs when scroll view is pulled down |
| **`onStartRefreshAnimationSrc`** | Animation JSON that runs after view was pulled and released |
| **`onRefreshAnimationSrc`** | Animation JSON that runs continuously until isRefreshing props is not changed |
| **`onEndRefreshAnimationSrc`** | Animation JSON that runs after isRefreshing props is changed |

### Demo

The demo app can be found at `examples/SimpleAnimations`.

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

Scan this QR-code with your Expo App.
Scan this QR-code with your Expo App.

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

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


### Contribution / Issues

Are very welcome! :)
Loading