The last exercise was very simple. The main goal to have in mind is that we can have in React Native components that we can write once and they generate platform specific components for us.

RefreshControl for React Native basically can be used with ListViews or ScrollViews. In our case, since we are not working with lists, we are going to work with ScrollViews.

Let's take a look at the solution:

<ScrollView
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this.onRefresh}
          />
        }
      >
        <View style={styles.container}>
          <Text>{this.state.text}</Text>
        </View>
      </ScrollView>

Here we have implemented a ScrollView, and we can easily use it with RefreshControl. Inside the ScrollView we just have a View and a Text. Let's take a look at the onRefresh method.

onRefresh() {
    this.setState({ refreshing: true });
    this.fetchData();
  }

It basically sets our state to refresh and call the method fetchData.

  fetchData() {
    setTimeout(() => {
      this.setState({ text: 'REFRESHED', refreshing: false });
      alert('Refreshed!');
    }, 2000);
  }

We are simulating a fetch data request, using a setTimeout every 2000 milliseconds we call the setState, updating the state text and refreshing.

After that, it will alert saying "Refreshed" and also it updates our View.

Hope you have enjoyed these components and you can tell the difference between write-once components and specific components from now on.

See you soon!

##Code

https://github.com/dailydrip/react-native-write-once-components