Help With Drawer Menu #1750

jigarmistry · 2017-03-30T10:13:01Z

Can anybody provide me example of how we can integrate the react-native-drawer with the router flux ?

I have used example provided in OTHER_INFO but when I call any screen which has drawer its not calling by Actions.ACTION_NAME.

Any example for the same would be great for me.

I have used like this..

Example is my screen and I have used like this.

<Scene key="drawer" component={NavigationDrawer} open={false} >
       <Scene
            key="Example"
            component={Example1}
            title="Example"
            hideNavBar={false}
        />
</Scene>

Now if I call screen using Actions.Example, it is not working. Nothing happen.

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

jigarmistry · 2017-03-30T13:19:25Z

Any Help ? Anybody integrate the latest router flux with drawer ?

filipemonteiroth · 2017-03-30T13:31:13Z

@jigarmistry I've used the example and it works perfectly.

NavigationDrawer.js

import React, { Component } from 'react';
import Drawer from 'react-native-drawer';
import SideMenu from './SideMenu';
import {Actions, DefaultRenderer} from 'react-native-router-flux';

export default class NavigationDrawer extends Component {
    render(){
        const state = this.props.navigationState;
        const children = state.children;
        return (
            <Drawer
                ref="navigation"
                open={state.open}
                onOpen={()=>Actions.refresh({key:state.key, open: true})}
                onClose={()=>Actions.refresh({key:state.key, open: false})}
                type="displace"
                content={<SideMenu />}
                tapToClose={true}
                openDrawerOffset={0.2}
                panCloseMask={0.2}
                negotiatePan={true}
                styles={drawerStyles}
                tweenHandler={(ratio) => {
                  return {
                    mainOverlay: { opacity: ratio === 0 ? 0 : 0.3, backgroundColor: '#000' }
                  }
                }}
                // tweenHandler={Drawer.tweenPresets.parallax}
                >
                <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
            </Drawer>
        );
    }
}

const drawerStyles = {
    drawer: {
        shadowColor: '#000', shadowOpacity: 0.3, shadowRadius: 1
    },
    main: { paddingLeft: 0 }
}

SideMenu.js is a simple component with render method returning a single view.

Simple route.

Router.js

<Scene key="drawer" type={ActionConst.RESET} component={NavigationDrawer} open={false} > <Scene key="main" initial> <Scene key="dashboard" component={Dashboard} title="Dashboard" hideNavBar={false} initial /> </Scene>

jigarmistry · 2017-03-30T13:38:06Z

@filipemonteiroth Thanks for the solution.

How do you call the dashboard component using Actions ? I mean if I want to call the dashboard after login then how do I call ? Actions.dashboard will work ?

In my case it is not working. My dashboard component is not the initial one.

And what is ActionConst ?

filipemonteiroth · 2017-03-30T13:41:01Z

ActionConst is a set of strings provided by the lib. Just import it like you do with actions.

To call dashboard, I just use Actions.dashboard()

Somehow if you call something from the menu, it doesn't close when the new screen shows.

I'm closing the drawer when my component will mount, just like

componentWillMount () {
    Actions.refresh({key: 'drawer', open: false });
}

jigarmistry · 2017-03-30T13:43:50Z

Thanks,

But is it still working if dashboard is not the initial component ? In my case it is not the initial component. I do have a same setup.

filipemonteiroth · 2017-03-30T13:46:13Z

Yeah, working fine.

jigarmistry · 2017-03-30T13:50:09Z

Thanks a lot. I will try this way.

But in my case when I call Actions.dashboard() nothing happens.

How do you manage to open the drawer from left button click in navigation bar?

filipemonteiroth · 2017-03-30T13:50:52Z

It should work already without any action.

jigarmistry · 2017-03-30T13:52:36Z

Ok. I will try and let you know if I got any problem or I will share a small snippet of code with you for the same.

Thanks for the support and time.

