React native lazy screens

React native 0.64 by default has "inline requires" enabled. We can now easily squeeze some milliseconds out of the app startup time. Here are a couple of examples of how to do it with React Navigation.

If some navigation paths are behind feature flags, you can import them conditionally at the navigator level, skipping potentially unused code to be loaded on startup while preventing users' access to unreleased features.

	const RootStack = (): JSX.Element => {
	return (
	<Stack.Navigator initialRouteName={initialRouteName}>
	<Stack.Screen
	name="SomeScreen"
	component={SomeScreen}
	options={{title: 'Screen 1'}}
	/>
	{SOME_FEATURE_ENABLED && (
	<Stack.Screen
	name="ScreenWhichMayNotBeInUse"
	component={require('../screens/ScreenWhichMayNotBeInUse').default}
	options={{title: 'Screen 2'}}
	/>
	)}
	</Stack.Navigator>
	);
	};

view raw navigator.tsx hosted with ❤ by GitHub

You can also create lazy loading screens that will require the actual implementation only when it has received a navigation event.

	const RootStack = (): JSX.Element => {
	return (
	<Stack.Navigator initialRouteName={initialRouteName}>
	<Stack.Screen
	name="SomeScreenWithLazyWrapper"
	component={ScreenWrapper}
	options={{title: 'Screen 1'}}
	/>
	<Stack.Screen
	name="SomeScreenWithGetComponent"
	getComponent={() => require('./ScreenImplementation').default}
	options={{title: 'Screen 1'}}
	/>
	</Stack.Navigator>
	);
	};
	export const ScreenWrapper = (props: ScreenProps): JSX.Element => {
	// eslint-disable-next-line @typescript-eslint/no-var-requires
	const ScreenImplementation = require('./ScreenImplementation.tsx').default;
	return <ScreenImplementation {...props} />;
	};

view raw LazyScreenExample.tsx hosted with ❤ by GitHub