Screen loads twice when using TabNavigator

[coreyt808]

When using the TabNavigator the initial screen is loaded twice for some reason. This can be seen by adding an Alert or console.log in componentDidMount. I've replicated this in the SimpleTabs and StacksInTabs example. The SimpleStack example doesn't load twice.

const MyNavScreen = ({ navigation, banner }) => { Alert.alert(banner); return ( <ScrollView style={styles.container}> ....... </ScrollView> ); }

[arthurpark]

Try setting initialRouteName in TabNavigatorConfig. It fixed the issue for me.

[coreyt808]

initialRouteName doesn't do anything for me.

I can confirm that this doesn't happen in the beta 5 release though. Will stick with beta 5 until this is fixed.

[makirby]

Also having the same problem & initialRouteName has had no effect stopping it. Any idea what is causing it?

Happens in the examples project as well.

[makirby]

Seems its introduced in the update to react-native-tabs in #366. I downgraded the lib to 0.0.55 and now it no longer mounts the component twice on initial load.

[ivpusic]

I have the same issue

[grabbou]

cc: @satya164

[redgoose-dev]

same issue...

[f0rr0]

Same issue. Using beta-6

[grabbou]

Can any of you past the stack trace here? I'll try to fix it for the beta-7 for today's release.

[f0rr0]

@grabbou there is no error thrown anywhere

[despreston]

+1 for getting this into the beta 7 release !!

[grabbou]

We will try :)

…

On Fri, Mar 3, 2017, 17:41 Des Preston ***@***.***> wrote: +1 for getting this into the beta 7 release !! — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#476 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/ACWcxuuAf9R_6zBTKw-ucrBd1tDChjWcks5riEKbgaJpZM4MLg_n> .

[arnsa]

Uhm, downgrading react-native-tabs to 0.0.55 fixed the problem to me.

[dondragon2]

@arnsa how do I downgrade the react-native-tabs? I am using "react-navigation": "1.0.0-beta.5",

[mostr]

Looks like it's already reported here satya164/react-native-tab-view#160

[martsie]

Same issue for me, making it difficult to attach listeners to my components ...
Here's my tab navigator, each tab is another StackNavigator. If I put a breakpoint into component did mount of either of the screens then it fires twice despite only being shown to the user once.

const Parks = StackNavigator({
  Home: { screen: ParksScreen, },
  Landmarks: { screen: LandmarksScreen },
}, {
    headerMode: 'screen',
    initialRouteName: 'Home',
    navigationOptions: {
      ...stackNavOptions,
      tabBar: {
        label: 'Parks',
        icon: ({ tintColor, focused }) => (
          <Image
            source={focused ? require('./src/images/ios/alphabet-filled.png') : require('./src/images/ios/alphabet.png')}
            style={[styles.icon, { tintColor: tintColor }]}
          />
        ),
      },
    },
  });


const Closest = StackNavigator({
  Closest: { screen: ClosestScreen },
}, {
    headerMode: 'screen',
    navigationOptions: {
      ...stackNavOptions,
      tabBar: {
        label: 'Map',
        icon: ({ tintColor, focused }) => (
          <Image
            source={focused ? require('./src/images/ios/map-filled.png') : require('./src/images/ios/map.png')}
            style={[styles.icon, { tintColor: tintColor }]}
          />
        ),
      }
    },
  })
const TabNav = TabNavigator({
  Home: {
    screen: Closest,
  },
  Parks: {
    screen: Parks,
  },
}, {
    tabBarOptions: {
      initialRouteName: 'Home',
      activeTintColor: '#fff',
      inactiveTintColor: '#bbb',
      style: {
        backgroundColor: colors.blue,
      },
      titleStyle: {
        color: 'white',
      }
    },
  })

[martsie]

Also stacktraces:

1st component mount

