Widget for React Native with WebView

This example shows how to integrate the Pingstreams Widget via a WebView for React Native Expo or React Native CLI project

Prerequisites

Make sure you have installed react-native-webview via Expo command:

npx expo install react-native-webview

Consider an *.html file into assets that contains basic html code with script tag able to integrate pingstreams widget inside your webview

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <script type="application/javascript">
        window.pingstreamsSettings=
        {
            projectid: "<CHANGE_IT>",
            fullscreenMode: true,
            open:true,
        };
        (function(d, s, id) {
            var w=window; var d=document; var i=function(){i.c(arguments);};
            i.q=[]; i.c=function(args){i.q.push(args);}; w.Pingstreams=i;
            var js, fjs=d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js=d.createElement(s);
            js.id=id; js.async=true; js.src="https://widget.pingstreams.com/v6/launch.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document,'script','pingstreams-jssdk'));
        
        window.addEventListener('load', (event)=> {
            document.dispatchEvent(new Event('mousemove'))
        })
    </script>
</head>
</html>

Add a webview to the file and set the source as the url of the local html file

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

const WebViewScreen = () => {
  return (
    <View style={styles.container}>
      <WebView
        originWhitelist={['*']}
        source={require('../../assets/widget.html')}
        style={{ flex: 1 }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default WebViewScreen;

Add a webview to the file and set the source as html code

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

const WebViewScreen = () => {
  const htmlContent = `
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
        <script type="application/javascript">
            window.pingstreamsSettings=
            {
                projectid: "<CHANGE_IT>",
                fullscreenMode: true,
                open:true,
            };
            (function(d, s, id) {
                var w=window; var d=document; var i=function(){i.c(arguments);};
                i.q=[]; i.c=function(args){i.q.push(args);}; w.Pingstreams=i;
                var js, fjs=d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js=d.createElement(s);
                js.id=id; js.async=true; js.src="https://widget.pingstreams.com/v6/launch.js";
                fjs.parentNode.insertBefore(js, fjs);
            }(document,'script','pingstreams-jssdk'));
            
            window.addEventListener('load', (event)=> {
                document.dispatchEvent(new Event('mousemove'))
            })
        </script>
    </head>
    <body>
    </body>
    </html>
  `;

  return (
    <View style={styles.container}>
      <WebView
        originWhitelist={['*']}
        source={{ html: htmlContent }}
        style={{ flex: 1 }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

export default WebViewScreen;

Prerequisites

Make sure you have installed react-native-webview via npm command:

npm install react-native-webview

Implementation

Consider an *.html file into assets that contains basic html code with script tag able to integrate pingstreams widget inside your webview ex. “widget.html”

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <script type="application/javascript">
        window.pingstreamsSettings=
        {
            projectid: "<CHANGE_IT>",
            fullscreenMode: true,
            open:true,
        };
        (function(d, s, id) {
            var w=window; var d=document; var i=function(){i.c(arguments);};
            i.q=[]; i.c=function(args){i.q.push(args);}; w.Pingstreams=i;
            var js, fjs=d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js=d.createElement(s);
            js.id=id; js.async=true; js.src="https://widget.pingstreams.com/v6/launch.js";
            fjs.parentNode.insertBefore(js, fjs);
        }(document,'script','pingstreams-jssdk'));
        
        window.addEventListener('load', (event)=> {
            document.dispatchEvent(new Event('mousemove'))
        })
    </script>
</head>
</html>

Add the widget.html file to the correct project directory.

For Android: Place the file in android/app/src/main/assets/.
For iOS: Place the file in ios/<AppName>/widget.html.

If the assets folder does not exist (on Android), you can create it manually.

Add webview to App.tsx

import React from 'react';
import { SafeAreaView, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';
import { Platform } from 'react-native';

const App = () => {
  const localFile = Platform.OS === 'ios' ? require('./widget.html') : 'file:///android_asset/widget.html';

  return (
    <SafeAreaView style={styles.container}>
      <WebView
        originWhitelist={['*']}
        source={Platform.OS === 'ios' ? localFile : { uri: localFile }}
        style={styles.webview}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  webview: {
    flex: 1,
  },
});

export default App;

Example

You can find here a complete Pingstreams Widget example for React Native EXPO project example or Pingstreams Widget example for React Native CLI project example

Widget for React Native with WebView

Integrate Widget for React Native Expo project with WebView

Prerequisites

Method 1: Load Pingstreams widget from embedding url

Method 2: Load Pingstreams widget from embedding script

Integrate Widget for React Native CLI project with WebView

Prerequisites

Implementation

Add webview to App.tsx

Example