CODEWITHSUNDEEP
reactjsreact-nativeheaderreact-navigation
pinman
pinman

Reputation: 153

React Native custom header component navigation

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;

Upvotes: 0

Views: 5034

Answers (1)

Goskula Jayachandra
Goskula Jayachandra

Reputation: 4201

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!

Upvotes: 1

Related Questions