Repository: react-navigation/react-navigation

Issue #578: Slow remove of icon on the top bar
Created: 2017-03-05T16:44:43Z
Hey, this is an awesome library I loved it :).
I've added the StackNavigator with a TabNavigator to my app. I got some kind of weird stuff happening. I add an icon on the top right for send me to my create post screen. This one works perfectly etc. But if I change route with the tab and show a route who no supposed to have this icon on the right I got a slow icon remove action. I try to make it null and nothing change. I try also to add the other icon and this last one come on top of my old one.
Do this is normal ? Do I need to change something in my component render ?
This is a GIF I make with this error.

This is my HomeScreen
static navigationOptions = {
    header: ({ navigate }) => {
      const style = { backgroundColor: Colors.redColor };

      const right = (
        <View>
          <Button
            transparent
            onPress={() => navigate('AddMeetup')}
          >
            <Icon
              name="md-add-circle"
              style={{
                fontSize: 30,
                color: Colors.whiteColor
              }}
            />
          </Button>
        </View>
      );

      return { style, right };
    },
This is my ProfileScreen
static navigationOptions = {
    header: {
      style: { backgroundColor: Colors.redColor }
    },
    tabBar: {
      icon: ({ tintColor }) => (
        <MaterialIcons
          name="account-circle"
          size={25}
          color={tintColor}
        />
      )
    }
  }
This is my HomeNavigator who is the tab navigator
import { TabNavigator } from 'react-navigation';
import Colors from '../../constants/Colors';
import {
  HomeScreen,
  NotificationsScreen,
  ProfileScreen
} from '../screens';

export default TabNavigator({
  Home: {
    screen: HomeScreen
  },
  Notifications: {
    screen: NotificationsScreen
  },
  ProfileScreen: {
    screen: ProfileScreen
  }
}, {
  swipeEnabled: false,
  animationEnabled: true,
  tabBarPosition: 'bottom',
  tabBarOptions: {
    showLabel: false,
    showIcon: true,
    inactiveTintColor: Colors.blackBlueColor,
    activeTintColor: Colors.redColor,
    pressColor: Colors.redColor,
    indicatorStyle: { backgroundColor: Colors.redColor },
    style: {
      backgroundColor: Colors.whiteColor
    }
  }
});
My main Navigator
import { StackNavigator } from 'react-navigation';
import { CreateMeetupScreen } from '../screens';
import HomeNavigator from './HomeNavigator';

export default StackNavigator({
  Home: { screen: HomeNavigator },
  AddMeetup: { screen: CreateMeetupScreen }
}, {
  mode: 'modal'
});

Duplicate issue #7340: Delay switching between tabs
Created: 2019-05-06T15:58:44Z
Hello everyone.
I followed this example from docs to dynamically set headerTitle according to the current tab.
https://reactnavigation.org/docs/en/navigation-options-resolution.html#a-stack-contains-a-tab-navigator-and-you-want-to-set-the-title-on-the-stack-header
It works. However, there's a delay to set headerTitle when the tab is swiped.
Related to: #578, #1230

Your Environment



software
version




react-navigation
^3.9.1


react-native
https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz


node
v10.15.3


npm or yarn
yarn@1.13.0-20181121.1436



How to reproduce
https://snack.expo.io/@bruno.castro/react-navigation-tabs

Closing comment (2019-05-20T11:24:08Z): @satya164  I've tried importing from react-navigation-tabs using the versions: 1.1.4 and 2.1.2.
I've still got the same results from this picture 😢

Hello everyone.
I followed this example from docs to dynamically set headerTitle according to the current tab.
https://reactnavigation.org/docs/en/navigation-options-resolution.html#a-stack-contains-a-tab-navigator-and-you-want-to-set-the-title-on-the-stack-header
It works. However, there's a delay to set headerTitle when the tab is swiped.
Related to: #578, #1230

Your Environment
software	version
react-navigation	^3.9.1
react-native	https://github.com/expo/react-native/archive/sdk-32.0.0.tar.gz
node	v10.15.3
npm or yarn	yarn@1.13.0-20181121.1436
How to reproduce
https://snack.expo.io/@bruno.castro/react-navigation-tabs