react-native-webview ONLY starts loading when on active tab in react-navigation tabNavigator

Question

I'm using a bottomTabNavigator with lazy set to false. For the screen I render a react-native-webview. The render function is being called because I can see the console.log but the actual webview does not start loading till the tab becomes active. The tab I start on starts loading immediately.

Tab

const Tab = () => { 
    console.log('render') // this is being called right away

    return (<WebView 
             onLoadStart={() => console.log('on load start') // this is being called only when tab becomes active (clicking on it) }
             source={{uri:'linkgoes.here'}} />) 
}

Navigator

  const TabNavigator = createBottomTabNavigator(
  {
    TabOne: {
      screen: Tab
    },
    TabTwo: {
      screen: Tab
    }
  },
  {
    initialRouteName: 'TabOne',
    lazy: false,
  }
)

This happened after upgrading react-navigation from 1.x to 3.x and upgrading react-native and react-native-webview. I want the webview to start loading immediately, not just when visible.

Answer 1

Having the same issue, I looked a bit more into this:

The problem does not appear on Android, so it comes from the iOS implementation

Looking at the native code of react-native-webview, it appears that the webview is being loaded in the didMoveToWindow method, with a check on the window property being non nil, which results in a webview loaded only when displayed.

I don't think this could be resolved using react-native, so I proposed a PR in the react-native-webview package solving this particular issue: https://github.com/react-native-community/react-native-webview/pull/813

To use it before it's merged, use in your package.json:

"react-native-webview": "https://github.com/philippeauriach/react-native-webview#8b7015037d9c1329e4e65e1978e98c4897a928e6",

Don't forget to run cd ios && pod install, it is sometimes needed.