componentDidMount (ClosestScreen.js:62)
(anonymous) (ReactCompositeComponent.js:353)
measureLifeCyclePerf (ReactCompositeComponent.js:85)
(anonymous) (ReactCompositeComponent.js:352)
notifyAll (CallbackQueue.js:73)
close (ReactNativeReco…nsaction.js:36)
closeAll (Transaction.js:222)
perform (Transaction.js:163)
batchedMountComponentIntoNode (ReactNativeMount.js:77)
perform (Transaction.js:149)
batchedUpdates (ReactDefaultBat…Strategy.js:65)
batchedUpdates (ReactUpdates.js:111)
renderComponent (ReactNativeMount.js:141)
render (ReactNative.js:31)
renderApplication (renderApplication.js:33)
run (AppRegistry.js:76)
runApplication (AppRegistry.js:105)
__callFunction (MessageQueue.js:242)
(anonymous) (MessageQueue.js:108)
guard (MessageQueue.js:46)
callFunctionReturnFlushedQueue (MessageQueue.js:107)
(anonymous) (debuggerWorker.js:71)

Second component mount

componentDidMount (ClosestScreen.js:62)
(anonymous) (ReactCompositeComponent.js:353)
measureLifeCyclePerf (ReactCompositeComponent.js:85)
(anonymous) (ReactCompositeComponent.js:352)
notifyAll (CallbackQueue.js:73)
close (ReactNativeReco…nsaction.js:36)
closeAll (Transaction.js:222)
perform (Transaction.js:163)
perform (Transaction.js:149)
perform (ReactUpdates.js:95)
flushBatchedUpdates (ReactUpdates.js:199)
closeAll (Transaction.js:222)
perform (Transaction.js:163)
batchedUpdates (ReactDefaultBat…Strategy.js:65)
batchedUpdates (ReactUpdates.js:111)
_receiveRootNodeIDEvent (ReactNativeEventEmitter.js:126)
receiveEvent (ReactNativeEventEmitter.js:149)
__callFunction (MessageQueue.js:242)
(anonymous) (MessageQueue.js:108)
guard (MessageQueue.js:46)
callFunctionReturnFlushedQueue (MessageQueue.js:107)
(anonymous) (debuggerWorker.js:71)

In case that helps...

[duongtranpyco]

This issue is still happened, please update to "react-native-tab-view": "^0.0.55"

[udfalkso]

I'm currently running into this issue with 1.0.0-beta.9. My initial screen is a StackNavigator and the initial route of that stack is loaded twice, one on top of the other.

[NachtRitter]

I solved this problem with setting lazy: true for TabNavigator

[udfalkso]

Thanks @NachtRitter but that isn't solving it for me.

[chrismcleod]

same as @udfalkso 1.0.0-beta.11

I am using redux and my reducer is exactly the same as the doc example. It seems this might be a misunderstanding of how to route to nested navigators. In the case below, it looks like it constructs and mounts a component for each route in the array of routes. I would think it would only instantiate the last one, maybe this is what lazy does?

class Screen1 extends React.Component {
  constructor(props) {
    super(props);
    console.log("constructed"); // called even though not the current route
  }

  componentDidMount() {
    console.log("mounted"); // called even though not the current route
  }
}

class Screen2 extends React.Component {
  constructor(props) {
    super(props);
    console.log("constructed"); // called
  }

  componentDidMount() {
    console.log("mounted"); // called
  }
}

const ChildNavigator = StackNavigator({
  Child1: {screen: Screen1},
  Child2: {screen: Screen2}
});

const ParentNavigator = StackNavigator({
  Parent: {screen: ChildNavigator}
});

initialState = {
  index: 1,
  routes: [{
    index: 0,
    routeName: "Parent",
    routes: [{
      index: 0,
      routeName: "Child1"
    }]
  },{
    index: 1,
    routeName: "Parent",
    routes: [{
      index: 0,
      routeName: "Child2"
    }]
  }]
}

I created the initialState by doing:

NavigationActions.navigate({
  routeName: "Parent",
  action: NavigationActions.navigate({ routeName: "Child2" })
})

Should the initialState instead be?:

initialState = {
  index: 0,
  routes: [{
    index: 1,
    routeName: "Parent",
    routes: [{
      index: 0,
      routeName: "Child1"
    },{
      index: 1,
      routeName: "Child2"
    }]
  }]
}

[udfalkso]

Interesting @chrismcleod . I'm also using redux. This is how I'm generating my initial state.

var action = TabNav.router.getActionForPathAndParams("InitialTabView")
const initialState = TabNav.router.getStateForAction(action)

