[React Native] Using the WebView component

We can access web pages in our React Native application using the WebView component. We will connect the links in our repository component to their Github web page when a user click on them.

 

Navigate to WebView component:

    openPage(url){
        this.props.navigator.push({
            component: Web,
            title: 'Web View',
            passProps: {url}
        });
    }

 

Web View Compnent:

import React from 'react';
import {
    View,
    WebView,
    StyleSheet
} from 'react-native';

var styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F6F6EF',
        flexDirection: 'column',
    },
});

class Web extends React.Component{
    render(){
        return (
            <View style={styles.container}>
                <WebView source={{uri: this.props.url}} />
            </View>
        );
    }
}

Web.propTypes = {
    url: React.PropTypes.string.isRequired
};

module.exports = Web;