kyleseaman · 2017-03-30T14:56:33Z

@jigarmistry I use the following to open/close the drawer from any screen

closerDrawer = () => {
    Actions.refresh({key: 'drawer', open: false });
  };

  openDrawer = () => {
    Actions.refresh({key: 'drawer', open: true });
  }

My left button is setup as follows

<TouchableOpacity onPress={this.openDrawer}>
  <Image
    resizeMode='contain'
    source={{uri: 'menuBtn'}}
  />
</TouchableOpacity>

And as mentioned above, once you call Actions.dashboard(), in dashboard call

componentWillMount () {
    Actions.refresh({key: 'drawer', open: false });
}

There is an issue when calling two Actions in a row, so if you have a component that wants to load a dashboard from the drawer and then close the drawer, you can use the following

Actions.dashboard({ title: title });
setTimeout(() => Actions.refresh({ key: 'drawer', open: false }), 0)

Finally, you can set type='replace' when you create your Scenes if you want the navigation stack to have a new root. For example:

<Scene key='Login' component={Login} title='Login' hideNavBar type='replace' />

jigarmistry · 2017-03-30T15:56:33Z

@kyleseaman Thanks for the detailed solution. I appreciate your answer. Its sounds good to me.

@filipemonteiroth I have tried that and come to know that I have problem in router setup. That is now solved and it is finally working. Thanks a lot.

jigarmistry · 2017-03-30T16:12:54Z

It is working but its every time taking the first actions as first actions in scene under the drawer.

In my case I have following in router.js

<Scene key="drawer" type={ActionConst.RESET} component={NavigationDrawer} open={false} > 
        <Scene key="sidemenu">
          <Scene
            key="Dashboard"
            component={Dashboard}
            title="Dashboard"
            hideNavBar={false}
          />
          <Scene
            key="Profile"
            component={Profile}
            title="Profile"
            hideNavBar={false}
          />
          <Scene
            key="Hisotry"
            component={Hisotry}
            title="Hisotry"
            hideNavBar={false}           
          />
        </Scene>
      </Scene>

So when I run the app its every time going into dashboard. but I need to go to history first.

kyleseaman · 2017-03-30T16:18:30Z

@jigarmistry if you want History to be first, you should pass the initial prop.

My scene structure looks like:

<Scene key='root'>
  <Scene key='drawer' component={Drawer} open={false}>
    <Scene key='dashboard' component={Dashboard} type='replace' ... />
    <Scene key='history' initial component={History} type='replace' ... />
  </Scene>
</Scene>

jigarmistry · 2017-03-30T16:20:07Z

I am handling the screen movement in using actions. That is if something true then I need to go to history otherwise login.

How I can handle this ?

if (status) {
    Actions.History();    
}else{
    Actions.SignIn();
}

kyleseaman · 2017-03-30T16:24:12Z

I would suggest having an initial Scene to handle this. I have an <InitialLoad />, which presents a loading screen while determining where to send the user. Either to Login, Dashboard, History etc.

jigarmistry · 2017-03-30T16:26:19Z

Sounds good to me. Can you share me small snippet for that ? How it is actually working ?

kyleseaman · 2017-03-30T16:28:16Z

In InitialLoad on componentWillMount() I have my check for the user and then call the appropriate action, either Action.Login() or Action.OtherRoute()

jigarmistry · 2017-03-30T16:30:46Z

What do you mean by In InitialLoad on componentWillMount() ? You mean to the first screen where we need to check ? In our case login ?

kyleseaman · 2017-03-30T16:33:26Z

InitialLoad is a React Component

<Scene key=`initialLoad` component={InitialLoad} initial type='replace />

It's called before anything else, so in it's componentWillMount() I perform the checks necessary to load the proper Scene for the user.

jigarmistry · 2017-03-30T16:35:07Z

And you have this as the initial scene among all the scenes and it is not having anything extra. Is it ?

kyleseaman · 2017-03-30T16:36:35Z

