Bottom tabs icons fixed position

[scaralfred]

Issue Description

I want the bottom tabs icons in a fixed position, stopping any animation when user switches tabs, but apparently I'm doing something wrong, as they keep moving left and right.

Steps to Reproduce / Code Snippets / Screenshots

See below my stack (5 TABS).... and see the option "animate: false"

Navigation.setRoot({
  root: {
    bottomTabs: {
      options: {
        bottomTabs: {
        animate: false
        }
      },
      children: [{
        stack: {
          children: [{ component: {  name: 'Screen1' } }],
          options: {
            bottomTab: {
              animate: false,
              icon: require('./assets/icons/tabbar/search.png'),
              testID: 'FIRST_TAB_BAR_BUTTON'
            }
          }
        }
      },
      {
        stack: {
          children: [{ component: {  name: 'Screen2' } }],
          options: {
            bottomTab: {
              icon: require('./assets/icons/tabbar/favorites.png'),
              testID: 'SECOND_TAB_BAR_BUTTON'
            }
          }
        }
      },
      {
        stack: {
          children: [{ component: {  name: 'Screen3 } }],
          options: {
            bottomTab: {
              icon: require('./assets/icons/tabbar/qr.png'),
              testID: 'THIRD_TAB_BAR_BUTTON'
            }
          }
        }
      },
      {
        stack: {
          children: [{ component: {  name: 'Screen4 } }],
          options: {
            bottomTab: {
              icon: require('./assets/icons/tabbar/rewards.png'),
              testID: 'FOURTH_TAB_BAR_BUTTON'
            }
          }
        }
      },
      {
        stack: {
          children: [{ component: {  name: 'Screen5 } }],
          options: {
            bottomTab: {
              icon: require('./assets/icons/tabbar/profile.png'),
              testID: 'FIFTH_TAB_BAR_BUTTON'
            }
          }
        }
      }
    ]
    }
  }
});

---

Environment

• React Native Navigation version: 2.2.5
• React Native version: 57.5
• Platform(s) (iOS, Android, or both?): Android
• Device info (Simulator/Device? OS version? Debug/Release?): Huawei nova i3 (debug, real device)

[Haqverdi]

I also have the same problem ;(

[scaralfred]

@Haqverdi Any luck with this?

[Haqverdi]

@Haqverdi Any luck with this?

I solved this problem differently ;) used as tab bar "FooterTabs" from native base and add event listener function on onPress event, which on event triggered call rnn set root func example:

//footer tab example
<Footer>
        <FooterTab style={styles.container}>
           <Button onPress={() => this.handleTabchange('tabname or id')}>
              <Text>Tab name</Text>
            </Button>
           ...
         </FooterTab>
</Footer>

//Footer Tab Navigation
import { Navigation } from 'react-native-navigation';

export const goToBottomTab = tab => {
  switch (tab) {
    case 'home':
      Navigation.setRoot({
        root: {
          stack: {
            children: [
              {
                component: {
                  name: 'Home',
                },
              },
            ],
          },
        },
      });
      break;
    case 'nameof comp':
      Navigation.setRoot({
        root: {
          stack: {
            children: [
              {
                component: {
                  name: 'nameof comp',
                },
              },
            ],
          },
        },
      });
    case 'nameof comp':
      Navigation.setRoot({
        root: {
          stack: {
            children: [
              {
                component: {
                  name: 'nameof comp',
                },
              },
            ],
          },
        },
      });
      break;
    default:
      break;
  }
};```

[Deepaknathtiwari]

I have solve this issue by using : titleDisplayMode: 'alwaysHide' in bottomTabs like this

Navigation.setRoot({ root: {

    bottomTabs: {
      id: 'BottomTabsId',
      children: [
        {
          stack: {
            children: [
              {
                component: {
                  name: Constant.Screens.HOME_SCREEN.screen,
                }
              }],
            options: {
              topBar: {
                visible: false,
                drawBehind: true,

              },
              bottomTab: {
                icon: Constant.Images.HOME_SCREEN_UNSELECTED,
                selectedIcon: Constant.Images.HOME_SCREEN_SELECTED,
                iconInsets: { top: 5, bottom: -5 },
                selectedIconColor: Constant.Colors.appTheme,

              },
              layout: {
                orientation: ["portrait"],
              },
            }
          }
        },
    ],
      options: {
        bottomTabs: {
          animate: false,
          titleDisplayMode: 'alwaysHide'
        }
      }

[scaralfred]

@Deepaknathtiwari Cool, it works now. No titles though... Please let me know if you find way to keep the icons titles showing. Thanks in advance.

[scaralfred]

@Deepaknathtiwari It's very easy, we just need to use titleDisplayMode: 'alwaysShow' which seems to be a necessary options to make 'animate:false' work.

I'm closing this issue.

[ajmalsalim]

@scaralfred, looks like the issue still persists even after adding titleDisplayMode: 'alwaysShow' and animate:false'

The label jump can be fixed by using selectedFontSize: 10,

[NikolaP10]

@Haqverdi I don't think you actually need this switch... If you are passing screen name why don't you use passed name as variable instead of using switch? It should work the same. But, the idea is good!

[ermankuruoglu]

@Deepaknathtiwari thank you so much. it works!