slide 1:

Skyward​ ​Softwares ​ ​ ​ ​Solutions     Step ​ ​By ​ ​Step ​ ​Guide ​ ​for  Beginners- ​ ​React ​ ​Native     Custom ​ ​drawer ​ ​with ​ ​react-navigation ​ ​in ​ ​react-native ​ ​: ​ ​Skyward ​ ​Softwares ​ ​ ​ ​Solutions     by ​ ​​Bhaktipriya ​ ​Panchal ​ ​​​ ​on ​ ​July ​ ​25th       I ​ ​was ​ ​working ​ ​on ​ ​a ​ ​react-native ​ ​app ​ ​in ​ ​which ​ ​I ​ ​used ​ ​ ​​react-navigation ​​ ​for ​ ​routing.  React-navigation ​ ​provides ​ ​3 ​ ​different ​ ​types ​ ​of ​ ​navigators ​ ​– ​ ​ ​​Stack ​ ​​ ​​Tab ​ ​​ ​​Drawer ​. ​ ​I ​ ​used ​ ​all  and ​ ​they ​ ​worked ​ ​well ​ ​except ​ ​of ​ ​Drawer. ​ ​I ​ ​faced ​ ​some ​ ​issues ​ ​while ​ ​integrating ​ ​Drawer  navigator.

slide 2:

1    My ​ ​app ​ ​require ​ ​to ​ ​display ​ ​drawer ​ ​only ​ ​in ​ ​few ​ ​pages ​ ​but ​ ​react-navigation ​ ​drawer ​ ​is ​ ​available  in ​ ​all ​ ​pages ​ ​throughout ​ ​the ​ ​app. ​ ​Yes ​ ​it’s ​ ​possible ​ ​using ​ ​nested ​ ​routes ​ ​but ​ ​still ​ ​there ​ ​are  different ​ ​set ​ ​of ​ ​problems. ​ ​I ​ ​was ​ ​able ​ ​to ​ ​open ​ ​drawer ​ ​by ​ ​swiping ​ ​in ​ ​any ​ ​page. ​ ​My ​ ​app ​ ​needed  to ​ ​open ​ ​drawer ​ ​by ​ ​​click ​​ ​and ​ ​not ​ ​by ​ ​​swipe ​. ​ ​Also ​ ​I ​ ​was ​ ​not ​ ​able ​ ​to ​ ​access ​ ​Drawer ​ ​Navigator  instance ​ ​from ​ ​any ​ ​other ​ ​component. ​ ​I ​ ​don’t ​ ​found ​ ​any ​ ​useful ​ ​documentation ​ ​that ​ ​help ​ ​me  to ​ ​fulfill ​ ​my ​ ​requirements ​ ​so ​ ​I ​ ​took ​ ​a ​ ​third-party ​ ​drawer ​ ​module ​ ​and ​ ​created ​ ​custom  drawer ​ ​using ​ ​redux ​ ​option ​ ​of ​ ​react-navigation.  Links ​ ​which ​ ​I ​ ​referred ​ ​but ​ ​have ​ ​not ​ ​found ​ ​any ​ ​meaningful ​ ​solution  https://github.com/react-community/react-navigation/issues/131  https://github.com/react-community/react-navigation/issues/967  https://github.com/react-community/react-navigation/issues/725                        This​ ​Article​ ​shows​ ​an​ ​example​ ​of​ ​how​ ​we​ ​can​ ​integrate​ ​custom​ ​drawer​ ​in​ ​react-navigation.   It​ ​uses​ ​‘​react-native-drawer​‘​ ​module.  Create​ ​react-native​ ​app​ ​and​ ​setup​ ​redux.

slide 3:

2

slide 4:

3      Then ​ ​define ​ ​some ​ ​routes ​ ​using ​ ​​Stack ​ ​Navigator ​​ ​of ​ ​react-navigation. ​ ​In ​ ​this ​ ​example ​ ​there  are ​ ​two ​ ​routes ​ ​– ​ ​‘Home’ ​ ​and ​ ​‘About’. ​ ​Home ​ ​screen ​ ​will ​ ​contain ​ ​a ​ ​​menu ​ ​icon ​​ ​in ​ ​header ​ ​on  click ​ ​of ​ ​which ​ ​drawer ​ ​can ​ ​be ​ ​open. ​ ​About ​ ​screen ​ ​will ​ ​have ​ ​​back ​ ​arrow ​ ​icon ​​ ​to ​ ​go ​ ​back ​ ​to  Home ​ ​screen.   Now ​ ​lets ​ ​integrate ​ ​Drawer. ​ ​Add ​ ​‘ ​react-native-drawer ​‘ ​ ​​module ​ ​in ​ ​the ​ ​app. Create ​ ​a ​ ​component ​ ​say ​ ​​App ​ ​Navigator ​ ​​​ ​and ​ ​call ​ ​it ​ ​from ​ ​MainApp ​ ​component. ​ ​Add ​ ​Drawer

slide 5:

4    and ​ ​Routes ​ ​in ​ ​this ​ ​component.

slide 6:

5    READ​ ​MORE​ ​ON​ ​OUR​ ​WEBSITE     ​ ​   Skyward ​ ​Softwares ​ ​ ​ ​Solutions.  74city ​ ​centreAhmedabad-380009