There are a few things you can try to prevent the WebView from rendering unnecessarily:
Use shouldComponentUpdate() or React.memo() to optimize rendering. This will prevent the component from re-rendering unless there are changes to its props or state.
Use the react-navigation-header-buttons module instead of the default drawer navigator provided by Expo. This way, the WebView won't be rerendered whenever the drawer is displayed.
Use the react-native-community/react-native-webview package instead of the default WebView component provided by Expo. This package has several performance improvements and should handle re-rendering more efficiently.
Use the browser only when it's necessary. Instead of rendering the WebView whenever the drawer is displayed or orientation is changed, delay the rendering until the user clicks on a link or performs an action that requires the browser. This will reduce the number of unnecessary re-renders of the WebView.
Use the onLayout prop of the View component to get the dimensions of the screen and adjust the WebView accordingly. This way, the WebView will always fit the screen, regardless of the orientation or size.
Asked: 2022-07-30 11:00:00 +0000
Seen: 13 times
Last updated: Mar 04 '23