How to use External web page in React Native View

Question

I want to use external web page in my React Native App . I have button on my app and want to open external web page onPress button in my app not on browser. I have tried WEBVIEW but not helped me. now I have Tried this :

 <HTMLView
        value={this.props.html}
        onLinkPress={(url) => alert('clicked link: ', url)}
      />

how can i do this ?

Answer 1

I have tried this and its working for me. install react-native-custom-tabs using this command

npm install react-native-custom-tabs --save 

and than link custom tabs package using

react-native link react-native-custom-tabs

and than call it

import {CustomTabs,ANIMATIONS_SLIDE,ANIMATIONS_FADE} from 'react-native-custom-tabs';

openCustomizedCustomTabs() {
    this.openGoogle({
      toolbarColor: '#607D8B',
      enableUrlBarHiding: true,
      showPageTitle: true,
      enableDefaultShare: true,
      animations: ANIMATIONS_SLIDE
    });
}
errorOccur() {
    this.openGoogle({
      //toolbarColor: '607D8B', // <--- Invalid toolbar color.
      enableUrlBarHiding: '#607D8B',  // <-- Type Error.
    })
  }

  openGoogle(option) {
    CustomTabs.openURL('https://www.google.com', option).then((launched: boolean) => {
      console.log(`Launched custom tabs: ${launched}`);
    }).catch(err => {
      console.error(err)
    });
  }

render(){
return <Button marginTop={10} onPress={() => this.openCustomizedCustomTabs()}>
                      Custom Tab
                        </Button> 
}

and run app.

Answer 2

function renderNode(node, index, siblings, parent, defaultRenderer) {
  if (node.name == 'iframe') {
    const a = node.attribs;
    const iframeHtml = `<iframe src="${a.src}"></iframe>`;
    return (
      <View key={index} style={{width: Number(a.width), height: Number(a.height)}}>
        <WebView source={{html: iframeHtml}} />
      </View>
    );
  }
}



class Page extends React.Component {
  render() {
   const htmlContent = `
     <div>
       <iframe src={this.props.utl} width="360" height="300" />
     </div>

    return (
      <HTMLView value={htmlContent} renderNode={renderNode} />
    );
  }
}

then use it like:

<Page url="the url here..." />

Answer 3

React Native WebView Component has been Added in new Release to Documentation . https://facebook.github.io/react-native/docs/webview.html

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

class MyWeb extends Component {
  render() {
    return (
      <WebView
        source={{uri: 'https://github.com/facebook/react-native'}}
        style={{marginTop: 20}}
      />
    );
  }
}