[chrismcleod]

@udfalkso
yea i created my first state in a similar way, but this initialState is actually coming from a rehydrate from redux-persist

[baldurpan]

+1

[neetocode]

+1
I have a TabNavigator nested a StackNavigator. The TabNavigator is mounted twice

[vagnerSl]

+1

[hcyildirim]

+1

[aevpraid]

I have a StackNavigator nested a DrawerNavigator. The DrawerNavigator is mounted three time

[rubancar]

I was facing the same problem, I just found a simple solution, in my case MyApp is an StackNavigator which includes a TabNavigator and StackNavigator, the problem came up when I wanted to navigate from the Home screen in Main to Results screen in Purchase, so Results screen was double mounted, I solved this when I set Results as the name for my screen Purchase in MyApp, as you can see it's the same name of the initialRouteName in Purchase, so It appears that you have to use the same name of the initialRouteName on a StackNavigator as the name of the screen in another StackNavigator, I leave an example code that right now It's working for me.

const Purchase = StackNavigator({
    Results: { screen: Results },
    Seats: { screen: Seats }
}, {
    initialRouteName: 'Results',
    headerMode: 'none'
});

const Main = TabNavigator({
    Home: { screen: Home },
    Tickets: { screen: Tickets },
    Login: { screen: Auth }
}, {
    initialRouteName: 'Home'
});

export default MyApp = StackNavigator({
    Main: { screen: Main },
    Results: { screen: Purchase }
}, {
    initialRouteName: 'Main',
})

[pencilcheck]

Having the same issue for stacknavigator that loads the first screen twice, and you can see that the same screen get flashed twice. I don't know how to solve this, even the most simpliest example from the playground also produce the same results here somehow.

Using

react-navigation@^1.0.0-beta.13:
  version "1.0.0-beta.13"
  resolved "https://registry.yarnpkg.com/react-navigation/-/react-navigation-1.0.0-beta.13.tgz#77521f7080e5755906a3483a28baedbbc66f763c"
  dependencies:
    babel-plugin-transform-define "^1.3.0"
    clamp "^1.0.1"
    hoist-non-react-statics "^2.2.0"
    path-to-regexp "^1.7.0"
    prop-types "^15.5.10"
    react-native-drawer-layout-polyfill "^1.3.2"
    react-native-tab-view "^0.0.69"

Downgrading to 1.0.0-beta.9 fixed the issue...

[NunoCardoso]

+1

[lucidtheory]

