Source:  Twitter logo

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}/>
    },
  })

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);
  }}
0 users liked answer #0dislike answer #00
Rami Enbashi profile pic
Rami Enbashi

Copyright © 2022 QueryThreads

All content on Query Threads is licensed under the Creative Commons Attribution-ShareAlike 3.0 license (CC BY-SA 3.0).