Can't switch Tabs in TabNavigator (react-navigation)

Question

I'm using react-navigation to build nested TabNavigator.

My problem is that I can't navigate to other tab until I click search button. This is so weird.

(UPDATE) I just found that when I change tab, it changes the header for 'Follow' or 'Popular' only. It doesn't render the seconrd tab, 'Popular', and it doesn't switch the tab.

Here is First StackNavigator (Attached to the Root)

export default StackNavigator ({
  Feedo: {
    screen: FeedMainTabNavigator,
    navigationOptions: {
      title: 'Title',
    },
  },
  Searcho: {
    screen: SearchScreen, // if I click second tab, it doesn't show the second tab. 
           //But then I navigate to SearchScreen and goback to FeedScreen, 
           //I can see the second tab was selected.
  }
}, {
    lazy: true
});

Here is FeedMainTabNavigator

export default TabNavigator({
  UserFeed: {
    screen: UserFeedScreen
  },
  PopularPost: {
    screen: PopularPostScreen
  },
}, {
    tabBarOptions: {
      style: {
        backgroundColor: "#7E50CE",
        overflow: "hidden"
      },
      activeTintColor: "white",
      inactiveTintColor: "white",
      tabStyle: { width: 120 },
      indicatorStyle: { backgroundColor: 'white' }
    }
  }
);

Here is UserFeedScreen (maybe problem here?)

import {withRkTheme, RkText} from 'react-native-ui-kitten'
let ThemedNavigationBar = withRkTheme(NavBar);
import { FontAwesome } from '../../assets/icons'

class UserFeedScreen extends Component {
  static navigationOptions = ({navigation}) => ({
    title: 'Follow',
    headerRight: (
      <RkText
        rkType='awesome small'
        style={{color: 'white'}}
        onPress={() => {navigation.navigate('Searcho')}}>{FontAwesome.search}</RkText>
    ),
    header: (headerProps) => {
      return <ThemedNavigationBar navigation={navigation} headerProps={headerProps}/>
    },
  })

score 0 · Accepted Answer · edited Sep 07 '21 at 15:47

0

You need a reset because Searcho is at a level above. Try this

import { NavigationActions } from 'react-navigation';

replace onPress={() => {navigation.navigate('Searcho')}} with

  onPress={() => {
    const resetAction = NavigationActions.reset({
      index: 0,
      actions: [
        NavigationActions.navigate({ routeName: 'Searcho'})
      ]
    });
    navigation.dispatch(resetAction);
  }}

edited Sep 07 '21 at 15:47

Joshua Pinter

45,245
23
243
245

answered Oct 20 '17 at 15:04

Rami Enbashi

3,526
1
19
21

I think you can solve this problem (+200 bounty) : https://stackoverflow.com/questions/47930049/how-to-reset-tabnavigator-when-user-logs-out-from-other-screen – merry-go-round Jan 03 '18 at 05:25

Can't switch Tabs in TabNavigator (react-navigation)

1 Answers1