Correct, it looks something like this

<Scene key='root'>
  <Scene key='drawer' component={Drawer} open={false}>
    <Scene key='dashboard' component={Dashboard} type='replace' ... />
    <Scene key='login' component={Login} type='replace' ... />
    <Scene key='initialLoad' component={InitialLoad} type='replace' initial ... />
    <Scene key='history' component={History} type='replace' ... />
  </Scene>
</Scene>

jigarmistry · 2017-03-30T16:38:54Z

Yeah.. But what if I do not need a drawer in all the scenes ? Only in History one ?

kyleseaman · 2017-03-30T16:45:30Z

You should be able to just nest the other Scenes outside of the Drawer Scene, but I haven't implemented this. I just hide the Drawer button on the Login scene.

jigarmistry · 2017-03-30T16:50:06Z

That's not working.. I think hide the navbar will be the trick..

AAverin · 2017-03-31T12:29:47Z

For me navbar is always invisible if I run on Android.
Any tips?

xhou · 2017-05-10T03:54:40Z

@AAverin I got the same issue. I resolved with help of this thread
#1354

swedge218 · 2017-05-12T19:25:12Z

@filipemonteiroth Where do I need to place this snippet of code:

<Scene key="drawer" type={ActionConst.RESET} component={NavigationDrawer} open={false} > <Scene key="main" initial> <Scene key="dashboard" component={Dashboard} title="Dashboard" hideNavBar={false} initial /> </Scene>

I have put it in my application Router Setup but it does not work. I get the same problem - nothing happens when i call Actions.map from another Component. I have the Drawer Component set up as you showed but it seems I am setting the Router up wrongly.

valerybodak · 2017-05-23T12:32:40Z

@filipemonteiroth

I try to use react-native-drawer (https://github.com/root-two/react-native-drawer) in my app with react-native-router-flux

According to the documentation I've added my scene with drawer to the Router:

import NavigationDrawer from './scenes/NavigationDrawer';
import MetricsScene from './scenes/MetricsScene';

<Router>
     <Scene key="root">
         <Scene key="login"
             component={LoginScene}
             hideNavBar={true}
             initial
         />
         <Scene key="drawer" component={NavigationDrawer} open={false} >
             <Scene key="metrics" component={MetricsScene}/>
         </Scene>
     </Scene>
</Router>

In my LoginScene I call:
Actions.metrics({type: ActionConst.RESET});
after press on Login button, but NOTHING happens.

Any ideas? Thanks in advance.

swedge218 · 2017-05-23T12:51:35Z

@valerybodak This issue seems like it affects many people including me.

What I had to do later was to wrap my Router and Scenes in the the tag.

See full details on stackoverflow answer here

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

phantom1299 · 2017-07-28T13:26:45Z

Hi, I implemented the Drawer from router-flux v4.0.0-beta.14 like this:
(I couldnt find any info on how to implement the new version, tried to implement it like in the Example App. Hope this helps other people.)

RouterComponent.js:
(This is my root component)

import React from 'react';
import { Scene, Router } from 'react-native-router-flux';
import LoginForm from './components/LoginForm';
import Home from './components/Home';
import Profile from './components/Profile';
import SideMenu from './SideMenu';
import Settings from './components/Settings';

const RouterComponent = () => {
    return (
        <Router>
            <Scene overlay>
                <Scene key="lightbox" lightbox leftButtonTextStyle={{ color: 'green' }} backButtonTextStyle={{ color: 'red' }} initial>
                    <Scene key="modal" modal hideNavBar>
                        <Scene key="auth" initial>
                            <Scene key="login" component={LoginForm} title="Please Login" titleStyle={{ textAlign: 'center' }} />
                        </Scene>
                        <Scene key="drawer" drawer contentComponent={SideMenu}>
                            <Scene key="main" >
                                <Scene
                                    key="home"
                                    component={Home}
                                    title="Home"
                                    initial
                                />
                                <Scene
                                    key="profile"
                                    component={Profile}
                                    title="Profile"
                                />
                                <Scene
                                    key="settings"
                                    component={Settings}
                                    title="Settings"
                                />
                            </Scene>
                        </Scene>
                    </Scene>
                </Scene>
            </Scene>
        </Router>
    );
};

export default RouterComponent;

Where Home, Settings, Profile and LoginForm are usual components. And SideMenu is (yes :)) my side-menu.
SideMenu.js:

