Tab click returns to initial scene

[hhumphrey84]

• react-native-router-flux ^3.2.7
• react-native ^0.22.2

I've setup the router with two tabs, a home tab which contains two scenes and a profile tab which containers one scene. The behaviour I would like is that every time the home tab is clicked the initial scene is loaded into view. I've experimented with the reducer but just can't find a way to get this functionality to work.

<Router createReducer={reducerCreate}>
    <Scene
                component={TabBar}
                key="tabbar"
                style={styles.tabBar}
                tabs
            >
                <Scene
                    icon={TabIcon}
                    hideNavBar
                    key="tab3"
                    title="Home">

                    <Scene
                        component={Home}
                        duration={1}
                        hideNavBar
                        initial
                        key="home" />

                    <Scene
                        clone
                        component={Filter}
                        duration={1}
                        hideNavBar
                        key="filter" />

                </Scene>
                <Scene
                    component={Profile}
                    duration={1}
                    icon={TabIcon}
                    hideNavBar
                    key="tab4"
                    title="Profile"
                />
            </Scene>
        </Router>`

Reducer:

const reducerCreate = params=>{
const defaultReducer = Reducer(params);

return (state, action)=>{
    let newState = state

    if(state) {
        newState = {
             ...state,
            homeClicked: action.key === 'tab3',
        }
    }

         return defaultReducer(newState, action);
    }
}; 

Any ideas as to the route I should take?

Thanks,
Helen

[AlexDM0]

Hi,

I've done this with the reducer like this:

let inTabMenu = (state) => {
  if (state && state.children && state.children.length > 0) {
    return state.children[0].name = "tabBar";
  }
  return false;
};

let getActiveTabName = (state) => {
  if (state && state.children && state.children.length > 0) {
    let tabBar = state.children[0];
    let tabIndex =  tabBar.index;
    return tabBar.children[tabIndex].name;
  }
  return undefined;
};

let getTabTreeIndex = (state) => {
  if (state && state.children && state.children.length > 0) {
    let tabBar = state.children[0];
    let tabIndex =  tabBar.index;
    return tabBar.children[tabIndex].index;
  }
  return undefined;
};

let getTabRootName = (state) => {
  if (state && state.children && state.children.length > 0) {
    let tabBar = state.children[0];
    let tabIndex =  tabBar.index;
    let tabContainer = tabBar.children[tabIndex];
    return tabContainer.children[0].name;
  }
  return undefined;
};

const reducerCreate = params=> {
  const defaultReducer = Reducer(params);
  return (state, action)=> {
    // this part makes sure that when a menuIcon is pressed AND you are already in that menu tree,
    // it goes back to the root of that tree
    if (action.type === 'jump' && inTabMenu(state)) {
      let activeTabName = getActiveTabName(state);
      // We only want to reset if the icon is tapped when we're already in the view
      if (activeTabName === action.key) {
        // if we're already at root, do not do anything.
        if (getTabTreeIndex(state) === 0) {
          return state;
        }
        // snap to root.
        let rootName = getTabRootName(state);
        if (rootName) {
          console.log("ACTION", {key:rootName, type:'reset'});
          return defaultReducer(state, {key:rootName, type:'reset'});
        }
      }
    }
    console.log("ACTION", action);
    return defaultReducer(state, action);
  }
};

You'll have to read through your state object to see how you have to setup your util methods.

My setup is:

 return <Router createReducer={reducerCreate} store={store} >
      <Scene key="Root" hideNavBar={false} {...navBarStyle}>
        <Scene key="loginSplash"        component={LoginSplash}        hideNavBar={true}  type="reset" />
        <Scene key="login"              component={Login}              hideNavBar={true}  />
        <Scene key="register"           component={Register}           hideNavBar={false} title="Register" {...navBarStyle} />
        <Scene key="registerConclusion" component={RegisterConclusion} hideNavBar={false} title="Registration Almost Finished" type="reset" {...navBarStyle} />
        <Scene key="tabBar" tabs={true} hideNavBar={true} tabBarStyle={{backgroundColor:colors.menuBackground.h}} type="reset">
          <Scene key="overview" title="Overview" icon={TabIcon} iconString="ios-color-filter-outline" {...navBarStyle}>
          <Scene key="1" component={1} />
          <Scene key="2"  component={2}/>
          <Scene key="3"  component={3}/>
          <Scene key="4"  component={4}/>
          <Scene key="5"  component={5}/>
          </Scene>
          <Scene key="settings" title="Settings" icon={TabIcon} iconString="ios-gear-outline" {...navBarStyle} >
            <Scene key="Settings" component={SettingsOverview} title="Settings"/>
          </Scene>
        </Scene>
      </Scene>
    </Router>;

Basic idea is to do the following in the reducer:

• check if you're in the tab bar section of your app
• jump action type is used in the switching tabs. I never use jump for any other reason, if you do then you have to change the detection of 'switching tabs'
• check if you're already in the tab thats being pressed
• check if you're already on the root of the tab
• detect the root of the tab, then action.type reset to it.

Regards

[Elyx0]

( @AlexDM0 Just curious about let over const for the functions declaration)

[AlexDM0]

Mostly don't specifically cared :)

On 08 Apr 2016, at 16:29, Elyx0 notifications@github.com wrote:

( @AlexDM0 Just curious about let over const for the functions declaration)

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

[Elyx0]

I wish we had a snippets folder in the repo where we can add that kind of things.

[Elyx0]

I had to alter the code of bit to support tabbar children with children and tabbar children without sub-children.

My scenes are kinda like:

  <Scene key="modal" component={Modal} >
    <Scene key="root" hideNavBar={true}>
      <Scene key="tutorial" type="reset" component={TutorialView}  hideNavBar={true}  />
      <Scene key="tabbar" tabBarStyle={tabBarStyle.bar} component={TabBar} tabs={true}>
        <Scene key="1" icon={TabIcon} title="1">
          <Scene key="1_1" component={1_1}  title="1_1"/>
          <Scene key="1_2" component={1_2}  title="1_2"/>
        </Scene>
        <Scene key="2" icon={TabIcon} title="2">
          <Scene key="2_1" component={2_1} />
          <Scene key="2_2"  component={2_2} />
        </Scene>
        <Scene key="3"  hideTabBar={true} >
          <Scene key="3_1" component={3_1} hideTabBar={true}  />
        </Scene>
        <Scene key="4" component={4} icon={TabIcon} title="4" />
        <Scene key="5" component={5} icon={TabIcon} title="5" />
      </Scene>
    </Scene>
    <Scene key="error" component={Error}/>
  </Scene>

I had to change a bit so it would work for both:

const inTabMenu = (state) => {
  if (state && state.children && state.children.length > 0) {
    return state.children[0].name = "tabbar";
  }
  return false;
};

const getActiveTabName = (state) => {
  if (state && state.children && state.children.length > 0) {
    let cbase, parent = null, base = state;
    while(cbase = base.children) { parent = base; base = cbase[base.index];  }
    if (parent && parent.children.length) {
       return parent.name;
    }
  }
  return undefined;
};

const getTabTreeIndex = (state) => {
  if (state && state.children && state.children.length > 0) {
    let cbase, parent = null, base = state;
    while(cbase = base.children) { parent = base; base = cbase[base.index];  }
    return parent.index;
  }
  return undefined;
};

const getTabRootName = (state) => {
  if (state && state.children && state.children.length > 0) {
    let cbase, parent = null, base = state;
    while(cbase = base.children) { parent = base; base = cbase[base.index];  }
    return parent.children[0].name;
  }
  return undefined;
};

Thanks for the snippet @AlexDM0

[senthilsivanath]

Thanks a lot. API's are bit modified. Latest code that resets history

let inTabMenu = (state) => {
  if (state && state.children && state.children.length > 0) {
    return state.children[0].name = "tabBar";
  }
  return false;
};

let getActiveTabName = (state) => {
  if (state && state.children && state.children.length > 0) {
    let tabBar = state.children[0];
    let tabIndex =  tabBar.index;
    return tabBar.children[tabIndex].sceneKey;
  }
  return undefined;
};

let getTabTreeIndex = (state) => {
  if (state && state.children && state.children.length > 0) {
    let tabBar = state.children[0];
    let tabIndex =  tabBar.index;
    return tabBar.children[tabIndex].index;
  }
  return undefined;
};

let getTabRootName = (state) => {
  if (state && state.children && state.children.length > 0) {
    let tabBar = state.children[0];
    let tabIndex =  tabBar.index;
    let tabContainer = tabBar.children[tabIndex];
    return tabContainer.children[0].sceneKey;
  }
  return undefined;
};

const reducerCreate = params=> {
  const defaultReducer = Reducer(params);
  return (state, action)=> {
    // this part makes sure that when a menuIcon is pressed AND you are already in that menu tree,
    // it goes back to the root of that tree
    if (action.type === ActionConst.JUMP && inTabMenu(state)) {
      let activeTabName = getActiveTabName(state);
      // We only want to reset if the icon is tapped when we're already in the view
      if (activeTabName === action.key) {
        // if we're already at root, do not do anything.
        if (getTabTreeIndex(state) === 0) {
          return state;
        }
        // snap to root.
        let rootName = getTabRootName(state);
        if (rootName) {
          console.log("ACTION", {key:rootName, type:'reset'});
          return defaultReducer(state, {key:rootName, type:'reset'});
        }
      }
    }
    console.log("ACTION", action);
    return defaultReducer(state, action);
  }
};