Tapping a tab should navigate to the default scene for that scene group #717

Olliepop · 2016-05-22T23:45:17Z

Version

react-native-router-flux v3.26.1
react-native v0.26.0 & v0.26.1

I am using the Example app.

Expected behaviour

In the Example, when I go to the "TabBar page" then "push new scene" then tap the tab i'm currently in ("Tab #2" for example) i expect my current scene to pop so that i'm back at the default scene for that tab.

Because the action type jump with key tab2 is dispatched, i expect to be taken to the default scene for that tab (tab2_1)

This is the group I am talking about:

<Scene key="tab2" initial={true} title="Tab #2" icon={TabIcon}> <Scene key="tab2_1" component={TabView} title="Tab #2_1" renderRightButton={()=><Right/>} /> <Scene key="tab2_2" component={TabView} title="Tab #2_2" onLeft={()=>alert("Left button!")} leftTitle="Left" duration={1} panHandlers={null}/> </Scene>

Actual behaviour

3 actions are dispatched:

Jump (key: tab2)
Push (scene.key: 0_modal)
Push (scene.key: 1_tabbar)

Despite these actions, no actual navigation is performed and the user remains on the same child scene of a tab that they were on.

Steps to reproduce

Open the RNRF Example app
Tap "Go to TabBar page"
Tap "push new scene"
Tap "Tab # 2" in the tab bar

I expect that # 4 takes us back to scene tab2_1 instead of staying on the current scene.

The text was updated successfully, but these errors were encountered:

cridenour · 2016-05-23T17:37:50Z

I think this is a good idea, would love to see a PR with it if you're up to it!

Olliepop · 2016-05-23T18:19:28Z

@cridenour Cool - i thought this was a bug with intended functionality because of the actions dispatched when you click a tab. But if it's an enhancement i'd definitely be happy to work on it.

cridenour · 2016-05-23T18:44:48Z

I believe those actions are only dispatched because we send them regardless of whether the tab is selected.

joenoon · 2016-05-23T23:22:56Z

Agree this would be nice - just checked the Facebook and Twitter apps and they behave as described above

Olliepop · 2016-06-01T04:17:10Z

Question related to solving this issue:

I had this solved in 3.22.23 by chaining Actions.pop() to the number of children in the tab scene navigationState. I want to submit a PR for 3.26.

In the latest implementation of TabBar within the onSelect method we're unable to execute multiple Actions i.e:

Actions.scene_1();
Actions.scene_2();
Actions.scene_3();

In the above example only the last action, Actions.scene_3() will be performed. Does anybody know why, and how we can perform all 3 within onSelect in TabBar?

Link for convenience: https://github.com/aksonov/react-native-router-flux/blob/master/src/TabBar.js#L22

Olliepop · 2016-06-02T22:18:53Z

Re: my comment above. This is worth a seperate issue, as this issue (#717) is related to TabBar behaviour.

Elyx0 · 2016-06-08T16:12:42Z

This can be handled with a custom rnrf reducer. I implemented something along these lines back in v.22

import { Reducer } from 'react-native-router-flux';

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) {
       //console.log('activeTabName',parent.name,'[[<<<   >>>]]');
       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;
};

export 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)) {
      console.log('JUMP IN TAB MENU')
      let activeTabName = getActiveTabName(state);
      // We only want to reset if the icon is tapped when we're already in the view
      //debugger;
      if (activeTabName === action.key) {
        // if we're already at root, do not do anything.
        if (getTabTreeIndex(state) === 0) {
          console.log('Already in root');
          return state;
        }
        // snap to root.
        //debugger;
        let rootName = getTabRootName(state);
        if (rootName) {
          console.log("ACTION ROOT", {key:rootName, type:'reset'});
          return defaultReducer(state, {key:rootName, type:'reset'});
        }
      }
    }
    console.log("ACTION", action);
    return defaultReducer(state, action);
  }
};

nbolender · 2016-11-13T21:58:33Z

If anyone is stumbling upon @Elyx0's reducer above, here is a version that works with the latest. Namely the changes are using ActionConst.JUMP instead of "jump", and using sceneKey instead of name when getting the tab root key.

import { Reducer, ActionConst } from 'react-native-router-flux';

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) {
       //console.log('activeTabName',parent.name,'[[<<<   >>>]]');
       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].sceneKey;
  }
  return undefined;
};

