React Native custom header component navigation

Question

I'm using react-navigation and trying to implement a custom header will be visible on every page. tried to follow the example in this link and it's all good. My header is displayed, but now i'm trying to navigate back to the home screen using the HOME link in the header navigation is not happening.

React Native: React Navigation - use the same header component in every screen?

When debugging my header component i can clearly see the navigation prop but not sure why it's not navigating. My code is below. any help appreciated.

Creating stack navigator

const AppNavigator = createStackNavigator({
 Home: {
  screen: MeetingList,    

 },
 MeetingDisplay: {
  screen: MeetingDisplay
 }
 },{
   initialRouteName: "Home",
   defaultNavigationOptions: ({ navigation }) => {
       return MyHeader(navigation)
   }  
 });

Custom header component

const MyHeader = (navigation) => {
   return {
       header: props => <Header navigation= {navigation} />,
       headerStyle: { backgroundColor: '#000' },
       headerTintColor: '#000',
   };
 }

My header component

import React from 'react';
import { Text, View, } from 'react-native';

class Header extends React.Component {
    constructor(props) {
       super(props);
       /  /this.params = props.navigation.state.params;
       this.state = {

       }        
     }

render() {
    const { navigation } = this.props;
    return (
        <>
            <View>
                <Text onPress={()=> navigation.navigate('MeetingList')}>HOME</Text>
            </View>
        </>
    )
   }
}

 export default Header;

Goskula Jayachandra Goskula Jayachandra · Accepted Answer · 2020-04-08T14:19:22

change

 onPress={()=> navigation.navigate('MeetingList')}

to

onPress={()=> navigation.navigate('Home')}

what you are doing wrong is, you are passing screen name, you should pass the name of the route with which you are defining screen.

Hope this helps!

React Native custom header component navigation

1 Answers