Current approach and Answer

1. Create a Webview file and an injection file.
2. Utilize the injection file to contain all web typings and functionality. This functionality is formatted in javascript (not stringified)
3. Create an initializer that converts all functionality into a string version of the functionality. The initializer should always return string.

Example

Browser.injectableJavascript.ts

const registerPressHandler = () => {
 const imgNodes = document.getElementsByTagName('img')
 const linkNodes = document.getElementsByTagName('a')

 // add callbacks etc...
}

// re-registers events whenever the document re-renders nodes...
const createObservers = () => {
  const observer = new MutationObserver(mutations => {
    mutations.forEach(mutation => {
      // handle cases here...and rebind events to new nodes
      registerPressHandler()
    })
  })

  observer.observe(document.body, {
    childList: true,
    subtree: true,
  })
}

export const browserInjection = `
  ${registerPressHandler.toString()};
  // initialize web click handler
  registerPressHandler()

  ${createObservers.toString()};
  createObservers();
`

Browser.tsx

import React from 'react'
import Webview from 'react-native-webview'
import { browserInjection } from './Browser.injections'

const Browser = () => {
  return <Webview injectedJavascript={browserInjection} />
}

export default Browser

Other ideas:

• Leverage a bundler to compile a stringified version of a javascript file. (cons: it's more processing power and not as fast as the first approach)(pros: way more browser compatibility but most polyifills won't be needed since this is only targeting android and iOS webviews...might be useful for older devices on lower webview specs...)
• Use a bunch of template literals. (cons: this can get messy and is very similar to using pure strings. No type completions)