How to detect Scene change/tab change? #925

josh-deprogram · 2016-07-14T00:12:15Z

How do I detect when the current scene is in focus when changing routes?
The first time around componentDidMount is called but the components are not unMounted on scene change or additional route updates so there a method of knowing?

cridenour · 2016-07-14T18:05:31Z

Please see the Example app here: https://github.com/aksonov/react-native-router-flux/blob/master/Example/Example.js#L56

If you're using redux, you can follow this guide: https://github.com/aksonov/react-native-router-flux/blob/master/docs/REDUX_FLUX.md

brien-crean · 2016-07-15T00:54:39Z

@designbuildplay Further to what @cridenour suggested If you are using something like redux this is how I am detecting a tab change:

Listen for a "jump" action, and then change state in order to hook into one of the React lifecycle hooks like componentDidUpdate or componentWillReceiveProps.

// listen in reducer for tab1 selected
// Note: jump action is fired by defaultReducer attached to main Router (see example project)
case "jump":
      if(action.key=="tab1") {
        return {
          ...state,
          tab1: true
        }
      }

// reset tab1 to false (triggered by action call in component)
case TAB_ONE:
      return {
        ...state,
        tab1: false,
      }

// Tab 1 Component
  componentDidUpdate(prevProps) {
    // on tab1 press
    if(this.props.tab1) {
      console.log("Tab 1 Pressed")
      // fires TAB_ONE action
      this.props.resetTab()
    }
  }

irisSchaffer · 2016-07-29T08:43:27Z

One problem with this approach is that you need to add a new variable for every new tab you introduce. Furthermore, this only applies for tabs.
The question was

How do I detect when the current scene is in focus when changing routes?

While it is possible to listen for JUMP on a switch of tabs, listening to FOCUS won't do the trick, because the focused scene after a jump seems to be the parent tabs scene.

I'm now wondering – since we get a prop selected on the tab icon, wouldn't it be easy enough to have a similar property on a scene-level?

asrytis · 2016-08-12T12:58:20Z

The lack of onEnter/onLeave support is very inconvenient. Say I need some data refreshed whenever user gets to the Home screen. I can't think of a better way than doing the following:

componentWillReceiveProps(nextProps) {
    const scene = this.props.router.scene.key;
    const nextScene = nextProps.router.scene.key;

    if (scene !== nextScene && nextScene === this.props.sceneKey) {
        // This component is getting focused
        this.props.refreshData();
    }
}

This is ugly and I don't want to see this code in every component that needs to act on something when the scene gets focused. Few solutions come to my mind neither of which I am happy with:

capture & act upon router actions in custom middleware
create a base class that will run the check and call componentDidFocus()

Any thoughts on this anyone?
Edit: I'm using Redux

cridenour · 2016-08-12T20:04:44Z

@asrytis Are you leveraging the reducer in your app? This type of logic shouldn't be something that lives on your component. If there are issues with the reducer stopping you from using it, I think that would be the best place for us to start.

asrytis · 2016-08-12T20:36:07Z

@cridenour I do have reducers but those aren't meant for API calls. The way I'd do this in a web app is either use onEnter hook in a Route definition:

<Route path="home" component={Home} onEnter={doWhateverAPICallsINeed} />

or leverage one of component lifecycle methods, such as

componentWillMount() {
    callWhateverApiINeed();
}

The problem with react native router is I don't have neither of these options. Scenes never get unmounted and there is no alternative to onEnter other than performing the checks I posted above. I went with custom middleware for now but I'd love to hear how others tackle this issue.

josh-deprogram · 2016-08-13T11:04:31Z

@aksonov It would be a great feature if Scenes where destroyed (Unmounted) on scene change, even if this was not default but a Prop option. Having a lot of scenes constantly mounted also can easily hit performance issues once navigating round an app if you aren't careful with shouldComponentUpdate()

cridenour · 2016-08-13T14:22:48Z

I believe that would have to be something built into react-native. This library lives on top of NavigationExperimental.

tonyneel923 · 2016-08-15T01:12:20Z

@cridenour for the reducer I am correct in understanding it is possible to use altjs for this? If so how would I learn to do this? I do not have any experience with redux so I am having issues understanding how to use alt.

