Getting undefined is not an object (evaluating 'props.navigation.addListener') - react-native

Question

I am trying to implement HOC for Backhandler. I have 3 component all are wrapped in createBottomTabNavigator, home is one of them. but before implementing backhandling ,HOC showing this error.
Component home-
import React, { Component } from 'react';
import {Text,View} from 'react-native';
import updateComponent from './HOC/updateComponent';
class home extends Component {
constructor(props) {
super(props);
}
render() {
return (
<View><Text> HOC</Text></View>
);
}
}
export default updateComponent(home);
HOC updateComponent
import React, { Component } from 'react';
const updateComponent = WrappedComponent => {
class NewComponent extends Component {
constructor(props) {
super(props);
}
render() {
return <WrappedComponent />;
}
}
return NewComponent;
};
export default updateComponent;

Answer 1

Your home component should be capitalized, from React docs:
When an element type starts with a lowercase letter, it refers to a
built-in component like or and results in a string 'div'
or 'span' passed to React.createElement. Types that start with a
capital letter like compile to React.createElement(Foo) and
correspond to a component defined or imported in your JavaScript file.
We recommend naming components with a capital letter. If you do have a
component that starts with a lowercase letter, assign it to a
capitalized variable before using it in JSX.
Another thing (not sure causing the error but you'll have bugs later on), is that you don't pass the props to the NewComponent, which means every time you will wrap a component with updateComponent you'll lose all the props.
Solution:
home -> Home.
return <WrappedComponent /> --> return <WrappedComponent {...this.props} />.