Header icon navigation not working on react navigation (React Native)

Question

My React Native application consists of a TabNavigator that is nested inside of a StackNavigator, which is the entry point of the app's routing.

In the StackNavigator I have also a screen for About, which I want to be shown when an Icon in the header is clicked. The TabNavigator works as expected, however clicking the icon does nothing and does not produce any error. Does anyone have an idea what I am missing?

This is the code:

import { Icon } from 'native-base';
import React, { Component } from 'react';
import { createTabNavigator, createStackNavigator } from 'react-navigation';
import { View } from 'react-native';

import HomeTab from './tabs/HomeTab';
import HistoryTab from './tabs/HistoryTab';
import AboutScreen from './AboutScreen';

export default class Main extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: 'Find Phone Country',
      headerStyle: {
        backgroundColor: '#C62828'
      },
      headerMode: 'screen',
      headerTintColor: '#FFFFFF',
      headerTitleStyle: {
        fontWeight: 'bold',
        justifyContent: 'space-between',
        alignSelf: 'center',
        textAlign: 'center',
        flex: 1,
        flexGrow: 1
      },
      headerRight: (
        <Icon
          name="ios-help-circle-outline"
          style={{ paddingRight: 16, color: 'white' }}
          onPress={() => navigation.navigate('About')}
        />
      ),
      headerLeft: <View />
    };
  };

  render() {
    return <RootStack />;
  }
}

const MainTabNavigator = createTabNavigator(
  {
    Home: {
      screen: HomeTab
    },
    History: {
      screen: HistoryTab
    }
  },
  {
    animationEnabled: true,
    swipeEnabled: true,
    tabBarPosition: 'bottom',
    tabBarOptions: {
      showIcon: true,
      showLabel: true,
      upperCaseLabel: false,
      allowFontScaling: true,
      indicatorStyle: {
        opacity: 0
      },
      style: {
        backgroundColor: '#C62828'
      },
      activeTintColor: '#ffffff',
      inactiveTintColor: '#e0e0e0'
    }
  }
);

const RootStack = createStackNavigator({
  Main: {
    screen: MainTabNavigator,
    navigationOptions: () => ({
      title: 'Main',
      headerBackTitle: null,
      header: null
    })
  },
  About: {
    screen: AboutScreen,
    navigationOptions: () => ({
      title: 'About',
      headerBackTitle: 'Back'
    })
  }
});

Thank you

Andre Knob · Accepted Answer · 2018-09-30 17:40:34Z

2

Icon from native-base doesn't have a prop named onPress. Try encapsulating your icon inside a proper component for capturing the touch, like:

headerRight: (
    <TouchableWithoutFeedback onPress={() => navigation.navigate('About')}> 
      <Icon
        name="ios-help-circle-outline"
        style={{ paddingRight: 16, color: 'white' }}
      />
    </TouchableWithoutFeedback>
  ),

and don't forget, on your imports:

import { View, TouchableWithoutFeedback } from 'react-native';

answered Sep 30, 2018 at 17:40

Andre Knob

8317 silver badges8 bronze badges

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

4 Comments

AmadeusX Over a year ago

Thank you for the quick reply, I have tried that but still the behavior is the same. It stays on the same screen with no output on the react native debugger as well.

Andre Knob Over a year ago

I'm finding a little strange that apparently you're not using the navigationOptions you declared anywhere, aren't you supposed to be using it on your Main inside your RootStack? Could you please check if you're using it and if you indeed are, could you update the code?

AmadeusX Over a year ago

What I am trying to achieve is to use the Header from the static navigationOptions (which has an icon that navigates to an about page) through the whole app, while having tabs on the bottom for navigating through the HomeTab and HistoryTab screens. At first I had only the createTabNavigator and everything worked, but when I decided to include the icon to navigate to the About page I found out I needed to nest it inside the StackNavigator. Could you propose of a better way to proceed on this? Thank you

AmadeusX Over a year ago

I have managed to fix the issue that I had by reading this: reactnavigation.org/docs/en/navigation-options-resolution.html. What I did was that I separated all the Navigator components and the global navigationOptions into their own separate files and applied them only to the screens that I needed. What I was missing is that the "Main" component has it's own navigationOptions and its children as well.

Collectives™ on Stack Overflow

Header icon navigation not working on react navigation (React Native)

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related