Solved this by naming everything down the tree by the same name as per @rubancar 's post:

  const MainNavigator = TabNavigator({
        welcome: {screen: WelcomeScreen},
        auth: {
          screen: StackNavigator({
            login: { screen: LoginScreen },
            register: { screen: RegisterScreen },
            forgotPassword: {screen: ForgotPasswordScreen},
            eula: {screen: EULAScreen},
          })
        },
        contacts:{
          screen: TabNavigator({
            contacts:{
              navigationOptions:{
                tabBarVisible: false
              },
              screen: TabNavigator({
                contacts: {
                  screen: StackNavigator({
                    //-------this is the first screen to render --------
                    contacts: { screen: ContactsScreen },
                    viewProfile: {
                      screen: ViewProfileScreen,
                      navigationOptions: ({ navigation }) => ({
                        tabBarVisible: false,
                        headerBackTitle: null
                      })
                    },
......more code

for me my first main screen is my contacts screen so I just renamed every branch down the tree contacts. Not the best thing as far as naming principles is concerned but it works and its a simple fix.

[Kottidev]

This issue still exist with last version 1.0.0-beta.19 when using Redux and TabNavigator.

componentWillMount is called twice

@grabbou

[ruinnel]

still existing version 1.0.0-beta.21

in my case.
TabNavigator has 4 tab and each tab has StackNavigator..

I solved this problem using custom router.

in router.getStateForAction receive two action..

1. { type: 'Navigation/INIT' }
2. Navigation/Navigate for move to your initialRouteName in TabNavigator.

skip second action like this.

const defaultGetStateForAction = Nav.router.getStateForAction;

Nav.router.getStateForAction = (action, state) => {
  if (action && action.type === 'Navigation/NAVIGATE'
  && action.routeName === 'reserve'
  && action.action && action.action.routeName === 'main') {
    const index = _.get(state, 'routes.[0].index');
    const routeName = _.get(state, 'routes.[0].routes[0].routeName');
    if (index === 0 && routeName === 'main') {
      return state;
    }
  }

  return defaultGetStateForAction(action, state);
};

please change

• Nav to your StackNavigator
• routeName === 'main' to routeName === 'StackRouter's initialRouteName'

I am sorry that English is awkward.....

[EthanChouTW]

@luisfuertes 's fixs works for me, thanks

change from

const firstAction = AppNavigator.router.getActionForPathAndParams('Home');
const initialNavState = AppNavigator.router.getStateForAction(firstAction)

to

 const initialNavState = AppNavigator.router.getStateForAction({})

and
add initialRouteName in navigatorConfig

could prevent multiple mount calls for me

[mlazari]

@satya164 Here is a repro: https://snack.expo.io/BJLIk4-Qz

[zygama]

I have the same problem in beta-22 ...

TabNavigator -> StackNavigator -> StackNavigator (mount twice)

[thalesfp]

@rubancar solution works for me.

[mlazari]

Repro code: https://snack.expo.io/BJLIk4-Qz

Navigation structure:

MyTabNavigator
--MyStackNavigator
----MyScreen1

Problem: MyScreen1 loads twice

Possible cause:
MyScreen1 is loading first time when MyTabNavigator's router is sending Navigation/INIT to MyStackNavigator router's getStateForAction here:
TabRouter -> StackRouter
Second time it's loading when MyTabNavigator's router is sending Navigation/NAVIGATE to MyStackNavigator router's getStateForAction here:
TabRouter -> StackRouter

Possible solutions:
const initialAction = MyTabNavigator.router.getActionForPathAndParams('MyStackNavigator');
The value of initialAction is:

{
  type: "Navigation/NAVIGATE",
  routeName: "MyStackNavigator",
  action: {
    type: "Navigation/NAVIGATE",
    routeName: "MyScreen1"
  }
}

const initialState = MyTabNavigator.router.getStateForAction(initialAction);
The value of initialState is:

{
  index: 0,
  routes: [
    {
      index: 1,
      key: "MyStackNavigator",
      routeName: "MyStackNavigator",
      routes: [
        {
          key: "Init-id-1515587457094-0",
          routeName: "MyScreen1"
        },
        {
          key: "id-1515587457094-1",
          params: undefined,
          routeName: "MyScreen1"
        }
      ]
    }
  ]
}

I think the inner action (Navigate to MyScreen1) is adding the screen for the second time in stack. initialAction should be probably just:

{
  type: "Navigation/NAVIGATE",
  routeName: "MyStackNavigator"
}

because I'm asking MyTabNavigator's router which action do I need to go to MyStackNavigator, not to MyScreen1.
The inner action is added here: TabRouter -> StackRouter
It should probably not add the subaction when the remaining part of the path is empty. I've made a commit here which does that: mlazari@29f0c1d Maybe someone from contributors can review it?

Other solution for given code would be to just use NavigationActions.navigate instead of MyTabNavigator.router.getActionForPathAndParams:
const initialAction = NavigationActions.navigate({routeName: 'MyStackNavigator'});

Or just const initialAction = {}; as someone already suggested.

[Donhv]

who can help me fix this issue?

[udfalkso]

@mlazari is def. right. Using a sort of "empty" action for your initial state can stop this issue from happening. This seems like the cleanest way to do it.

import { NavigationActions } from "react-navigation"

let initialState = MainTabs.router.getStateForAction(NavigationActions.init())

Should the redux docs be updated to reflect this?

[SKempin]

Just upgraded to 1.1.2 and am getting this with the Stack and Tabs navigators. Should this be fixed by now?

[danZheng1993]

I have upgraded the react native to 1.2.1 and the issue was fixed.
It works like magic now.
Fantastic work by the team.

[SKempin]

1.2.1 has solved this issue for me too.

[brentvatne]

yay thanks

[brentvatne]

given that this is resolved i will lock the issue. if you run into any other bugs please create a new issue. thanks!