There are several screens in my React Native application.
I am using React Native 0.56 and React Native Router Flux.
Is there a way for a screen to load all of its imports when the screen is actually needed, and not when the app is launched and bundle is parsed?
Because of this the initial load time of the app is increasing.
I came across RAM format in the React Native Performance Section. https://facebook.github.io/react-native/docs/next/performance.html#enable-the-ram-format
How can I reduce the number of modules in loadedModuleNames??
index.android.js
import { AppRegistry } from 'react-native';
import AppContainer from './src/';
const modules = require.getModules();
const moduleIds = Object.keys(modules);
const loadedModuleNames = moduleIds
.filter(moduleId => modules[moduleId].isInitialized)
.map(moduleId => modules[moduleId].verboseName);
const waitingModuleNames = moduleIds
.filter(moduleId => !modules[moduleId].isInitialized)
.map(moduleId => modules[moduleId].verboseName);
// make sure that the modules you expect to be waiting are actually waiting
console.log(
'loaded:',
loadedModuleNames.length,
'waiting:',
waitingModuleNames.length
);
// grab this text blob, and put it in a file named packager/modulePaths.js
console.log(`module.exports = ${JSON.stringify(loadedModuleNames.sort())};`);
AppRegistry.registerComponent('Roots', () => AppContainer);
navigation/index.js
/**
* App Navigation
*
*/
import React from 'react';
import { Actions, Scene, ActionConst, Stack } from 'react-native-router-flux';
// Consts and Libs
import { AppConfig } from '@constants/';
// Components
// Scenes
import Placeholder from '@components/general/placeholder/index';
import ExperiencesScenes from '@navigation/experiences';
import AuthScenes from '@navigation/auth';
import MediateScene from '@navigation/mediate';
import HomeScene from '@navigation/home';
import SearchScene from '@navigation/search';
import NoticesScene from '@navigation/notices';
// import ShortlistedMapScene from '@navigation/shortlisted_map';
import IntroScene from '@navigation/intro';
import AssistantScene from '@navigation/assistant';
import NotificationSettingsScene from '@navigation/notification_settings';
import HighlightScene from '@navigation/highlight';
import TransportScene from '@navigation/transport';
import HelpScene from '@navigation/help';
import FaqScene from '@navigation/faq';
import DynamicListScene from '@navigation/component_list';
import BrandCoverScene from '@navigation/brand_cover';
import ListingsScene from '@navigation/listings';
import ShorlistedScene from '@navigation/shortlisted_list';
import SettingsScene from '@navigation/settings';
import OnTheWayScene from '@navigation/on_the_way';
import ItinerariesScene from '@navigation/itineraries';
import TempScene from '@navigation/temp';
import TipsScene from '@navigation/tips';
import SimpleSwipe from '@navigation/simple_swipe';
import Cities from '@navigation/cities';
// import ReferralScene from '@navigation/referral';
/* Routes ==================================================================== */
export default Actions.create(
<Stack key={'root'}>
{MediateScene}
{IntroScene}
{HomeScene}
{AssistantScene}
{SearchScene}
{NoticesScene}
{ShorlistedScene}
{SettingsScene}
{ListingsScene}
{TipsScene}
{BrandCoverScene}
{AuthScenes}
{ExperiencesScenes}
{NotificationSettingsScene}
{HighlightScene}
{TransportScene}
{HelpScene}
{FaqScene}
{DynamicListScene}
{OnTheWayScene}
{ItinerariesScene}
{SimpleSwipe}
{Cities}
</Stack>
);
Navigation Code looks similar to this
import React from 'react';
import { Scene, ActionConst } from 'react-native-router-flux';
// Consts and Libs
import { AppConfig } from '@constants/';
import { AppStyles, AppSizes, AppColors } from '@theme/';
// Scenes
import BrandCoverScreen from '@screens/brand_cover/index';
const navbarPropsTabs = {
...AppConfig.navbarProps,
hideNavBar: true,
};
/* Routes ==================================================================== */
const scenes = (
<Scene
{...navbarPropsTabs}
key={"brand_cover"}
component={BrandCoverScreen} >
</Scene>
);
export default scenes;