import React, { Component, PropTypes } from 'react';
import { StyleSheet, Text, View, ViewPropTypes } from 'react-native';
import { connect } from 'react-redux';
import { Actions } from 'react-native-router-flux';
import Button from 'react-native-button';
import { CardSection } from '../src/components/common';

const contextTypes = {
  drawer: React.PropTypes.object,
};

const propTypes = {
  name: PropTypes.string,
  sceneStyle: ViewPropTypes.style,
  title: PropTypes.string,
};

const styles = StyleSheet.create({
  viewContainer: {
    flex: 1,
    backgroundColor: '#fff'
  },
  container: {
    padding: 15,
    height: 45,
    overflow: 'hidden',
    alignSelf: 'flex-start',
  },
  textStyle: {
    fontSize: 18,
    color: '#555',
  },
  nameContainer: {
    padding: 15,
    height: 45,
    overflow: 'hidden',
    alignSelf: 'flex-start',
  },
  name: {
    fontSize: 22,
    color: '#555',
    fontWeight: '400',
  }
});

class SideMenu extends Component {
  render() {
    return (
      <View style={[styles.viewContainer, this.props.sceneStyle]}>
        <CardSection style={{ flexDirection: 'column', padding: 30 }}>
          <Button
            containerStyle={styles.container}
            style={styles.name}
            onPress={() => { Actions.profile(); }}
          >User Name</Button>
        </CardSection>
        <CardSection style={{ flexDirection: 'column' }}>
          <Button
            containerStyle={styles.container}
            style={styles.textStyle}
            onPress={() => { Actions.home(); }}
          >Home Page</Button>
        </CardSection>
        <CardSection style={{ flexDirection: 'column', borderBottomWidth: 0, }}>
          <Button
            containerStyle={styles.container}
            style={styles.textStyle}
            onPress={() => Actions.settings()}
          >Settings</Button>
          <Button
            containerStyle={styles.container}
            style={styles.textStyle}
            onPress={() => Actions.auth()}
          >Log Out</Button>
        </CardSection>
      </View>
    );
  }
}

SideMenu.contextTypes = contextTypes;
SideMenu.propTypes = propTypes;

export default SideMenu;

CardSection is just a custom component for styling.
CardSection.js:

import React from 'react';
import { View } from 'react-native';

const CardSection = (props) => {
    return (
        <View style={[styles.containerStyle, props.style]} >
            {props.children}
        </View>
    );
};

const styles = {
    containerStyle: {
        borderBottomWidth: 1,
        padding: 5,
        backgroundColor: '#fff',
        justifyContent: 'flex-start',
        flexDirection: 'row',
        borderColor: '#ddd',
        position: 'relative'
    }
};

export { CardSection };

Version:

    "react": "16.0.0-alpha.12",
    "react-native": "0.46.4",
    "react-native-button": "^2.1.0",
    "react-native-router-flux": "^4.0.0-beta.14",

Elgon2408 · 2017-08-29T08:21:34Z

@phantom1299, Did everything according to your example, but I have such an error

preetampatil3d · 2017-09-12T07:33:53Z

Thanks lot @phantom1299 ,

i am using
"react": "16.0.0-alpha.12",
"react-native": "^0.46.1",
"react-native-router-flux": "^4.0.0-beta.15",
"react-redux": "^4.4.5",
"redux": "^3.5.2",
"redux-thunk": "^2.2.0"

