Create WebView in react-native expo

Wanted:

I want to display http://a2fahmi.com in a webview like image below:

Question:

How to do it … ?

Answer:

We will make two step:

  • Create web_fahmi filename
  • Modify App.js

Create web_fahmi

Create web_fahmi.js filename under views folder and insert this code:

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

class WebFahmi extends Component {
  render() {
    return (
      <WebView
        source={{ uri: 'http://a2fahmi.com' }}
        style={{ marginTop: 20 }}
      />
    );
  }
}
export default WebFahmi;

Explain:

source is webview props that used to load static HTML or URI

Modify App.js

Open App.js file and modify like this code below:

import React from 'react';
import WebFahmi  from './views/web_fahmi';

const App = () => {
   return (
    <WebFahmi />
   )
}

export default App;

Explain:

import WebFahmi from ‘./views/web_fahmi’, this code mean that i import WebFahmi Class from web_fahmi.js file

Thanks For Reading

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *