Improve the startup speed and initial memory consumption by lazy loading screens
Goal
Improve the startup speed and initial memory consumption by lazy loading screens.
The metro bundler has an inline require
that lazy loads the modules and a babel plugin that transforms the imports into inline requires when possible.
Seems like this babel module is not working or it is not transforming the imports for the screens.
What needs to be done
Use inline requires for the screens
import PhoneValidationScreen from '../onboarding/v2/steps/PhoneValidationScreen';
<RootStackNav.Screen
name="PhoneValidation"
component={PhoneValidationScreen}
/>
<RootStackNav.Screen
name="PhoneValidation"
getComponent={() =>
require('../onboarding/v2/steps/PhoneValidationScreen').default
}
/>
QA
TBD
UX/Design
none
Personas
UX improved reducing the app startup time
Experiments
none
Acceptance Criteria
-
App should lazy load the screens -
functionality should not be affected
Definition of Ready Checklist
-
Definition Of Done (DoD) -
Acceptance criteria -
Weighted -
QA -
UX/Design -
Personas -
Experiments
La