React Native multiple use of component defined in a parent class

Question

Below is the code for a Header which I've defined in a common.js file:

class HeaderStyle extends Component {
    render() {
        return (
            <Header style={{ elevation: 5 }}>
                <Left style={{ flex: 1 }}>
                    <Icon name="md-menu" size={30} onPress={() => this.props.navigation.openDrawer()} />
                </Left>
                <Body style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                    <Image style={{ width: 80, height: 45, }} source={require('./resources/hr-pro-logo.png')} />
                </Body>
                <Right style={{ flex: 1 }}>
                    <Icon name="md-search" size={30} onPress={() => alert('hi there')} />
                </Right>
            </Header>
        );
    }
}

And here is the code for my DashboardScreen.js:

export default class DashboardScreen extends Component {
    render() {
        return (
            <View style={{ flex: 1 }}>
                <HeaderStyle /> // This is where I'm using the Header imported from common.js
                <View>
                    <FlatList
                        // Code to populate my list
                    />
                </View>
            </View>
        );
    }

I've been able to import the Header in my Dashboard, but when I click on the menu icon onPress={() => this.props.navigation.openDrawer()} it throws the error undefined is not an object (evaluating '_this.props.navigation.openDrawer')

Appreciate it if anyone can assist me with this issue, I'd like to be able to open the drawer on clicking the menu icon.

FYI - When I used the Header code directly in my Dashboard, the app ran smoothly with no errors. But since there are multiple screens where I want to use the Header, I need to keep it in a common place to avoid repetition of coding.

You're not passing any prop to the child. Try passing navigation <HeaderStyle navigation={this.props.navigation}/> — Milore
– Milore, Commented Feb 27, 2019 at 8:49

Poptocrack · Accepted Answer · 2019-02-27 08:50:09Z

2

You must pass the navigation prop to your component:

<HeaderStyle navgation={this.props.navigation} />

Or, you could use the withNavigation function from react-navigation:

import React from 'react';
import { Button } from 'react-native';
import { withNavigation } from 'react-navigation';

class MyBackButton extends React.Component {
  render() {
    return (
    //you Header render
    );
  }
}

// withNavigation returns a component that wraps MyBackButton and passes in the
// navigation prop
export default withNavigation(MyBackButton);

The documentation is here

answered Feb 27, 2019 at 8:50

Poptocrack

3,0281 gold badge15 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abd Maj Over a year ago

Passing the navigation prop to the component worked like a charm. I have to figure out how to implement withNavigation though, because I intend to place many common components in my common.js and then export most of them together at once wherever they are needed.

Collectives™ on Stack Overflow

React Native multiple use of component defined in a parent class

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related