I was struggling for drawer, Your example saved me. . .

Can you please tell me where can i find documentation for this . ?

Currently drawer appear on all pages & on left side but i want drawer for home page(main page) only and on right side.

Thanks in Advance .

phantom1299 · 2017-09-16T13:20:14Z

Sorry for the late reply, I somehow didn't see the email notifcation send to me by github.

@GazizovRuslan, I cant say anything without more information, maybe you forgot to export one of your components as it says in the error message.

@preetampatil3d, glad I could save you the struggle^^.

All child scenes of a scene with the drawer property will have the drawer and the drawer button. You can add the "back" property on a scene so it doesn't has the drawer button (but you will still be able to bring the drawer by sliding). I don't know how to make the drawer button on the right, checked the docs a little bit with no success.

In the router flux repository, there are different branches and one of them, the v4-docs branch seems to have more information about router-flux v4. Maybe you can find it there. I didn't check the other branches but experimenting with the example can help.

aligumustosun · 2017-09-23T19:00:47Z

@phantom1299 Thanks. It worked :)) You saved my project

SunSet1219 · 2017-09-28T16:12:01Z

@phantom1299 How to use Drawer on react-native-router-flux V4?
I am going to upgrade RNRF to V4 from V3.

AndrewMarkley · 2017-09-29T19:01:43Z

@SunSet1219
Check out this example from the breaking changes section
https://github.com/aksonov/react-native-router-flux/blob/v4/Example/Example.js

change component => contentComponent

traxx10 · 2017-09-30T08:24:45Z

i tried your solution but then when i toggle my navigation, i dont have a nav bar

phantom1299 · 2017-10-01T17:46:09Z

@SunSet1219 I never used v3 so I don't know what changed, but the example AndrewMarkley send you should help.

@traxx10 hmm, can you show your router component? Maybe you navigate to a Scene which has the "hidenavbar" property set to true?

vijaychouhan-rails · 2017-10-26T08:45:01Z

@jigarmistry
Find the example at https://github.com/vijaychouhan-rails/AllInOne

preetampatil3d · 2017-11-21T10:51:42Z

@phantom1299 Thanks, I have added back={true} in Scene where want to hide drawer and display 'BACK' icon and its worked. But when i swipe back from inner scene it opens drawer instead of going back. (I need click back button only to go back).

Can you please help me with this.
Thanks

ishaqashraf · 2017-11-29T09:04:20Z

@preetampatil3d
you need to add the onback function like this
<Scene
key="addwork"
component={AddWork}
title="Create New Work Order"
back={true}
onBack={() => Actions.pop()}
backButtonTintColor="white"

/>

alexmartin2298 · 2017-12-27T21:45:13Z

@phantom1299 @ishaqashraf
I'm having an issue using react-native-router-flux along with react-native-drawer. The code compiles but the drawer does not open for some reason. The render method in the Drawer component never seems to execute. I've been stuck for hours on this bug, and couldn't find any similar issues on the internet. Just wondering if I could have missed.

Drawer.js
`export default class MyDrawer extends Component<{}> {
drawerContent() {
return (...//drawerContent//...);
}
render() {
const state = this.props.navigationState;
const children = state.children;

return (
  <Drawer
    open={state.open}
    onOpen={()=>Actions.refresh({key:state.key, open: true})}
    onClose={()=>Actions.refresh({key:state.key, open: false})}
    content={this.drawerContent()}
    tapToClose={true}
    openDrawerOffset={0.2}
    panCloseMask={0.2}
    closedDrawerOffset={-3}
  >
    <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
  </Drawer>
);

}
}`

export default class App extends Component<{}> { render() { return ( <Router> <Scene key="root"> <Scene key="pageThatCallsDrawer" component={PageThatCallsDrawer}/> <Scene key="myDrawer" type={ActionConst.RESET} contentComponent={MyDrawer} open={true}> <Scene key="firstOption" component={FirstOption}/> <Scene key="secondOption" component={SecondOption}/> <Scene key="thirdOption" component={ThirdOption}/> </Scene> </Scene> </Router> ); } }