cridenour · 2016-08-15T06:04:18Z

@tonyneel923 Definitely. In your custom reducer function like https://github.com/aksonov/react-native-router-flux/blob/master/Example/Example.js#L59 then you can call AltJS actions to save the current scene.

Your stores can listen for these actions and act appropriately.

tonyneel923 · 2016-08-15T21:35:00Z

    const reducerCreate = params=>{
      const defaultReducer = Reducer(params);
      console.log(params)
      return (state, action)=>{
          ConfigActions.setCurrentRoute(action.scene.name);
          return defaultReducer(state, action);
        }
    }

@cridenour Something like this? Thanks for the help.

cridenour · 2016-08-16T02:52:43Z

@tonyneel923 Yup! Then in your various stores that your components listen to, bind to the ConfigActions.SET_CURRENT_ROUTE action and determine if you care about that scene. So if you have a "News" component and store, and you want to refresh every time they enter, then the NewsStore would bind to that action and determine whether to refresh when receiving that action.

cridenour · 2016-08-16T02:53:28Z

Also, for Alt specifically, if you already have the updated data but want to just have the component refresh, you can use this.emitChange()

josh-deprogram · 2016-08-21T22:45:02Z

@parkerdan the focus method is not reliable if you have sub set Scene such as scenes within tabs, then it is the tab scene container that gets focused . The question I was asking is regarding a way to detect scene change on tab change

stereodenis · 2016-09-08T20:35:22Z

componentDidMount() {
  InteractionManager.runAfterInteractions(() => {
    this.setState({ ready: true })
  })
}

afilp · 2016-09-12T00:02:05Z

I get undefined is not an object when evaluating action.scene.name. What is wrong?

monumentyusuf · 2017-02-07T09:06:18Z

@afilp Because it fires two different object as you can see below;

Object {key: "AlbumsTab", type: "REACT_NATIVE_ROUTER_FLUX_JUMP"}
Object {scene: [Object], type: "REACT_NATIVE_ROUTER_FLUX_FOCUS"}

You have to check scene object first like;

if(action.scene){
  console.log(action.scene.name);
}

RNRF v3.37.0

AndrewHenderson · 2017-02-09T04:44:04Z

I'm working on this issue at the moment. Has anyone made any progress on it?

mandycandyqt · 2017-02-09T16:03:28Z

@designbuildplay did you figure out how to ensure that components unmount on scene transitions?

AndrewHenderson · 2017-02-13T23:39:51Z

@bulkyracehorse512 Scenes within your root never unmount. For instance, if you're using tabs at the foundation of your application, those scenes will live with the lifecycle of the application itself.

I use Redux to render those scenes whenever the data changes.

afilp · 2017-02-14T09:16:00Z

@designbuildplay What do you mean " if you aren't careful with shouldComponentUpdate()"?

I am also worried of tens of screens remaining on the memory just for being available for a POP action. What is the best practice for this? Do you use shouldComponentUpdate() extensibly on every component, if yes how? Thanks!

booboothefool · 2017-03-14T19:14:09Z

I think this would help my performance issues: #1659

UPDATE:
Holy crap @josh-deprogram, thanks for the shouldComponentUpdate() tip. My app has a ton of tabs with long lists in each, and thanks to what you said, I just discovered that all previously mounted tabs are being re-rendered no matter which tab you go to.

For example,
[Tab 1][Tab 2][Tab 3][ Tab 4][Tab 5][Tab 6]

Go to Tab 4
Go to Tab 2
=> Tab 4 gets componentWillReceiveProps() and re-render()

so that means if you:

Go to Tab 1, 2, 3, 4, 5, 6
Go to Tab 3
=> Tab 1, 2, 4, 5, 6 gets componentWillReceiveProps() and re-render() !!!

I think that would help explain why when you load all of the tabs in my app, it explodes? It's because when you click on a different tab... it re-renders all tabs that were previously mounted.

I'm been stuck and unable to figure out these performance issues for months. Might just now have gotten somewhere.

