CODEWITHSUNDEEP
javascriptreact-nativewebview
syk1k
syk1k

Reputation: 21

How to call a local file as the source for Webview in react native

I want to display the content of my 'html file' in the webview

import HTML_FILE from '../screens/imagecropper.html';

<WebView
     originWhitelist={['*']}
     source={HTML_FILE}
     javaScriptEnabled={true}
/>

Here is the html code

<!DOCTYPE html>
<html>
<head>
    <title>Moodle</title>
</head>
<body>
    <link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css">
    <script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
    <h1>Homepage Headline</h1>
    <p>This is a paragraph.</p>
</body>
</html>

The expected result is Homepage Headline

This is a paragraph.

But is just read the content and display the code

<!DOCTYPE html>
<html>
<head>
    <title>Moodle</title>
</head>
<body>
    <link rel="stylesheet" href="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.css">
    <script src="https://uicdn.toast.com/tui-image-editor/latest/tui-image-editor.js"></script>
    <h1>Homepage Headline</h1>
    <p>This is a paragraph.</p>
</body>
</html>

Upvotes: 0

Views: 607

Answers (1)

Tanveerbyn
Tanveerbyn

Reputation: 784

You can do this in this way

  • for android : paste your html file in assets folder than you can get it by this way

    source={{uri:'file:///android_asset/webpage.html'}}

  • for iOS make a folder in iOS and add files in it. and get it like that

    source={{uri:'./htmls/webpage.html'}}

Upvotes: 1

Related Questions