How to Load <Script> in React Native view

Question

I hope you are all having a good time. I am working on my first react-native application. I have a script tag from client which loads a request a song service. I have tried different libraries

react-native-htmlview
react-native-render-html
react-native-render-webview

but I still can not figure out how to load this script in react native. I am new to react native so if I am missing anything obvious or simple please point it out for me. Thank you in advance.

<script src="https://embed.radio.co/request/w91ece69.js"></script>

Here is how it working in web.

AliRehman7141 · Accepted Answer · 2021-10-12 07:09:59Z

3

I was trying to load the crypto compare widget and for this, I tried a lot of things finally I got a solution here you need import { WebView } from 'react-native-webview';

and here is my code and it works for me

<WebView
    source={{
        html: `<!DOCTYPE html>
            <html>

            <head>
                <title>Font Awesome Icons</title>
                <meta name="viewport" content="width=device-width, initial-scale=1">
                <link rel="stylesheet"
                    href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
            </head>

            <body>

                <script type="text/javascript">
                    baseUrl = "https://widgets.cryptocompare.com/";
                    var scripts = document.getElementsByTagName("script");
                    var embedder = scripts[scripts.length - 1];
                    (function () {
                        var appName = encodeURIComponent(window.location.hostname);
                        if (appName == "") { appName = "local"; }
                        var s = document.createElement("script");
                        s.type = "text/javascript";
                        s.async = true;
                        var theUrl = baseUrl + 'serve/v1/coin/chart?fsym=BTC&tsym=USD';
                        s.src = theUrl + (theUrl.indexOf("?") >= 0 ? "&" : "?") + "app=" + appName;
                        embedder.parentNode.appendChild(s);
                    })();
                </script>


            </body>

            </html>`
    }}
/>

here is output

answered Oct 12, 2021 at 7:09

AliRehman7141

1,0133 gold badges16 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kimi Raikkonen 9790 Over a year ago

Doesn't work for expo

AliRehman7141 Over a year ago

I haven't tried it with expo but it works for react-native.

Lorenzo Castillo Over a year ago

Incredible, I was just missing the <!DOCTYPE html>.

Gabriel Mangiurea · Accepted Answer · 2020-03-28 23:23:17Z

1

There are three steps to achieve what you want:

1) Import the react-native-webview package (or any React Native compatible library, but my example will be based on that one)

2) Create a simple HTML document that contains the JavaScript radio script (like the one in the picture)

3) Render the <WebView /> component with the URI source pointing to the HTML document

// [...]
import { WebView } from 'react-native-webview';

// In the render function
render() {
    return <WebView source={{ uri: '<the path to the HTML document>' }} />
}

You can find more details about react-native-webview on the project Github page.

answered Mar 28, 2020 at 23:23

Gabriel Mangiurea

962 bronze badges

1 Comment

Muhammad Ehtesham Anwar Over a year ago

I tried all of the available libraries, even with your solution but in vein. The thing is that no library loads ".js" file.

Collectives™ on Stack Overflow

How to Load <Script> in React Native view

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related