@afilp My app definitely has huge memory issues. Like tons of people on the Android Google Play store complain that it just eats their RAM and they have to uninstall. I think this may have to do with it...

…#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.

roots-ai · 2019-03-11T05:52:22Z

Please see the Example app here: https://github.com/aksonov/react-native-router-flux/blob/master/Example/Example.js#L56

If you're using redux, you can follow this guide: https://github.com/aksonov/react-native-router-flux/blob/master/docs/REDUX_FLUX.md

Links are broken.

Samykills · 2019-07-24T10:38:25Z

A simple solution to this is using the attribute onEnter of the in router

For eg:
<Tabs key="mainTabScreen" hideNavBar hideTabBar lazy swipeEnabled={true} tabBarComponent={() => null} tabBarPosition="top" > <Scene key="profileScreen" component={ProfileScreen} hideNavBar onEnter={() => { console.warn("profile"); }} /> <Scene key="homeScreen" component={HomeScreen} hideNavBar onEnter={() => { console.warn("profile"); }} /> </Tabs>

This will always trigger when u swipe for tab change

irisSchaffer mentioned this issue Jul 29, 2016

How do I get the current scene? #978

Closed

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

How to detect Scene change/tab change? #925

How to detect Scene change/tab change? #925

josh-deprogram commented Jul 14, 2016

cridenour commented Jul 14, 2016

brien-crean commented Jul 15, 2016

irisSchaffer commented Jul 29, 2016 •

edited

Loading

asrytis commented Aug 12, 2016 •

edited

Loading

cridenour commented Aug 12, 2016

asrytis commented Aug 12, 2016

josh-deprogram commented Aug 13, 2016

cridenour commented Aug 13, 2016

tonyneel923 commented Aug 15, 2016

cridenour commented Aug 15, 2016

tonyneel923 commented Aug 15, 2016

cridenour commented Aug 16, 2016

cridenour commented Aug 16, 2016

josh-deprogram commented Aug 21, 2016 •

edited

Loading

stereodenis commented Sep 8, 2016

afilp commented Sep 12, 2016

monumentyusuf commented Feb 7, 2017

AndrewHenderson commented Feb 9, 2017

mandycandyqt commented Feb 9, 2017

AndrewHenderson commented Feb 13, 2017 •

edited

Loading

afilp commented Feb 14, 2017

booboothefool commented Mar 14, 2017 •

edited

Loading

roots-ai commented Mar 11, 2019

Samykills commented Jul 24, 2019 •

edited

Loading

How to detect Scene change/tab change? #925

How to detect Scene change/tab change? #925

Comments

josh-deprogram commented Jul 14, 2016

cridenour commented Jul 14, 2016

brien-crean commented Jul 15, 2016

irisSchaffer commented Jul 29, 2016 • edited Loading

asrytis commented Aug 12, 2016 • edited Loading

cridenour commented Aug 12, 2016

asrytis commented Aug 12, 2016

josh-deprogram commented Aug 13, 2016

cridenour commented Aug 13, 2016

tonyneel923 commented Aug 15, 2016

cridenour commented Aug 15, 2016

tonyneel923 commented Aug 15, 2016

cridenour commented Aug 16, 2016

cridenour commented Aug 16, 2016

josh-deprogram commented Aug 21, 2016 • edited Loading

stereodenis commented Sep 8, 2016

afilp commented Sep 12, 2016

monumentyusuf commented Feb 7, 2017

AndrewHenderson commented Feb 9, 2017

mandycandyqt commented Feb 9, 2017

AndrewHenderson commented Feb 13, 2017 • edited Loading

afilp commented Feb 14, 2017

booboothefool commented Mar 14, 2017 • edited Loading

roots-ai commented Mar 11, 2019

Samykills commented Jul 24, 2019 • edited Loading

irisSchaffer commented Jul 29, 2016 •

edited

Loading

asrytis commented Aug 12, 2016 •

edited

Loading

josh-deprogram commented Aug 21, 2016 •

edited

Loading

AndrewHenderson commented Feb 13, 2017 •

edited

Loading

booboothefool commented Mar 14, 2017 •

edited

Loading

Samykills commented Jul 24, 2019 •

edited

Loading