[React Native] Custom WebView Component Example

webview.js

// We use useImperativeHandle for having ability to call methods from parent component.
// We use onMessage method from WebView for triggering needed states from any web apps. 

import React, { forwardRef, useImperativeHandle, useRef, memo } from 'react'

import { WebView } from 'react-native-webview'

const WebViewLink = forwardRef(({ onMessage }, ref) => {
    const webviewRef = useRef()

    useImperativeHandle(ref, () => ({
        injectJavaScript (jsToInject) {
            setTimeout(() => {
                if (webviewRef && webviewRef.current) {
                    webviewRef.current.injectJavaScript(jsToInject)
                }
            }, 1000)
        }
    }))

    return (
        <WebView
            ref={webviewRef}
            source={{ uri: gameUrl }}
            useWebKit={true}
            originWhitelist={['*']}
            javaScriptEnabled={true}
            onMessage={(event) => onMessage(event)}
        />
    )
})

export default memo(WebViewLink)