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>
    );
 }
}

@Eden Want to Add one Common in all View. So that I will create one parents class for view. — Kirit Modi, Aug 08 '17 at 09:37

score 3 · Accepted Answer · answered Aug 09 '17 at 03:21

3

it works like this, bypassing navigation prop into MyComponent.

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

answered Aug 09 '17 at 03:21

Val

21,938
10
68
86

eden · Answer 2 · 2017-08-09T07:31:01.760

1

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.

edited Aug 09 '17 at 07:31

answered Aug 08 '17 at 10:47

eden

5,876
2
28
43

Yes, I will added TouchableHighlight in MyComponent. and want to push another controller it give error. undefine is not an object. this2.props.navihation.navigate – Kirit Modi Aug 08 '17 at 11:07
Pass the function as a prop. I will update my answer tonighy – eden Aug 08 '17 at 11:21
Now updated code. in MyComponent have one function callAndPush and working fine but issue to push with stack navigation. – Kirit Modi Aug 08 '17 at 11:29
This is a different question. I have already explained for the first version. Mark it if this solved your problem at the first place – eden Aug 08 '17 at 18:45

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

2 Answers2