jaysassyinfotech · 2018-01-03T05:50:07Z

@phantom1299 @jigarmistry @filipemonteiroth @AAverin
SideBar.js

import React from "react";
import { AppRegistry, Image, StatusBar, ImageBackground } from "react-native";
import {
    Button,
    Text,
    Container,
    List,
    ListItem,
    Content,
    Icon
} from "native-base";
const routes = ["Home", "Profile","NextPage"];

export default class SideBar extends React.Component {
    render() {
        return (
            <Container>
                <Content> 
                    <ImageBackground
                        source={require('../../../assets/drawer-cover.png')}
                        style={{
                            height: 120,
                            alignSelf: "stretch",
                            justifyContent: "center",
                            alignItems: "center"
                        }}
                    >
                        <ImageBackground
                            square
                            style={{ height: 80, width: 70 }}
                            source={require('../../../assets/logo.png')}
                        />
                    </ImageBackground>
                </Content>
            </Container>
        );
    }
}

NavigationDrawer.js

import React, { Component } from 'react';
import Drawer from 'react-native-drawer';
import SideBar from './SideBar';
import {Actions, DefaultRenderer} from 'react-native-router-flux';

export default class NavigationDrawer extends Component {
    render(){
        const state = this.props.navigationState;
        const children = state.children;
        console.log("NavigationDrawer >> state >>",state)
        console.log("NavigationDrawer >> children >>",children)
        return (
            <Drawer
                ref="navigation"
                open={state.open}
                onOpen={()=>Actions.refresh({key:state.key, open: true})}
                onClose={()=>Actions.refresh({key:state.key, open: false})}
                type="displace"
                content={<SideBar />}
                tapToClose={true}
                openDrawerOffset={0.2}
                panCloseMask={0.2}
                negotiatePan={true}
                styles={drawerStyles}
                tweenHandler={(ratio) => {
                  return {
                    mainOverlay: { opacity: ratio === 0 ? 0 : 0.3, backgroundColor: '#000' }
                  }
                }}
                >
                <DefaultRenderer navigationState={children[0]} onNavigate={this.props.onNavigate} />
            </Drawer>
        );
    }
}

const drawerStyles = {
    drawer: {
        shadowColor: '#000', shadowOpacity: 0.3, shadowRadius: 1
    },
    main: { paddingLeft: 0 }
}

Applications.js

import React from 'react';
import { Router, Scene,Drawer,ActionConst } from 'react-native-router-flux';
import Login from './Login/Login';
import Profile from './Profile/Profile';
import NextPage from './NextPage/NextPage';
import Home from './Home/Home';
import SideBar from './Home/SideBar';
import NavigationDrawer from './Home/NavigationDrawer';

class Appllication extends React.Component {
    render() {
        return (
            <Router hideNavBar="true"> 
                <Scene key="root">
                    <Scene key="Login" component={Login} initial={true} hideNavBar/>
                    <Scene key="Home" component={Home} title="Home" hideNavBar/>
                    <Scene key="drawer" type={ActionConst.RESET} component={NavigationDrawer} open={false} > 
                        <Scene key="main"> 
                            <Scene key="Profile" 
                                component={Profile} 
                                title="Profile" 
                                hideNavBar={false} /> 
                            <Scene key="NextPage" 
                                component={NextPage} 
                                title="NextPage" 
                                hideNavBar={false} /> 
                        </Scene>
                    </Scene>
                </Scene>
            </Router>
        );
    }
}

export default Appllication;

Hear i include 3 file Applications.js , NavigationDrawer.js and Side bar js. When i click on drawer button using this <Button transparent onPress={() => Actions.drawer() } >. Drawer not open in view some error face TypeError: undefined is not an object (evaluating 'state.children'). How to solve that?