export 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)) {
      console.log('JUMP IN TAB MENU')
      let activeTabName = getActiveTabName(state);
      // We only want to reset if the icon is tapped when we're already in the view
      //debugger;
      if (activeTabName === action.key) {
        // if we're already at root, do not do anything.
        if (getTabTreeIndex(state) === 0) {
          console.log('Already in root');
          return state;
        }
        // snap to root.
        //debugger;
        let rootName = getTabRootName(state);
        if (rootName) {
          console.log("ACTION ROOT", {key:rootName, type:'reset'});
          return defaultReducer(state, {key:rootName, type:'reset'});
        }
      }
    }
    console.log("ACTION", action);
    return defaultReducer(state, action);
  }
};

itelo · 2016-11-27T05:27:32Z

@nbolender, can you post a full example or a link?

nbolender · 2016-11-27T08:24:59Z

@itelo You can take that entire example and put it in its own file, then import it to your root component (where your Router component lives). Just set it up like so:

import React, { Component } from 'react';
import { Router, Scene } from 'react-native-router-flux';

import myReducerCreate from 'my-reducer-example';

class MyApp extends Component {
    render() {
        return (
            <Router createReducer={myReducerCreate}>
                <Scene />
                ...
            </Router>
        );
    }
}

itelo · 2016-11-27T09:18:31Z

Hey @nbolender, i'm getting no reducer provided for key routes, seems to be a problem in my redux config

nbolender · 2016-11-27T18:31:22Z

@itelo You probably need to combine it with any reducers used by Redux. Try checking the Redux docs and your code for combineReducers().

AnsalAli-mudano · 2017-01-03T06:35:58Z

Is there any other solution than implementing custom reducer for routing? I think this is a general scenario and every one who uses tabview needs this behaviour. If someone has any idea about this, please discuss it here.

arnsa · 2017-02-27T05:18:08Z

