React-native-router-flux: Initial Component in TabBar Mounted Twice

[dmhood]

Version

Tell us which versions you are using:

• react-native-router-flux v3.36.0
• react-native v0.34.1

Expected behaviour

Navigating between tabbed scenes mounts each component a single time.

Actual behaviour

The initial component in a group of tabbed scenes is mounted a second time if you navigate to a different tab and navigate back.

Steps to reproduce

1. Download and run the current example, replacing TabView.js with https://gist.github.com/dmhood/9e6e564d66277148c104497daa9a1b39 (if you want the logging I used).
2. Navigate from the launch page to the "TabBar" page.
3. Tab #2_1 will load initially. Navigate via tabs to Tab # 1, and then back to Tab # 2.

The above steps will produce the following logging:
'mounting tabview', 'tabbar_0_tab2_1'
'mounting tabview', 'tab1_0_tab1_1'
'mounting tabview', 'tab2_0_tab2_1'

(additionally if you use my example you can see both instances of TabBar 2_1 generating logs).

I'm assuming this is due to a different scene key being created when 2_1 intially mounts vs when we navigate back to it via tab. Is there a known workaround/solution for this?

[ninjz]

Experiencing the same issue. For me this is also causing weird behaviours where touches are being captured and preventing scrolling on scroll views.

[atlanteh]

+1 happens to me too

[JunFenglee]

+1 happens to me too .
Adtionally, I change the navigation bar title with "Actions.refresh("title":"changed Title")" after mounted the first tab. however, title change to default title after I switch to tab 2 and go back to tap 1.

[rturk]

@dmhood I've glanced over your gist code, it looks quite different from the core code, specially considering that you're re-creating the tabs logic:

<Button onPress={() => { drawer.close(); Actions.tab1(); }}>Switch to tab1</Button>

Why you need this? Can't you just use core tab logic and just redesign the UI part?

[rturk]

FYI this works for me in production Apps

Please note the * tabs={true}* in the Tabs Scene, wrapped inside drawer menu

export default Actions.create(
  <Scene key="root">
      <Scene key="tabbar" component={DrawerMenu} type="reset" duration={1} initial={true} >
        <Scene 
               key="main"
               tabs={true}
               tabBarStyle={styles.tabBar}
               selectedIconStyle={styles.selectedIconStyle}
               default="newsfeed"
        >
          <Scene
            key="tags"
            title={Local.tags.title}
            iconObj={Icons.tags}
            icon={TabIcon}
            hideNavBar={true}
            component={Tags}
            initial={true}
          />
          <Scene
            key="newsfeed"
            title={Local.newsfeed.title}
            iconObj={Icons.newsPaperO}
            icon={TabIcon}
            hideNavBar={true}
            component={NewsFeed}
            initial={false}
          />

          <Scene
            key="mynews"
            title={Local.myFeed.title}
            iconObj={Icons.user}
            icon={TabIcon}
            hideNavBar={true}
            component={NewsFeedUser}
            initial={false}
          />

          <Scene
            key="settings"
            title={Local.settings.title}
            iconObj={Icons.cog}
            icon={TabIcon}
            hideNavBar={true}
            component={Settings}
            initial={false}
          />

        </Scene>
      </Scene>

      <Scene
        key="cart"
        hideNavBar={true}
        component={Cart} title=""
      />

[dmhood]

@rturk I'm not sure how it is that much different? The only thing I changed from the example (https://github.com/aksonov/react-native-router-flux/blob/master/Example/components/TabView.js) is that I added the componentDidMount method in order to track when the component is mounted.

I'm not talking about hitting those buttons that you refer to (that do duplicate the logic). They are just part of the original example that is part of this repo. The component is mounted twice when you actually use the core tabs component to navigate to another tab, and back to the initial component.

[haibinyu]

experiencing the same issue.

[wrozka]

@dmhood I've fixed this issue by restoring JUMP handler from 0.35 https://github.com/wrozka/react-native-router-flux/commit/e944fbf39197e2f56ff8dbf86eff6a6f83ae29b7 . Somehow the key of a tabbed scene is different when you navigate to it (PUSH parent_position_name) than when you just switch a tab (JUMP name_position_name). However this commit breaks passing props to tabs.

[dmhood]

@wrozka yep, there seems to be a few issues like this that have cropped up with the recent changes to props/tabs. Maybe we can work with that commit and come up with a good PR? I don't have time at the moment but am willing sometime next week (although if anyone else can, please do).

[alexicum]

However this commit breaks passing props to tabs.
and
Restoring 0.35 would return #1151 problem:

@aksonov
May be it should be mentioned inside readme.md

Actions.ACTION_NAME(PARAMS) will call the appropriate action and params will be passed to the scene.
Except tabs. (Need help to implement params passing to tabs).

[aksonov]

Yes.

Pavel.

25 окт. 2016 г., в 15:07, Alexey Shestakov [email protected] написал(а):

However this commit breaks passing props to tabs.
and
Restoring 0.35 would return #1151 problem:

@aksonov
May be it should be mentioned inside readme.md

Actions.ACTION_NAME(PARAMS) will call the appropriate action and params will be passed to the scene.
Except tabs. (Need help to implement params passing to tabs).

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub, or mute the thread.

[dmhood]

https://github.com/aksonov/react-native-router-flux/pull/1312 fixes my issue, so I'm going to close...feel free to re-open if any other discussion needs to take place. Thanks @wrozka !

[czl1378]

@wrozka Thanks for this PR! But found that when I use this with Redux, the scene cannot change.

Here is my reducer:

import { ActionConst } from 'react-native-router-flux'

const initialState = {
  scene: {}
}

export default (state = initialState, action = {}) => {
  switch (action.type) {
    case ActionConst.FOCUS:
      return {
        ...state,
        scene: action.scene
      }
    default:
      return state
  }
}

[hejiaji]

@aksonov Can you release the latest changes in NPM? we need this commit, thanks in advance.

[aksonov]

done

On 10 Nov 2016, at 04:08, Jeremy He [email protected] wrote:

@aksonov https://github.com/aksonov Can you release the latest changes in NPM? we need this commit, thanks in advance.

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub https://github.com/aksonov/react-native-router-flux/issues/1293#issuecomment-259590833, or mute the thread https://github.com/notifications/unsubscribe-auth/ABQpcVExOLphBDPKH0FTuNuliB__ZhoAks5q8oqkgaJpZM4KYTPl.

[hejiaji]

Thanks!