Preload nested stack in react-navigation 5.x tab

user_436014 0
Viewed 1044

I have a simple React Native app with 4 tabs like so (simplified for sake of brevity):

<Tab.Navigator>
  <Tab.Screen name="Feed" component={WebViewNavigator} initialParams={{...}} />
  <Tab.Screen name="Schedule" component={WebViewNavigator} initialParams={{...}} />
  <Tab.Screen name="About" component={WebViewNavigator} initialParams={{...}} />
  <Tab.Screen name="Help" component={WebViewNavigator} initialParams={{...}} />
</Tab.Navigator>

The WebViewNavigator component is a stack view using a React Native Webview to load some corresponding web content, however, it does not load until the corresponding tab is activated:

<Stack.Navigator>
  <Stack.Screen name="Viewer" component={WebViewScreen} />
</Stack.Navigator>

Is there a way to have the app load all tabs/webviews on load so there isn't this webview loading delay on each tab?

I am using the lazy prop of createBottomTabNavigator which doesn't seem to have any effect:

<Tab.Navigator lazy={false}> ...

Triggering a log in the WebView constructor reveals that the stack navigator is instantiated, but the webview is not loaded.

react-navigation react-native
2 Answers

The problem seems to appear in IOS only, Android works fine.

Someone 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",

Run cd ios && pod install

user_12833450

with <Tab.Navigator lazy={false}> you also need to install webview from patched PR

"react-native-webview": "git://github.com/NeilChan/react-native-webview#ab9df38fec002aa7f459498d3d53adb47b3f1f9c",

then run yarn/npm install and cd ios && pod install

user_80798680
Related