@nbolender for some reason inTabMenu returns me false :( I suppose it's not working anymore?

EDIT: I noticed that the children property, at least for me, is under state.scene.children, not state.children. Also, when I click on the tabbar icon for the first time, it doesn't have any children for some reason :(.

nbolender · 2017-02-27T19:00:55Z

@arnsa I am working off of this version of this library. Maybe something has changed recently that affects this: 2b09f47

In any case, I expect to be switching to a different library for navigation the next time I upgrade my app.

…#10,#11,#12,#13,#14,#15,#16,#17,#18,#19,#20,#21,#22,#23,#24,#25,#26,#27,#28,#29,#30,#31,#32,#33,#34,#35,#36,#37,#38,#39,#40,#41,#42,#43,#44,#45,#46,#47,#48,#49,#50,#51,#52,#53,#54,#55,#56,#57,#58,#59,#60,#61,#62,#63,#64,#65,#66,#67,#68,#69,#70,#71,#72,#73,#74,#75,#76,#77,#78,#79,#80,#81,#82,#83,#84,#85,#86,#87,#88,#89,#90,#91,#92,#93,#94,#95,#96,#97,#98,#99,#100,#101,#102,#103,#104,#105,#106,#107,#108,#109,#110,#111,#112,#113,#114,#115,#116,#117,#118,#119,#120,#121,#122,#123,#124,#125,#126,#127,#128,#129,#130,#131,#132,#133,#134,#135,#136,#137,#138,#139,#140,#141,#142,#143,#144,#145,#146,#147,#148,#149,#150,#151,#152,#153,#154,#155,#156,#157,#158,#159,#160,#161,#162,#163,#164,#165,#166,#167,#168,#169,#170,#171,#172,#173,#174,#175,#176,#177,#178,#179,#180,#181,#182,#183,#184,#185,#186,#187,#188,#189,#190,#191,#192,#193,#194,#195,#196,#197,#198,#199,#200,#201,#202,#203,#204,#205,#206,#207,#208,#209,#210,#211,#212,#213,#214,#215,#216,#217,#218,#219,#220,#221,#222,#223,#224,#225,#226,#227,#228,#229,#230,#231,#232,#233,#234,#235,#236,#237,#238,#239,#240,#241,#242,#243,#244,#245,#246,#247,#248,#249,#250,#251,#252,#253,#254,#255,#256,#257,#258,#259,#260,#261,#262,#263,#264,#265,#266,#267,#268,#269,#270,#271,#272,#273,#274,#275,#276,#277,#278,#279,#280,#281,#282,#283,#284,#285,#286,#287,#288,#289,#290,#291,#292,#293,#294,#295,#296,#297,#298,#299,#300,#301,#302,#303,#304,#305,#306,#307,#308,#309,#310,#311,#312,#313,#314,#315,#316,#317,#318,#319,#320,#321,#322,#323,#324,#325,#326,#327,#328,#329,#330,#331,#332,#333,#334,#335,#336,#337,#338,#339,#340,#341,#342,#343,#344,#345,#346,#347,#348,#349,#350,#351,#352,#353,#354,#355,#356,#357,#358,#359,#360,#361,#362,#363,#364,#365,#366,#367,#368,#369,#370,#371,#372,#373,#374,#375,#376,#377,#378,#379,#380,#381,#382,#383,#384,#385,#386,#387,#388,#389,#390,#391,#392,#393,#394,#395,#396,#397,#398,#399,#400,#401,#402,#403,#404,#405,#406,#407,#408,#409,#410,#411,#412,#413,#414,#415,#416,#417,#418,#419,#420,#421,#422,#423,#424,#425,#426,#427,#428,#429,#430,#431,#432,#433,#434,#435,#436,#437,#438,#439,#440,#441,#442,#443,#444,#445,#446,#447,#448,#449,#450,#451,#452,#453,#454,#455,#456,#457,#458,#459,#460,#461,#462,#463,#464,#465,#466,#467,#468,#469,#470,#471,#472,#473,#474,#475,#476,#477,#478,#479,#480,#481,#482,#483,#484,#485,#486,#487,#488,#489,#490,#491,#492,#493,#494,#495,#496,#497,#498,#499,#500,#501,#502,#503,#504,#505,#506,#507,#508,#509,#510,#511,#512,#513,#514,#515,#516,#517,#518,#519,#520,#521,#522,#523,#524,#525,#526,#527,#528,#529,#530,#531,#532,#533,#534,#535,#536,#537,#538,#539,#540,#541,#542,#543,#544,#545,#546,#547,#548,#549,#550,#551,#552,#553,#554,#555,#556,#557,#558,#559,#560,#561,#562,#563,#564,#565,#566,#567,#568,#569,#570,#571,#572,#573,#574,#575,#576,#577,#578,#579,#580,#581,#582,#583,#584,#585,#586,#587,#588,#589,#590,#591,#592,#593,#594,#595,#596,#597,#598,#599,#600,#601,#602,#603,#604,#605,#606,#607,#608,#609,#610,#611,#612,#613,#614,#615,#616,#617,#618,#619,#620,#621,#622,#623,#624,#625,#626,#627,#628,#629,#630,#631,#632,#633,#634,#635,#636,#637,#638,#639,#640,#641,#642,#643,#644,#645,#646,#647,#648,#649,#650,#651,#652,#653,#654,#655,#656,#657,#658,#659,#660,#661,#662,#663,#664,#665,#666,#667,#668,#669,#670,#671,#672,#673,#674,#675,#676,#677,#678,#679,#680,#681,#682,#683,#684,#685,#686,#687,#688,#689,#690,#691,#692,#693,#694,#695,#696,#697,#698,#699,#700,#701,#702,#703,#704,#705,#706,#707,#708,#709,#710,#711,#712,#713,#714,#715,#716,#717,#718,#719,#720,#721,#722,#723,#724,#725,#726,#727,#728,#729,#730,#731,#732,#733,#734,#735,#736,#737,#738,#739,#740,#741,#742,#743,#744,#745,#746,#747,#748,#749,#750,#751,#752,#753,#754,#755,#756,#757,#758,#759,#760,#761,#762,#763,#764,#765,#766,#767,#768,#769,#770,#771,#772,#773,#774,#775,#776,#777,#778,#779,#780,#781,#782,#783,#784,#785,#786,#787,#788,#789,#790,#791,#792,#793,#794,#795,#796,#797,#798,#799,#800,#801,#802,#803,#804,#805,#806,#807,#808,#809,#810,#811,#812,#813,#814,#815,#816,#817,#818,#819,#820,#821,#822,#823,#824,#825,#826,#827,#828,#829,#830,#831,#832,#833,#834,#835,#836,#837,#838,#839,#840,#841,#842,#843,#844,#845,#846,#847,#848,#849,#850,#851,#852,#853,#854,#855,#856,#857,#858,#859,#860,#861,#862,#863,#864,#865,#866,#867,#868,#869,#870,#871,#872,#873,#874,#875,#876,#877,#878,#879,#880,#881,#882,#883,#884,#885,#886,#887,#888,#889,#890,#891,#892,#893,#894,#895,#896,#897,#898,#899,#900,#901,#902,#903,#904,#905,#906,#907,#908,#909,#910,#911,#912,#913,#914,#915,#916,#917,#918,#919,#920,#921,#922,#923,#924,#925,#926,#927,#928,#929,#930,#931,#932,#933,#934,#935,#936,#937,#938,#939,#940,#941,#942,#943,#944,#945,#946,#947,#948,#949,#950,#951,#952,#953,#954,#955,#956,#957,#958,#959,#960,#961,#962,#963,#964,#965,#966,#967,#968,#969,#970,#971,#972,#973,#974,#975,#976,#977,#978,#979,#980,#981,#982,#983,#984,#985,#986,#987,#988,#989,#990,#991,#992,#993,#994,#995,#996,#997,#998,#999,#1000,#1001,#1002,#1003,#1004,#1005,#1006,#1007,#1008,#1009,#1010,#1011,#1012,#1013,#1014,#1015,#1016,#1017,#1018,#1019,#1020,#1021,#1022,#1023,#1024,#1025,#1026,#1027,#1028,#1029,#1030,#1031,#1032,#1033,#1034,#1035,#1036,#1037,#1038,#1039,#1040,#1041,#1042,#1043,#1044,#1045,#1046,#1047,#1048,#1049,#1050,#1051,#1052,#1053,#1054,#1055,#1056,#1057,#1058,#1059,#1060,#1061,#1062,#1063,#1064,#1065,#1066,#1067,#1068,#1069,#1070,#1071,#1072,#1073,#1074,#1075,#1076,#1077,#1078,#1079,#1080,#1081,#1082,#1083,#1084,#1085,#1086,#1087,#1088,#1089,#1090,#1091,#1092,#1093,#1094,#1095,#1096,#1097,#1098,#1099,#1100,#1101,#1102,#1103,#1104,#1105,#1106,#1107,#1108,#1109,#1110,#1111,#1112,#1113,#1114,#1115,#1116,#1117,#1118,#1119,#1120,#1121,#1122,#1123,#1124,#1125,#1126,#1127,#1128,#1129,#1130,#1131,#1132,#1133,#1134,#1135,#1136,#1137,#1138,#1139,#1140,#1141,#1142,#1143,#1144,#1145,#1146,#1147,#1148,#1149,#1150,#1151,#1152,#1153,#1154,#1155,#1156,#1157,#1158,#1159,#1160,#1161,#1162,#1163,#1164,#1165,#1166,#1167,#1168,#1169,#1170,#1171,#1172,#1173,#1174,#1175,#1176,#1177,#1178,#1179,#1180,#1181,#1182,#1183,#1184,#1185,#1186,#1187,#1188,#1189,#1190,#1191,#1192,#1193,#1194,#1195,#1196,#1197,#1198,#1199,#1200,#1201,#1202,#1203,#1204,#1205,#1206,#1207,#1208,#1209,#1210,#1211,#1212,#1213,#1214,#1215,#1216,#1217,#1218,#1219,#1220,#1221,#1222,#1223,#1224,#1225,#1226,#1227,#1228,#1229,#1230,#1231,#1232,#1233,#1234,#1235,#1236,#1237,#1238,#1239,#1240,#1241,#1242,#1243,#1244,#1245,#1246,#1247,#1248,#1249,#1250,#1251,#1252,#1253,#1254,#1255,#1256,#1257,#1258,#1259,#1260,#1261,#1262,#1263,#1264,#1265,#1266,#1267,#1268,#1269,#1270,#1271,#1272,#1273,#1274,#1275,#1276,#1277,#1278,#1279,#1280,#1281,#1282,#1283,#1284,#1285,#1286,#1287,#1288,#1289,#1290,#1291,#1292,#1293,#1294,#1295,#1296,#1297,#1298,#1299,#1300,#1301,#1302,#1303,#1304,#1305,#1306,#1307,#1308,#1309,#1310,#1311,#1312,#1313,#1314,#1315,#1316,#1317,#1318,#1319,#1320,#1321,#1322,#1323,#1324,#1325,#1326,#1327,#1328,#1329,#1330,#1331,#1332,#1333,#1334,#1335,#1336,#1337,#1338,#1339,#1340,#1341,#1342,#1343,#1344,#1345,#1346,#1347,#1348,#1349,#1350,#1351,#1352,#1353,#1354,#1355,#1356,#1357,#1358,#1359,#1360,#1361,#1362,#1363,#1364,#1365,#1366,#1367,#1368,#1369,#1370,#1371,#1372,#1373,#1374,#1375,#1376,#1377,#1378,#1379,#1380,#1381,#1382,#1383,#1384,#1385,#1386,#1387,#1388,#1389,#1390,#1391,#1392,#1393,#1394,#1395,#1396,#1397,#1398,#1399,#1400,#1401,#1402,#1403,#1404,#1405,#1406,#1407,#1408,#1409,#1410,#1411,#1412,#1413,#1414,#1415,#1416,#1417,#1418,#1419,#1420,#1421,#1422,#1423,#1424,#1425,#1426,#1427,#1428,#1429,#1430,#1431,#1432,#1433,#1434,#1435,#1436,#1437,#1438,#1439,#1440,#1441,#1442,#1443,#1444,#1445,#1446,#1447,#1448,#1449,#1450,#1451,#1452,#1453,#1454,#1455,#1456,#1457,#1458,#1459,#1460,#1461,#1462,#1463,#1464,#1465,#1466,#1467,#1468,#1469,#1470,#1471,#1472,#1473,#1474,#1475,#1476,#1477,#1478,#1479,#1480,#1481,#1482,#1483,#1484,#1485,#1486,#1487,#1488,#1489,#1490,#1491,#1492,#1493,#1494,#1495,#1496,#1497,#1498,#1499,#1500,#1501,#1502,#1503,#1504,#1505,#1506,#1507,#1508,#1509,#1510,#1511,#1512,#1513,#1514,#1515,#1516,#1517,#1518,#1519,#1520,#1521,#1522,#1523,#1524,#1525,#1526,#1527,#1528,#1529,#1530,#1531,#1532,#1533,#1534,#1535,#1536,#1537,#1538,#1539,#1540,#1541,#1542,#1543,#1544,#1545,#1546,#1547,#1548,#1549,#1550,#1551,#1552,#1553,#1554,#1555,#1556,#1557,#1558,#1559,#1560,#1561,#1562,#1563,#1564,#1565,#1566,#1567,#1568,#1569,#1570,#1571,#1572,#1573,#1574,#1575,#1576,#1577,#1578,#1579,#1580,#1581,#1582,#1583,#1584,#1585,#1586,#1587,#1588,#1589,#1590,#1591,#1592,#1593,#1594,#1595,#1596,#1597,#1598,#1599,#1600,#1601,#1602,#1603,#1604,#1605,#1606,#1607,#1608,#1609,#1610,#1611,#1612,#1613,#1614,#1615,#1616,#1617,#1618,#1619,#1620,#1621,#1622,#1623,#1624,#1625,#1626,#1627,#1628,#1629,#1630,#1631,#1632,#1633,#1634,#1635,#1636,#1637,#1638,#1639,#1640,#1641,#1642,#1643,#1644,#1645,#1646,#1647,#1648,#1649,#1650,#1651,#1652,#1653,#1654,#1655,#1656,#1657,#1658,#1659,#1660,#1661,#1662,#1663,#1664,#1665,#1666,#1667,#1668,#1669,#1670,#1671,#1672,#1673,#1674,#1675,#1676,#1677,#1678,#1679,#1680,#1681,#1682,#1683,#1684,#1685,#1686,#1687,#1688,#1689,#1690,#1691,#1692,#1693,#1694,#1695,#1696,#1697,#1698,#1699,#1700,#1701,#1702,#1703,#1704,#1705,#1706,#1707,#1708,#1709,#1710,#1711,#1712,#1713,#1714,#1715,#1716,#1717,#1718,#1719,#1720,#1721,#1722,#1723,#1724,#1725,#1726,#1727,#1728,#1729,#1730,#1731,#1732,#1733,#1734,#1735,#1736,#1737,#1738,#1739,#1740,#1741,#1742,#1743,#1744,#1745,#1746,#1747,#1748,#1749,#1750,#1751,#1752,#1753,#1754,#1755,#1756,#1757,#1758,#1759,#1760,#1761,#1762,#1763,#1764,#1765,#1766,#1767,#1768,#1769,#1770,#1771,#1772,#1773,#1774,#1775,#1776,#1777,#1778,#1779,#1780,#1781,#1782,#1783,#1784,#1785,#1786,#1787,#1788,#1789,#1790,#1791,#1792,#1793,#1794,#1795,#1796,#1797,#1798,#1799,#1800,#1801,#1802,#1803,#1804,#1805,#1806,#1807,#1808,#1809,#1810,#1811,#1812,#1813,#1814,#1815,#1816,#1817,#1818,#1819,#1820,#1821,#1822,#1823,#1824,#1825,#1826,#1827,#1828,#1829,#1830,#1831,#1832,#1833,#1834,#1835,#1836,#1837,#1838,#1839,#1840,#1841,#1842,#1843,#1844,#1845,#1846,#1847,#1848,#1849,#1850,#1851,#1852,#1853,#1854,#1855,#1856,#1857,#1858,#1859,#1860,#1861,#1862,#1863,#1864,#1865,#1866,#1867,#1868,#1869,#1870,#1871,#1872,#1873,#1874,#1875,#1876,#1877,#1878,#1879,#1880,#1881,#1882,#1883,#1884,#1885,#1886,#1887,#1888,#1889,#1890,#1891,#1892,#1893,#1894,#1895,#1896,#1897,#1898,#1899,#1900,#1901,#1902,#1903,#1904,#1905,#1906,#1907,#1908,#1909,#1910,#1911,#1912,#1913,#1914,#1915,#1916,#1917,#1918,#1919,#1920,#1921,#1922,#1923,#1924,#1925,#1926,#1927,#1928,#1929,#1930,#1931,#1932,#1933,#1934,#1935,#1936,#1937,#1938,#1939,#1940,#1941,#1942,#1943,#1944,#1945,#1946,#1947,#1948,#1949,#1950,#1951,#1952,#1953,#1954,#1955,#1956,#1957,#1958,#1959,#1960,#1961,#1962,#1963,#1964,#1965,#1966,#1967,#1968,#1969,#1970,#1971,#1972,#1973 V4 announcement, v3 is obsolete now.

adriandiaz · 2017-08-27T16:32:34Z

Has anyone figured a work around for this or has it been resolved? It seems like this issue still persists in v4

MartinCamen · 2017-12-15T13:37:33Z

It's working for me in an older version (3.38.0) but not in a newer project with a newer version (^4.0.0-beta.22)... Does anyone have any solution for this for v4?

lateau · 2018-04-12T16:06:16Z

Here's my solution on >=4.0.0-beta.

I suppose that we have three children on a tabbar and want to see default scene always when it's tapped.

Profile Menu
- Profile summary(default scene)
- Change your name
- Change password

<Scene
  tabs
  tabBarOnPress={(scene, jumpToIndex) => {
    const { route, focused } = scene;
    if (focused) return; // Skip transition when if a tab is already focused to prevent unwanted hard refresh.
    const { key } = route; // This is a key of a scene has been tapped.
    if (key === 'profile_summary' && route.routes.length > 1) { // You've leave a child scene before, excepts default.
      Actions.replace('profile_summary'); // This might be what you want to do. It will show you default scene with fresh state.
      return;
    }

   // Otherwise, jump to next scene has been tapped with a index
   jumpToIndex(scene.index);
  }}
>
  <Scene
    key="profile_tab"
  >
    <Scene key="profile_summary" ... />
    <Scene key="change_name" ... />
    <Scene key="change_password" ... />
  </Scene>
  <Scene
    key="another_tab"
  >
    ...
  </Scene>
</Scene>

Note that route.routes will always include default scene whether it is previously stacked or not. While Actions.replace(...) gives you fresh default scene(re-mounted), you might try jumpToIndex(route.routes[0].index) to display default screen you've seen little bit before.

aaron25mt · 2018-04-25T14:50:24Z

@lateau Solution looks good, I want to try it out but my tabBarOnPress function isn't getting called. Any suggestions?

E: For anyone else having issues with this, tabBarOnPress won't get called if you also have backToInitial set.
#2932

lateau · 2018-04-25T15:32:39Z

Hello @aaron25mt

That's weird. Did you try a Example project on this repository?
I don't try it but it might work. Add tabBarOnPress property into this Tabs: https://github.com/aksonov/react-native-router-flux/blob/master/Example/Example.js#L140

aaron25mt · 2018-04-25T18:07:39Z

@lateau Yes, I tried with an existing problem. Found my issue was that you cannot specify both tabBarOnPress and backToInitial as props to Tabs, but I found a fix. Thanks though!

cridenour added the enhancement label May 23, 2016

Olliepop mentioned this issue May 24, 2016

UPDATE: Pop tab children when tab is selected #729

Closed

Olliepop mentioned this issue Jun 2, 2016

Dispatching multiple actions within TabBar onSelect #771

Closed

adriandiaz mentioned this issue Mar 15, 2017

Prevent Tab Press from popping to Initial Scene #1703

Closed

ays0110 mentioned this issue Apr 20, 2017

tabs re-rendering when switching in 3.38.0 #1725

Closed

aksonov closed this as completed in 97e89ae Jul 8, 2017

aaron25mt mentioned this issue Apr 25, 2018

How to reset <Stack> from Tab on leave #2950

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tapping a tab should navigate to the default scene for that scene group #717

Tapping a tab should navigate to the default scene for that scene group #717

Olliepop commented May 22, 2016 •

edited

Loading

cridenour commented May 23, 2016

Olliepop commented May 23, 2016

cridenour commented May 23, 2016

joenoon commented May 23, 2016

Olliepop commented Jun 1, 2016 •

edited

Loading

Olliepop commented Jun 2, 2016 •

edited

Loading

Elyx0 commented Jun 8, 2016

nbolender commented Nov 13, 2016

itelo commented Nov 27, 2016

nbolender commented Nov 27, 2016

itelo commented Nov 27, 2016

nbolender commented Nov 27, 2016

AnsalAli-mudano commented Jan 3, 2017

arnsa commented Feb 27, 2017 •

edited

Loading

nbolender commented Feb 27, 2017

adriandiaz commented Aug 27, 2017

MartinCamen commented Dec 15, 2017

lateau commented Apr 12, 2018 •

edited

Loading

aaron25mt commented Apr 25, 2018 •

edited

Loading

lateau commented Apr 25, 2018

aaron25mt commented Apr 25, 2018

Tapping a tab should navigate to the default scene for that scene group #717

Tapping a tab should navigate to the default scene for that scene group #717

Comments

Olliepop commented May 22, 2016 • edited Loading

Version

Expected behaviour

Actual behaviour

Steps to reproduce

cridenour commented May 23, 2016

Olliepop commented May 23, 2016

cridenour commented May 23, 2016

joenoon commented May 23, 2016

Olliepop commented Jun 1, 2016 • edited Loading

Olliepop commented Jun 2, 2016 • edited Loading

Elyx0 commented Jun 8, 2016

nbolender commented Nov 13, 2016

itelo commented Nov 27, 2016

nbolender commented Nov 27, 2016

itelo commented Nov 27, 2016

nbolender commented Nov 27, 2016

AnsalAli-mudano commented Jan 3, 2017

arnsa commented Feb 27, 2017 • edited Loading

nbolender commented Feb 27, 2017

adriandiaz commented Aug 27, 2017

MartinCamen commented Dec 15, 2017

lateau commented Apr 12, 2018 • edited Loading

aaron25mt commented Apr 25, 2018 • edited Loading

lateau commented Apr 25, 2018

aaron25mt commented Apr 25, 2018

Olliepop commented May 22, 2016 •

edited

Loading

Olliepop commented Jun 1, 2016 •

edited

Loading

Olliepop commented Jun 2, 2016 •

edited

Loading

arnsa commented Feb 27, 2017 •

edited

Loading

lateau commented Apr 12, 2018 •

edited

Loading

aaron25mt commented Apr 25, 2018 •

edited

Loading