Navigate to different screen from a button in a header

[KakarN]

I have the navigation as follows:

StackNavigator:
- TabNavigator, // HomeNavigation
- TabNavigator // NotificationNavigation

const MainNavigation = StackNavigator({
    Home: {
        screen: HomeNavigation,
    },
    Notification: {
        screen: NotificationNavigation,
    }
});

const HomeNavigation = TabNavigator({
    AllPost: {
        screen: All,
    },
    ArticlePost: {
        screen: Article,
    },
    BusinessPost: {
        screen: Job,
    },
});

HomeNavigation.navigationOptions = {
    title: 'Home',
    header: {
        right: <SearchNotification/>
    },
};

class SearchNotification extends React.Component {
    goToNotification = () => {
        this.props.navigate('Notification');
    };
    
    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity>
                    <Icon name="md-search" style={styles.Icon}/>
                </TouchableOpacity>
                <TouchableOpacity style={styles.notificationWrapper} onPress={this.goToNotification}>
                    <Icon name="md-notifications" style={styles.Icon}/>
                    <Text style={styles.number}>3</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

const NotificationNavigation = TabNavigator({
    Comment: {
        screen: NotificationComment,
    },
    Follow: {
        screen: NotificationFollow,
    }
});

HomeNavigation has a header, and the header has a right component of SearchNtofication. SearchNotification has an icon which on press I would like to go to the NotificatoinNavigation.

However, if I make changes to the header of HomeNavigation to this way, the SearchNotification is not not displayed in the header.

HomeNavigation.navigationOptions = {
    title: 'Home',
    header: {
        tintColor: 'white',
        style: {
            backgroundColor: '#2ec76e',
        },
        right: ({navigate}) => <SearchNotification navigate={navigate}/>
    },
};

How can I navigate to different screen from a button in a header?

[sigmazen]

Hi @KakarN
I got something similar working by putting the icon directly in the navigationOptions. It might not quite match up to what you're looking for though. The odd thing is the icon continues to show the first time I hit the NavigationComment view but then after flicking tabs, goingBack etc it all works nicely.
BTW, the icon being used for this example is the react-native-vector-icons/Ionicons
Cheers

HomeNavigation.navigationOptions = {
    title: 'Home',
    header: ({ navigate }) => ({
          right: (    
            <TouchableOpacity onPress={() => {navigate('Notification')} } >
              <Ionicons name={'ios-notifications-outline'} size={26} />
            </TouchableOpacity>
          ),
    }),
};

[KakarN]

Thank you @sigmazen
So the problem was (I think), inside the navigationOptions instead of using navigations I had to use navigate, and pass it as a props to the child (i.e. the SearchNotification).

So the final code looks like this:

HomeNavigation.navigationOptions = {
    title: 'Home',
    header: ({navigate}) => ({
        right: (
            <SearchNotification navigate={navigate}/>
        ),
    }),
};

And within the SearchNotification component:

export default class SearchNotification extends React.Component {
    goToNotification = () => {
        this.props.navigate('Notification');
    };

    render() {
        return (
            <View style={styles.container}>
                <TouchableOpacity>
                    <Icon name="md-search" style={styles.Icon}/>
                </TouchableOpacity>
                <TouchableOpacity style={styles.notificationWrapper}
                                  onPress={() => this.props.navigate('Notification')}>
                    <Icon name="md-notifications" style={styles.Icon}/>
                    <Text style={styles.number}>3</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

[sclanc]

Hey @sigmazen and @KakarN,

I stumbled into the same problem and tried to implement the solution that you suggested but got the following error

Objects are not valid as React child (found: object with keys{right}). If you meant to render a collection of children, use an array instead.

If you could help me out it would be much appreciated.

the offending components:

class Bookings extends Component {
   state = {
     BookingsList: [],
   }
   static navigationOptions = {
     title: 'Bookings',
     headerStyle: {
       backgroundColor: '#49E841'
    },
    header:({ navigate }) => ({
      Right: (
       <HomeButton navigate={navigate}/>
       ),
     }),
   }
//...More stuff that's not relevant
}

class HomeButton extends Component {
  render() {
  console.log(this.props)
  return (
  <TouchableHighlight
    onPress={() => this.props.navigate('Home')}
  >
    <View>
      <Image
         source={require('./Assets/home.png')}
      />
   </View>
  </TouchableHighlight>
  )}
};

const RallyMobileNavigator = StackNavigator({
  Home: { screen: RallyMobile },
  LogIn: { screen: LogIn },
  Bookings: { screen: Bookings},
  Menu: { screen: Menu },
  },{
   initialRouteName: 'Home',
   headerMode: 'screen'
  });

[leonardoballand]

According to documentation we need to pass prop to headerRight component using method instead of object.

[sclanc]

Could you clarify?

[ShubhamBabhulkar]

onPress={() => navigate('Detailed')}
where Detailed = Navigate page name

[ShubhamBabhulkar]

<Button transparent onPress={() => navigate('Main')}>
<Image source={require('Enter your path here')}/>

[stevenschmatz]

This is what you're looking for @sclanc:

static navigationOptions = {
  headerRight: <Button title="Info" />,
  ...

[shruti8597]

You can try this code @sclanc

static navigationOptions =({navigation})=> ({
        headerRight:(
             <TouchableOpacity onPress={() => navigation.navigate('ScreenName')}>
                <Text>Add</Text>
            </TouchableOpacity>
      )
});

[Digant312]

I also have the same problem @shruti8597 ,

static navigationOptions = ({ navigation }) => ({
        title: 'Review Jobs',
        headerRight: (
            <Button 
                title='Setting' 
                onPress={ () => navigation.navigate('settings') }                
                backgroundColor= "rgba(0,0,0,0)"
                color="rgba(0,122,255,1)"
            />
        ), 
        style: {
            marginTop: Platform.OS === 'android' ? 24 : 0 
        },
        tabBarIcon: ({ tintColor}) => {
            return <Icon name = "favorite" size={26} color={tintColor} />;
        } 
    });

can you please help me?

[nathan815]

@Digant312 Try this instead:

static navigationOptions = ({ navigation }) => {
        return {
            title: 'Review Jobs',
            headerRight: (
                <Button 
                    title='Setting' 
                    onPress={ () => navigation.navigate('settings') }                
                    backgroundColor= "rgba(0,0,0,0)"
                    color="rgba(0,122,255,1)"
                />
            ), 
            style: {
                marginTop: Platform.OS === 'android' ? 24 : 0 
            },
            tabBarIcon: ({ tintColor}) => {
                return <Icon name = "favorite" size={26} color={tintColor} />;
            } 
        }
};

[lucas-dolsan]

@nathan815 Thanks man, worked like a charm