status-im/react-native
2
0
Fork 0
mirror of https://github.com/status-im/react-native.git synced 2025-01-11 01:56:26 +00:00
Code Issues Projects Releases Wiki Activity
react-native/docs/refreshcontrol.md
Héctor Ramos 64d80b13db Migrate to new documentation format 
Summary:
Now that the Component and API docs are no longer auto-generated, we need to consolidate on a new format for our jsdoc comments. Any help from the community will be appreciated.

In this initial pull request, we'll be tackling the following docs:

- `AccessibilityInfo`, an API doc.
- `ActivityIndicator`, a Component doc.
- `View`, a Component doc.

This top comment will serve as a style guide, and when in doubt, please refer to the individual commits in this PR.

Each commit should update a single component or API, along with any relevant markdown files.

- Documentation in the JavaScript source files should be succinct. Any verbosity should be moved over to the markdown docs in the website...
- ...by adding a link to the relevant method/prop on the website to every comment block.
- Avoid markdown style links in JavaScript source files, opt for plain old URIs.

Let code document itself:

- If a method is Flow typed, the comment block does not need to repeat this information.
- If a param can be one of several values, and the type definition is easily determined from the code, the values should not be repeated in the comment block. Again, move this to the markdown doc if not present already.
Closes https://github.com/facebook/react-native/pull/16790

Differential Revision: D6353840

Pulled By: hramos

fbshipit-source-id: 9712c459acc33092aae9909f3dd0b58a00b26afc
2017-11-16 17:04:45 -08:00

3.2 KiB
Raw Blame History

id title layout category permalink next previous
refreshcontrol RefreshControl docs components docs/refreshcontrol.html scrollview progressviewios

This component is used inside a ScrollView or ListView to add pull to refresh functionality. When the ScrollView is at scrollY: 0, swiping down triggers an onRefresh event.

Usage example

class RefreshableList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
    };
  }

  _onRefresh() {
    this.setState({refreshing: true});
    fetchData().then(() => {
      this.setState({refreshing: false});
    });
  }

  render() {
    return (
      <ListView
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh.bind(this)}
          />
        }
        ...
      >
      ...
      </ListView>
    );
  }
  ...
}

Note: refreshing is a controlled prop, this is why it needs to be set to true in the onRefresh function otherwise the refresh indicator will stop immediately.

Props

Reference

Props

refreshing

Whether the view should be indicating an active refresh.

Type Required
bool Yes

onRefresh

Called when the view starts refreshing.

Type Required
function No

colors

The colors (at least one) that will be used to draw the refresh indicator.

Type Required Platform
array of color No Android

enabled

Whether the pull to refresh functionality is enabled.

Type Required Platform
bool No Android

progressBackgroundColor

The background color of the refresh indicator.

Type Required Platform
color No Android

progressViewOffset

Progress view top offset

Type Required Platform
number No Android

size

Size of the refresh indicator, see RefreshControl.SIZE.

Type Required Platform
enum(RefreshLayoutConsts.SIZE.DEFAULT, RefreshLayoutConsts.SIZE.LARGE) No Android

tintColor

The color of the refresh indicator.

Type Required Platform
color No iOS

title

The title displayed under the refresh indicator.

Type Required Platform
string No iOS

titleColor

Title color.

Type Required Platform
color No iOS