React native offline screen wrapper example

connectivityAwareActivityWrapper.js

export default function connectionAwareActivity(WrappedComponent) {
	return class extends PureComponent {
		constructor(props) {
			super(props);
			this.state = { isConnected: false };
			this.switchConnectivity = this.switchConnectivity.bind(this);
		}
		static navigationOptions = WrappedComponent.navigationOptions
		componentDidMount() {
			NetInfo.addEventListener('connectionChange', this.switchConnectivity);
			NetInfo.isConnected.fetch().then(isConnected => {
				this.setState({ isConnected });
			});
		}
		componentWillUnmount(){
			NetInfo.removeEventListener('connectionChange', this.switchConnectivity);
		}
		switchConnectivity(type) {
			if(type === 'none'){
				this.setState({isConnected: false})
			}
			else{
				this.setState({isConnected: true})
			}
		}
		render() {
			return this.state.isConnected ? (
				<WrappedComponent {...this.props} />
			) : (
				<OfflineScreen/>
			);
		}
	};
}

@tejashwikalptaru yes it is, should use getConnectionInfo instead, but both API's return promise or take callback, this is just example code to represent the problem.
I've already tried componentWillMount but placing console.log('render was called') in render function still logs twice on screen navigation.