Ram Bundles and Inline require
complete
Soumya Mishra
As part of new release of react-native, they released a performance boost feature where you can essentially "lazy-load" components and screens. This allows for inline requires and they have an experimental import support. Now, when we create navigator with React-Navigation we declare all the screens at the beginning. Is there a way we could use this lazy load feature in conjunction with react navigation screens?
Julian
Does this work better with React Navigation v5? i.e. since you pass screens as components now, does it make it easier to use inline requires?
satya164
complete
There's
getScreen
for 4.x (not possible to use when a screen is a navigator).In 5.x there is a
getComponent
prop which allows it for any component, regardless of whether it has a navigator in it.Kirill Zyusko
As a possible solution you can look at react-native-bundle-splitter (https://github.com/kirillzyusko/react-native-bundle-splitter). This library well integrated with almost all popular navigation libraries (not only react-navigation) and allows you to postpone a loading of specific routes.
Udbhav Goyal
Soumya Mishra Did you manage to solve this using getScreen as suggested by Brent ?
I am using getScreen inside createSwitchNavigator and still I see the js file being loaded at app startup
Soumya Mishra
Udbhav Goyal: I do use getScreen for loading certain screens.
But the js file still gets loaded. But i think this is how require works. At runtime it resolves all the require statement as it cannot be used for dynamic path loading.
But i need to check the difference between getScreen and screen property provided while creating navigator. I did not find time to test it. Will try to do it as soon as possible. Also, if you do find anything please do keep posted.
Udbhav Goyal
Soumya Mishra: Did you notice any improvement in app startup time after using getScreen method ? Did do you do any sort of bench marking ?
Soumya Mishra
Udbhav Goyal: there was no noticeable change by using getScreen. I am not using it to load all the screens. I am starting to use it for new screens that i add now. But enabling Ram bundles in general helped to reduce startup time a bit.
Daniel Dimitrov
Brent Vatne - what do you mean with "for navigator routes you can't use getScreen though" What do you call a "navigator route"?
Brent Vatne
a navigator route is a route which is a navigator
let Tabs = createBottomTabNavigator({
Home: HomeScreen,
Settings: SettingsScreen,
});
let Stack = createStackNavigator({
Tabs: Tabs,
Info: InfoScreen,
});
Tabs is a navigator route in the stack navigator
Brent Vatne
you can use
getScreen
like this:createXNavigator({
routeName: {
getScreen: () => require('./screens/MyScreen').default,
}
});
for navigator routes you can't use getScreen though
Soumya Mishra
Brent Vatne: I did find this earlier after digging into the code. But could not find documentation on it. It should be added to the documentation.
But having used it, I could not find the difference from screen property as
getScreen also gets loaded when the routes are defined on app startup.
Brent Vatne
Soumya Mishra: it doesn't get executed on startup, the screen js file loading can be deferred until its needed. i agree we need to document it
Soumya Mishra
Brent Vatne: I mean not at startup but as soon as the createXNavigator is called with the screens, the screens js file is loaded. The createXNavigator is called on the initial setup that is on the component that is registered with app registry.
Brent Vatne
Soumya Mishra: getScreen is supposed to only be called when the route is instantiated, if this isn't the case it should be fixed. can you investigate further and create an issue?