ghost · 2018-02-15T05:02:25Z

@jigarmistry can you provide some basic example.

remoteportal · 2018-03-12T15:59:01Z

Are there TWO different versions of Drawer? Perhaps version 3 and version 4. The version 4 API doesn't mesh with many of these examples.

jigarmistry closed this as completed Mar 30, 2017

jigarmistry reopened this Mar 30, 2017

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

Help With Drawer Menu #1750

Help With Drawer Menu #1750

Comments

jigarmistry commented Mar 30, 2017 • edited Loading

jigarmistry commented Mar 30, 2017

filipemonteiroth commented Mar 30, 2017 • edited Loading

jigarmistry commented Mar 30, 2017 • edited Loading

filipemonteiroth commented Mar 30, 2017

jigarmistry commented Mar 30, 2017 • edited Loading

filipemonteiroth commented Mar 30, 2017

jigarmistry commented Mar 30, 2017 • edited Loading

filipemonteiroth commented Mar 30, 2017

jigarmistry commented Mar 30, 2017

kyleseaman commented Mar 30, 2017

jigarmistry commented Mar 30, 2017

jigarmistry commented Mar 30, 2017

kyleseaman commented Mar 30, 2017

jigarmistry commented Mar 30, 2017 • edited Loading

kyleseaman commented Mar 30, 2017 • edited Loading

jigarmistry commented Mar 30, 2017

kyleseaman commented Mar 30, 2017

jigarmistry commented Mar 30, 2017

kyleseaman commented Mar 30, 2017

jigarmistry commented Mar 30, 2017

kyleseaman commented Mar 30, 2017 • edited Loading

jigarmistry commented Mar 30, 2017

kyleseaman commented Mar 30, 2017

jigarmistry commented Mar 30, 2017

AAverin commented Mar 31, 2017

xhou commented May 10, 2017

swedge218 commented May 12, 2017 • edited Loading

valerybodak commented May 23, 2017 • edited Loading

swedge218 commented May 23, 2017

phantom1299 commented Jul 28, 2017 • edited Loading

Elgon2408 commented Aug 29, 2017

preetampatil3d commented Sep 12, 2017

phantom1299 commented Sep 16, 2017

aligumustosun commented Sep 23, 2017

SunSet1219 commented Sep 28, 2017 • edited Loading

AndrewMarkley commented Sep 29, 2017

traxx10 commented Sep 30, 2017

phantom1299 commented Oct 1, 2017

vijaychouhan-rails commented Oct 26, 2017

preetampatil3d commented Nov 21, 2017 • edited Loading

ishaqashraf commented Nov 29, 2017

alexmartin2298 commented Dec 27, 2017 • edited Loading

jaysassyinfotech commented Jan 3, 2018 • edited Loading

ghost commented Feb 15, 2018

remoteportal commented Mar 12, 2018

jigarmistry commented Mar 30, 2017 •

edited

Loading

filipemonteiroth commented Mar 30, 2017 •

edited

Loading

jigarmistry commented Mar 30, 2017 •

edited

Loading

jigarmistry commented Mar 30, 2017 •

edited

Loading

jigarmistry commented Mar 30, 2017 •

edited

Loading

jigarmistry commented Mar 30, 2017 •

edited

Loading

kyleseaman commented Mar 30, 2017 •

edited

Loading

kyleseaman commented Mar 30, 2017 •

edited

Loading

swedge218 commented May 12, 2017 •

edited

Loading

valerybodak commented May 23, 2017 •

edited

Loading

phantom1299 commented Jul 28, 2017 •

edited

Loading

SunSet1219 commented Sep 28, 2017 •

edited

Loading

preetampatil3d commented Nov 21, 2017 •

edited

Loading

alexmartin2298 commented Dec 27, 2017 •

edited

Loading

jaysassyinfotech commented Jan 3, 2018 •

edited

Loading