How to do lazy loading in react native with router flux for better performance?

Question

For better app performance I've found that lazy loading can be a better solution.I've found this doc .I've tried this but this won't work with router-flux. I don't know how to implement this with react-native router-flux.Also I'm not sure whether it can be done or not.If there any method to do lazy loading please help me.Following is the portion of main root file

root.js

import DrawerItems from './component/drawerItems';
import DashBoard from './pages/dashBoard';
import Profile from './pages/profile';
import AnswerInner from './pages/answer_inner';

....

 <Router>
                <Scene
                    key="root"
                    hideNavBar={true}
                >

                    <Scene
                        drawer={true}
                        hideNavBar={true}
                        contentComponent={DrawerItems}
                    >
                        <Scene key="inDrawer">
                            <Scene
                                key="spalshPage"
                                hideNavBar={true}
                                component={SplashPage}
                            />

                            <Scene
                                key="dashBoard"
                                hideNavBar={true}
                                component={DashBoard}

                            />

                            <Scene
                                key="profile"
                                hideNavBar={true}
                                component={Profile}
                            />
                           </Scene>
                         </Scene>
                        </Scene>
                       </Router>

Is it is possible to do lazy loading in every screen?I don't know the actual working behind lazy loading.Please help me to find a solution.Thank you!

Answer 1

As per the Documentation :

Lazy loading is a great way to optimize your site not app (explained below), and it does that by splitting your code at logical breakpoints, and then loading it once the user has done something that requires, or will require, a new block of code.

Explaination :

Since in React-native a component or a Scene (in router-flux) only comes into role when user redirected to it. So you can say lazy loading is already implemetented in artictecture of the framework.

The Lazy loading actually loads a piece of code when its really required and this is what android & iOS default activity life cycle does. You need not to worry about the performance as both OS handles app lifecycle efficiently.

Moreover you can apply lazy-loading concept in several parts of your app like showing the textual data first and loading images in background in list view, or you can fire an api call only on a specific action, etc