In order to achieve the better performance we can get, we make inline requires.
We only load views we really need at startup.
Every other view needs to be loaded when needed.

Currently, we are using the exact same example of React Native docs, but this is causing unnecessary loads.

Example:
On RoomView, we import RoomActionsView if user taps top bar right button.
We have a variable to track if RoomActionsView is already registered here:

let RoomActionsView = null;

When right button is tapped, this happens:

navigationButtonPressed = ({ buttonId }) => {
	if (buttonId === 'more') {
		if (RoomActionsView == null) {
			RoomActionsView = require('../RoomActionsView').default;
			Navigation.registerComponentWithRedux('RoomActionsView', () => gestureHandlerRootHOC(RoomActionsView), Provider, store);
		}

		Navigation.push(componentId, {
			component: {
				id: 'RoomActionsView',
				name: 'RoomActionsView',
				passProps: {
					rid
				}
			}
		});
	}
}

The entire RoomActionsView file wasn't loaded until then.
It works, but what if user leaves the room, enter again and presses right icon?
RoomActionsView variable is empty and the logic is registered on Navigation twice.

We need to have a singleton class in charge of keeping track of which views are loaded or not.