render-when-focused v1.0.0

render-when-focused

A decorator function that will suspend a react-navigation view while it's not visible, for example in a tab view or a stack navigator. Once the view becomes visible again, it gets re-rendered.

This is especially useful if you use redux which triggers a lot of re-renders.

Read the accompanying Medium post here.

Usage

import renderWhenFocused from 'render-when-focused';

export default renderWhenFocused(
    connect(mapStateToProps)(MyView)
);

Source

It's not magic. This is the full source code of the function:

const React = require('react');
const {withNavigationFocus} = require('react-navigation');
const hoistNonReactStatics = require('hoist-non-react-statics');

module.exports = function(Comp) {
	class Hoc extends React.Component {
		shouldComponentUpdate(nextProps) {
			return nextProps.isFocused;
		}
		render() {
			return React.createElement(Comp, this.props);
		}
	}
	return hoistNonReactStatics(withNavigationFocus(Hoc), Comp);
};

Author

Jonny Burger

License

MIT