[Android] I have 4 tabs rendered perfectly but pressing any of the tabs disables the others

[himelnagrana]

Hi, I have 4 tabs rendered perfectly. The first tab is selected automatically while loading - which is good.

Problem is whenever I press on any of the other three icons - that scene loads - but disables the other tabicons. which means the screen is set to the intended view and I cannot go to other tabs.

The code I have used is:

            <TabNavigator tabBarStyle={styles.topToolbar}>

                <TabNavigator.Item
                  renderIcon={() => <Image source={require('./assets/home.png')} />}
                  renderSelectedIcon={() => <Image source={require('./assets/home_active.png')} />}
                  title="home"
                  selected={this.state.selectedTab === 'home'}
                  selectedTitleStyle={{color:"#00E676"}}
                  onPress={() => {
                    this.setState({
                      selectedTab: 'home'
                    });
                  }}>
                  {this._renderContent('home_page')}
                </TabNavigator.Item>

                <TabNavigator.Item
                  renderIcon={() => <Image source={require('./assets/missions.png')} />}
                  renderSelectedIcon={() => <Image source={require('./assets/missions_active.png')} />}
                  title="missions"
                  selected={this.state.selectedTab === 'missions'}
                  selectedTitleStyle={{color:"#00E676"}}
                  onPress={() => {
                    this.setState({
                      selectedTab: 'missions',
                      presses: this.state.presses + 1
                    });
                  }}>
                  {this._renderContent('my_missions')}
                </TabNavigator.Item>

                <TabNavigator.Item
                  renderIcon={() => <Image source={require('./assets/notifications.png')} />}
                  renderSelectedIcon={() => <Image source={require('./assets/notifications_active.png')} />}
                  title="notification"
                  selected={this.state.selectedTab === 'notification'}
                  selectedTitleStyle={{color:"#00E676"}}
                  onPress={() => {
                    this.setState({
                      selectedTab: 'notification',
                      presses: this.state.presses + 1
                    });
                  }}>
                  {this._renderContent('notifications')}
                </TabNavigator.Item>

                <TabNavigator.Item
                  renderIcon={() => <Image source={require('./assets/account.png')} />}
                  renderSelectedIcon={() => <Image source={require('./assets/account_active.png')} />}
                  title="my account"
                  selected={this.state.selectedTab === 'account'}
                  selectedTitleStyle={{color:"#00E676"}}
                  onPress={() => {
                    this.setState({
                      selectedTab: 'account',
                      presses: this.state.presses + 1
                    });
                  }}>
                  {this._renderContent('my_account')}
                </TabNavigator.Item>
          </TabNavigator>

What actually I have done wrong?

[joncursi]

@himelnagrana I have run into the same exact issue! Can't figure out what the problem is. Could you shed some light on how you solved this? Thanks!!

[joncursi]

The odd thing is that my code is working perfectly on iOS, but as you mentioned, behaving strangely on Android. When tapping to a different tab, the entire component locks up and you cannot navigate to any other tab after that.

[himelnagrana]

Well it seems like it might be a stylesheet issue. I have increased the zIndex property of topToolbar class and it worked nicely. I don't get the reason for this as I haven't digged deeper - but it just worked. Hope that may help you too.

[joncursi]

Worked for me as well! Thanks for the tip @himelnagrana !