> For the complete documentation index, see [llms.txt](https://twins-bamboo.gitbook.io/react-native-note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://twins-bamboo.gitbook.io/react-native-note/other/using-webview-as-full-wrapper-in-rn.md).

# 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