Using Webview as full wrapper in RN

Notice

• iOS

  • Open new tab. All opening new tabs need to be handled.

  • No go back button

• iframe in iframe

• callback function (communicate between iframe and RN APP)

• Splash Screen

• theme

Go Back

swipe right to goBack, iOS and android different method to handle

Android

import { useEffect } from 'react'
import { Platform, BackHandler } from 'react-native'

const useGoBack = webviewRef => {
  useEffect(() => {
    if (Platform.OS === 'android') {
      BackHandler.addEventListener('hardwareBackPress', handleBackPressed)

      return () => {
        BackHandler.removeEventListener('hardwareBackPress', handleBackPressed)
      }
    }
  }, [])

  const handleBackPressed = () => {
    webviewRef.current?.goBack()
    return true
  }
}

export default useGoBack

iOS

import WebView from 'react-native-webview'
...
...
  const webviewRef = useRef()
  useGoBack(webviewRef)
...
      <WebView
        ref={webviewRef}
        source={{ uri: 'http://localhost:3000/' }}
        onMessage={onMessage}
        allowsBackForwardNavigationGestures
        style={{ marginTop: Constants.statusBarHeight }}
      />
...

2022.06.12