React.js FAN: How to Create a News Reader With React Native: Web Page Component

In the first part , you learned how to set up React Native on your machine, create and use custom components, and use third party libraries, such as moment.js. In this tutorial, you learn how to make network requests using fetch, render a web page using the built-in WebView component, and run the app on a physical device.

1. Fetch API Wrapper

In the first part of this series, we used the api function, but we haven't defined it yet. Start by creating a src directory and add a file to it, api.js. Open the file and add the following to it:

module.exports = function(url){
return fetch(url).then(function(response){
return response.json();
}).then(function(json){
return json;
});
}

This file uses the fetch function, which is by default available in React Native. This function allows the app to perform network requests. If you've used jQuery, it's pretty similar to the $.ajax function. You specify a URL and some optional data, and you get a response back.

The only difference is that you need to do a bit of extra work. The function for capturing the first promise returns the raw response, which means that you have to call the json method on the response to get the promise that returns the JSON string. So you have to return the result from this and capture the promise by calling the then function once again and pass in the function that will be called once the promise resolves.

The JSON string would then be passed as an argument to this function so we just return it. The fetch method returns a promise so when we call the api method, we still have to call the then method to capture the actual response, just like we did in the first part of this series.

api(story_url).then(
(story) => {
...
}
);

2. WebPageComponent
The WebPage component is responsible for rendering a web page. It uses the WebView component to do so.

var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
WebView
} = React;
var Button = require('react-native-button');
var GiftedSpinner = require('react-native-gifted-spinner');
var _ = require('lodash');
var WebPage = React.createClass({
getInitialState: function() {
return {
isLoading: true
};
},
render: function(){
return (<View style={styles.container}>
<View style={styles.webview_header}>
<View style={styles.header_item}>
<Button style={styles.button} onPress={this.back}>Back</Button>
</View>
<View style={styles.header_item}>
<Text style={styles.page_title}>{this.truncate(this.state.pageTitle)}</Text>
</View>
<View style={[styles.header_item, styles.spinner]}>
{ this.state.isLoading && <GiftedSpinner /> }
</View>
</View>
<View style={styles.webview_body}>
<WebView
url={this.props.url}
onNavigationStateChange={this.onNavigationStateChange}
/>
</View>
</View>);
},
truncate: function(str){
return _.truncate(str, 20);
},
onNavigationStateChange: function(navState) {
if(!navState.loading){
this.setState({
isLoading: false,
pageTitle: navState.title
});
}
},
back: function(){
this.props.navigator.pop();
}
});
var styles = StyleSheet.create({
container: {
flex: 1
},
webview_header: {
paddingLeft: 10,
backgroundColor: '#FF6600',
flex: 1,
justifyContent: 'space-between',
flexDirection: 'row'
},
header_item: {
paddingLeft: 10,
paddingRight: 10,
justifyContent: 'center'
},
webview_body: {
flex: 9
},
button: {
textAlign: 'left',
color: '#FFF'
},
page_title: {
color: '#FFF'
},
spinner: {
alignItems: 'flex-end'
}
});
module.exports = WebPage;

First, we do some housekeeping by creating the variables we need and requiring the libraries we'll be using.

var React = require('react-native');
var {
AppRegistry,
StyleSheet,
Text,
View,
WebView
} = React;
var Button = require('react-native-button');
var GiftedSpinner = require('react-native-gifted-spinner');
var _ = require('lodash');

Next, we create the WebPage component.

var WebPage = React.createClass({
...
});

We set isLoading to true as the default state. This property is responsible for determining whether or not to show the spinner. By default, the spinner should be visible to indicate that the page is loading.

getInitialState: function() {
return {
isLoading: true
};
},

Next, we render the component. Like the news item component, this one also has a header and a body. The header contains a back button, the title of the page, and a spinner.

render: function(){
return (<View style={styles.container}>
<View style={styles.webview_header}>
<View style={styles.header_item}>
<Button style={styles.button} onPress={this.back}>Back</Button>
</View>
<View style={styles.header_item}>
<Text style={styles.page_title}>{this.truncate(this.state.pageTitle)}</Text>
</View>
<View style={[styles.header_item, styles.spinner]}>
{ this.state.isLoading && <GiftedSpinner /> }
</View>
</View>
<View style={styles.webview_body}>
<WebView
url={this.props.url}
onNavigationStateChange={this.onNavigationStateChange}
/>
</View>
</View>);
},

The body contains the WebView component. The WebView component has a url and onNavigationStateChange attributes. The url is the URL that was passed from the viewPage function in the NewsItems component earlier. So when the following code is executed:

this.props.navigator.push({name: 'web_page', url: url});

The renderScene method in index.android.js also gets executed and the URL is passed to it:

renderScene: function(route, navigator) {
var Component = ROUTES[route.name];
return (
<Component route={route} navigator={navigator} url={route.url} />
);
},

That is how we have access to the URL by extracting it from the props: this.props.url.

Let's go back to the attributes added to the WebView component. We have the onNavigationStateChange attribute, which is used for specifying the function to execute whenever the web view navigates to a new page. This is what that function looks like:

onNavigationStateChange: function(navState) {
if(!navState.loading){
this.setState({
isLoading: false,
pageTitle: navState.title
});
}
},

When the above function is called, the navState is passed along as an argument. This contains information about the current state of the web view, such as the title of the page and whether or not it is currently loading. This is the perfect place to update the state. When the page is no longer loading, we set isLoading to false and set a value for the pageTitle.

Next, we have the back function, which makes the navigator go back one page. This gets called whenever the user taps the back button in the header.

back: function(){
this.props.navigator.pop();
}

The truncate function limits the length of whatever is passed into the function. We use this function to limit the text for the page title of the web page.