Skip to content

Instantly share code, notes, and snippets.

@joshjhargreaves
Last active July 27, 2018 16:03
Show Gist options
  • Save joshjhargreaves/c9d51b8cf137b351975cf494503287dc to your computer and use it in GitHub Desktop.
Save joshjhargreaves/c9d51b8cf137b351975cf494503287dc to your computer and use it in GitHub Desktop.
Use lazy requires for screens for React Navigation
//Navigator
const SettingsScreen = createLazyComponent(
() => require('../containers/component').default
);
// ...
const MainStackNavigator = StackNavigator(
{
SettingsScreen: {
screen: SettingsScreen,
//LazyComponent.js
export default function createLazyComponent<Props>(
getClass: () => React.ComponentType<Props>
) {
return class extends React.PureComponent<Props> {
lazyComponentClass: ?React.ComponentType<Props> = getClass();
render() {
const LazyComponent = this.lazyComponentClass;
if (LazyComponent == null) {
return null;
}
return (
<LazyComponent {...this.props} />
);
}
};
}
@sibelius
Copy link

can't u use React.Node for children type?

@joshjhargreaves
Copy link
Author

I think actually unless you need to do something specific with the children, children can be passed implicitly with the prop spread. So no issues with Flow typing.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment