Make shared component with calling navigation.navigate() inside - React Native

Question

I want to make shared component for all screen in react native. So I can share them between main components.

See my code below, everything works but the this.props.navigation.navigation.navigate('HireJob') not working.

MyCode :

export default class MyComponent extends Component {

    callAndPush = () =>{
      console.log('callAndPush');
      this.props.navigation.navigate('HireJob')
    }

    render() {
         return (
              <TouchableHighlight style = {{backgroundColor : 'red' , height : 30}} onPress = {() => this.callAndPush()}>
                <Text>Apple</Text>
              </TouchableHighlight>
         );
    }
}

Use of Component :

 render(){
    return (
      <View style = {styles.scrollSty}>
            <MyComponent></MyComponent>
     </View>
    );
 }
}

Answer 1

it works like this, bypassing navigation prop into MyComponent.

<MyComponent {...this.props} />