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} />

Answer 2

Every component can be imported into other components, such as navigators. They import your scenes and navigate between them by sharing props.

To make a component and use it in different places simply create one:

export default class MyComponent extends React.Component {
    render() {
         return (
              <Text> This is a special component </Text>
         );
    }
}

And in your other classes use it like this:

import MyComponent from '../path/to/MyComponent';

class AnotherComponent extends React.Component {
    render() {
         return (
              <MyComponent />
         );
    }
}

Starting from React 0.14, you can create these easier using stateless components:

// A functional component using an ES2015 (ES6) arrow function:
const MyComponent = (props) => {
  return <Text> This is a special component </Text>
};

You can pass data using props if you like.