Drawer Navigator Tutorial in React Navigation v5

Поділитися
Вставка
  • Опубліковано 11 гру 2024

КОМЕНТАРІ • 157

  • @sns413
    @sns413 4 роки тому +25

    This channel needs some attention! Good going, man. Lots of love ❤️

    • @westinkarson4846
      @westinkarson4846 3 роки тому

      you probably dont care but does anybody know a method to get back into an Instagram account?
      I stupidly lost the login password. I love any tricks you can offer me!

    • @tonyevan1241
      @tonyevan1241 3 роки тому

      @Westin Karson Instablaster :)

    • @westinkarson4846
      @westinkarson4846 3 роки тому

      @Tony Evan Thanks so much for your reply. I got to the site thru google and Im waiting for the hacking stuff atm.
      Seems to take a while so I will get back to you later when my account password hopefully is recovered.

    • @westinkarson4846
      @westinkarson4846 3 роки тому

      @Tony Evan it worked and I actually got access to my account again. Im so happy:D
      Thanks so much, you saved my account :D

    • @tonyevan1241
      @tonyevan1241 3 роки тому

      @Westin Karson Happy to help :)

  • @rahulserodia926
    @rahulserodia926 4 роки тому +1

    Your videos are awesome, even official docs are confusing for a newbie to react native apps. But you explained that very well and also very thoughtful of you to create drawer video again from updated docs. Thanks

  • @rahulsagvekar8794
    @rahulsagvekar8794 4 роки тому +1

    You're doing a great job buddy...Best channel to learn React Native for beginners... All the best buddy..

  • @blackbox__official
    @blackbox__official 4 роки тому +3

    May Allah reward you! ❤️ Thank u for everything! With your help I made an app and got the job!

    • @ahmedrowaihi9804
      @ahmedrowaihi9804 3 роки тому

      Ameen May he rewards him for this helpfulness, ya RAB guide

  • @egbertodeoliveira7524
    @egbertodeoliveira7524 3 роки тому

    Really nice this video ty. I didn’t realize that it’s possible to style the header with react navigation, help me a lot, ty again ..

  • @derikmaanda4210
    @derikmaanda4210 4 роки тому +1

    Thanks for the tutorial, I just migrated from React-Navigation v4 to v5, so i changed the whole thing from functional to OOP, if anyone is interested in the code, just tell me and i will upload it to github

  • @girirajnagar8051
    @girirajnagar8051 4 роки тому

    Thanks you...I searched a lot on Internet but finally got the solution here..

  • @ruset-dewss4698
    @ruset-dewss4698 4 роки тому

    Excellent .... explained in very simple terms ... Ideal for learners and people who are switching over to Navigation 5

  • @tejassharma2739
    @tejassharma2739 2 роки тому

    Lots of Love bro!! Thanks for making it so simple

  • @bamcode
    @bamcode 4 роки тому +2

    Amazing guide for implementing this type of navigation. Thank you so much, regards from Argentina

    • @itzpradip
      @itzpradip  4 роки тому +1

      Glad it was helpful!

    • @fsociety692
      @fsociety692 4 роки тому

      @@itzpradip i do this same code but it make two headers everything is ok but it make two headers one automatically create ham burger button for navigation

  • @cristianecheverria3995
    @cristianecheverria3995 4 роки тому +1

    If you have issues with the icons not showing use this:
    Found a solution here => github.com/oblador/react-native-vector-icons/issues/661
    My fix was:
    - Inside "android/app/build.gradle" at the end add this "apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle");" (without the quotes)

  • @souradeepmajumdar4167
    @souradeepmajumdar4167 3 роки тому

    to the point perfect stuff. godly perfection

  • @charithwijenayake3088
    @charithwijenayake3088 4 роки тому

    great explanation.. love from sri lanka

  • @ahmedboutaraa8771
    @ahmedboutaraa8771 4 роки тому +1

    man you saved my life

  • @amitmehta8554
    @amitmehta8554 4 роки тому +12

    if you getting this kind of error ("Error: HomeStackScreen(...):Nothing was returned from render....... ")
    then just simple pass the "return" like this
    const HomeStackScreen = ({navigation}) => {
    return(
    ........
    )
    const DetailsStackScreen = ({navigation}) => {
    return(
    ........
    )

    • @durnerlys
      @durnerlys 4 роки тому +2

      What you are returning in the function should go with a '(', not with '{'

    • @Athuldk
      @Athuldk 4 роки тому +3

      It worked. Thanks
      const HomeStackScreen = ({ navigation }) => {
      return (



      );
      };
      const DetailsStackScreen = ({ navigation }) => {
      return (



      );
      };

    • @ferdiansyahramadhan2534
      @ferdiansyahramadhan2534 4 роки тому +1

      thank you brother...

    • @amitmehta8554
      @amitmehta8554 4 роки тому

      @@durnerlys simply pass the return function with "(".
      it's work :)

    • @fsociety692
      @fsociety692 4 роки тому

      ​@@Athuldk bro can u please send me the for this video i am very confuse same error but not resolving

  • @neerajsaxena8108
    @neerajsaxena8108 4 роки тому

    This is yet again a helpful tutorial. Very good

  • @tradewithdani122
    @tradewithdani122 4 роки тому

    Indian guy always solve your problems

  • @partabparmar5537
    @partabparmar5537 3 роки тому

    quality stufff......!!!!
    thanks @Pradip Debnath

  • @aaronhernandezsanchez2960
    @aaronhernandezsanchez2960 4 роки тому +1

    thank you @Pradip Debnath, great tutorial ! :D

  • @kenducs14
    @kenducs14 3 роки тому

    A huge help , thank you

  • @swagatkumarsahu5857
    @swagatkumarsahu5857 4 роки тому

    Really helpful and learnt alot 👍

  • @imranshaikh115
    @imranshaikh115 4 роки тому

    Very nice explanation thanks a lot keep it up

  • @codexsolutions4
    @codexsolutions4 4 роки тому

    Great Brother please carry on your channel is helping us a lot a lot lot more than anyone else, your tutorials are so easy to understand after watching your channel its so hard for me to search for another hope you will make videos in hindi also brother thank you again nd my humble request bro for Hindi videos 🙏🙏

  • @udulaindunil6849
    @udulaindunil6849 4 роки тому +1

    Thank you very much for the videos
    details-->Go to the first screen ##Error## : The action 'POP_TO_TOP' was not handlled by any navigator
    Any answer or reference?

  • @sarfarazjafri7446
    @sarfarazjafri7446 4 роки тому

    Thank you sir you solve my big problem

  • @davidhash5639
    @davidhash5639 4 роки тому +1

    I really enjoyed this video. I have one question: It appears there is a fair amount of code that is repeated. I have an app with several screens and because of that, the code for each 'StackScreen' is duplicated except for a couple of pieces of data. Do you know of a way to create an object to contain all of this code passing in variables for the differences? This would be much better for maintenance when new screens are created or if the colors in the app change. Thanks very much

  • @victorjordan95
    @victorjordan95 3 роки тому

    Thank you my friend, you helped a lot!

  • @DanKardell
    @DanKardell 2 роки тому

    So in followin g along in your playlist, this is the second tutorial where in the first we had HomeScreen and Detail in the App.js file. Now they are in folders. Did you cover that somewhere?

  • @joy5872
    @joy5872 4 роки тому +2

    Hey Pradip, We have to specify that top left icon in each and every Stack screen? Can't we set globally? Instead of providing each and every stackScreen component ?

    • @mobasserahmed7569
      @mobasserahmed7569 4 роки тому

      How did fix this? can you please show us the code? thanks in advanced

  • @brightertomorrow3343
    @brightertomorrow3343 4 роки тому

    Great tutorial and many thanks

  • @aakrandan
    @aakrandan 4 роки тому +2

    Along with iOS please show us Android part too. It will be helpful to have both material together,

  • @sokvebolkol3504
    @sokvebolkol3504 4 роки тому

    Thank you very much for your video.

  • @NickKubde
    @NickKubde 4 роки тому

    Dependencies:- 02:13

  • @mohamedmohammedy3987
    @mohamedmohammedy3987 3 роки тому

    thank you for your effort ,
    in my project on press function can not open drawer err

  • @jilanikhokhaar7554
    @jilanikhokhaar7554 3 роки тому

    Which extensions are you using for react native app development.?

  • @arsyalkun
    @arsyalkun 4 роки тому

    Shangar Thanks alot sir

  • @imrahuldasgupta
    @imrahuldasgupta 3 роки тому

    Thank you!

  • @yusuft.3587
    @yusuft.3587 4 роки тому +1

    you have a good heart

  • @ohmcodes
    @ohmcodes 4 роки тому

    how about bottom tab > stack > drawer same with stacks ? like home(bottom) then you open drawer with stacks home(stacks) about(stacks) articles(stacks) for example

  • @matthewwillis2201
    @matthewwillis2201 4 роки тому

    Very helpful. Thank you!

  • @codemonk9
    @codemonk9 4 роки тому

    Great tutorial man, many thanks!

    • @itzpradip
      @itzpradip  4 роки тому +1

      Glad it was helpful!

  • @ehteshamulhaq604
    @ehteshamulhaq604 3 роки тому

    which extension you are using please tell.

  • @fullStakz
    @fullStakz 4 роки тому

    Very well done. I am interested to understand why the React Nav Docs no longer show the 2 gradle implementations we're instructed to add . However, one of the two (swiperefreshlayout) was already added when i opened the android gradle.build file. But i can't find any trace of the other one (appcompat). But like I said, great video, sir. I look forward to the rest of this playlist.

    • @fullStakz
      @fullStakz 4 роки тому

      I actually intended to leave the above comment in the 1st video of the tutorial.

  • @putukusuma6365
    @putukusuma6365 4 роки тому

    Great tutorials, 🙏👍

  • @sabririhab9383
    @sabririhab9383 3 роки тому

    you are amazing !

  • @Klklpia
    @Klklpia 4 роки тому

    You are Great! Thx Bro!!!

  • @saurabhjain2161
    @saurabhjain2161 4 роки тому

    @Pradip When the drawer opens, I can see the drawer is getting hide behind non screen area (top right side of the drawer)
    Any solution for this?

  • @Jh-cp9ql
    @Jh-cp9ql 3 роки тому

    Your videos are awesome man! I've learned a lot by watching them. But i got a question. How do you let react native know that you want to use the menu icon? For a moment I thought that by writing the name of the icon you want to use in '

  • @bimleshverma2205
    @bimleshverma2205 4 роки тому +1

    Why you are not you return() in home and detail screen in App .js file

  • @AZ-qn3xq
    @AZ-qn3xq 3 роки тому

    Hello. After put Drawer button in the header of Details screen, then you click on stackNavigation button there no arrow icon in header to slide back, there is only option push created Go back button. How to put it back?

  • @musicvstime9559
    @musicvstime9559 3 роки тому

    We love you truly thankkkks

  • @geomgeom2893
    @geomgeom2893 3 роки тому

    tHANK YOU its really helpful. I followed this step but I am getting an error "Import fails with "Failed to execute 'ImportScripts' on 'WorkerGlobalScope'"" Please suggest Thank you

  • @chummyigbo8844
    @chummyigbo8844 4 роки тому

    Thanks a lot. Very clear

  • @burakgulec5768
    @burakgulec5768 4 роки тому

    This video helped me a lot.
    Thank you :)

  • @MaheshSharma-rk6xb
    @MaheshSharma-rk6xb 3 роки тому

    Hi Pradeep need help i have array with "key & Value" i want to move "key & value " to another position while show data on my app. kindly help me plz. Thanks

  • @philipkumar8675
    @philipkumar8675 2 роки тому

    What is the Node version not supported for this project

  • @zaidpereyra2693
    @zaidpereyra2693 4 роки тому

    Hello, do you know how can i disable the swipe of the drawer? in react native 5.x

  • @timzeynalov3537
    @timzeynalov3537 3 роки тому

    please teach us how we can style in react native , for example I can not style margin of my header or something else I cannot understand where should I write it ofcourse I know how ty style View and Text but in navigation it is hard

  • @nithiodev3317
    @nithiodev3317 3 роки тому

    Thanks brother

  • @archanakakade7670
    @archanakakade7670 4 роки тому

    Hello Sir, In my case the icon image is not menu image it is something else but working as drawer menu only. Please give the solution for it.

  • @isabelpizarro7999
    @isabelpizarro7999 4 роки тому

    thanks! it was useful to me

  • @nrutcon3356
    @nrutcon3356 4 роки тому

    Thank you, it works! Is there any possibility to bring to your channel videos about React Native + Cloud Firestore?

  • @preciousgugungcobo4766
    @preciousgugungcobo4766 4 роки тому

    Thank you for your videos. But I want to know. How did you install the react native vector icon?. I'm stuck there

    • @amitmehta8554
      @amitmehta8554 4 роки тому

      you can add vector icons like
      import {Ionicons, AntDesign, Entypo, Foundation, Fontisto} from '@expo/vector-icons'

    • @aynuraslan4321
      @aynuraslan4321 4 роки тому

      this may also solve your problem
      npm install --save react-native-vector-icons

  • @kamleshprajapati6621
    @kamleshprajapati6621 4 роки тому

    Thanks Sir...💕💕💕

  • @SitiNurAlfath
    @SitiNurAlfath 3 роки тому

    Thank you

  • @PavloZhdanov-u8s
    @PavloZhdanov-u8s 2 роки тому

    where can i take folder 'screens'?

  • @albnayem8652
    @albnayem8652 3 роки тому

    You are awesome!

  • @neerajsaxena8108
    @neerajsaxena8108 3 роки тому

    After installing the drawer navigation, I get this error - TypeError: null is not an object (evaluating '_ReanimatedModule.default.createNode'), I have cleared cache, restarted my machine, removed and installed node modules / react navigation and everything. Still, it exists. Can you help me.

  • @maheshjangid4830
    @maheshjangid4830 4 роки тому

    Hello brother where is your other screen stack navigation video please share me link of this

  • @arshiyasayyed9732
    @arshiyasayyed9732 4 роки тому

    thankyou soo much very helpful video

  • @kapilgoyal7808
    @kapilgoyal7808 3 роки тому

    I am new in react native. first video of stack navigation is working fine. but in second video i am copy exacting code but i am face issue like error "HomeStackScreen(...) Nothing was returned from render. this usually means a return statement is missing. or, to render nothing, return null"
    Here we are using Functional component. so we dont need to render here. Please suggest some answer me

  • @vikasgupta4459
    @vikasgupta4459 4 роки тому

    nice tutorial!

  • @sulemanali8542
    @sulemanali8542 4 роки тому

    good explanation keep it up

  • @saxenavedant61
    @saxenavedant61 3 роки тому

    Is react reanimated needed for drawer navigation ?

    • @saxenavedant61
      @saxenavedant61 3 роки тому

      I am getting these errors:
      TypeError: undefined is not an object (evaluating 'InnerNativeModule.installCoreFunctions')
      Invariant Violation: Module RCTEventEmitter is not a registered callable module (calling receiveTouches). A frequent cause of the error is that the application entry file path is incorrect.

  • @simonyanky2528
    @simonyanky2528 3 роки тому

    in headerleft menu button is not showing up...though i have done it as u showed....any suggestion?

  • @satishkashyap7984
    @satishkashyap7984 4 роки тому +1

    I just want to use only one function for all stack navigation . You are creating 2 function for two different page navigation.

  • @prathameshsagvekar6696
    @prathameshsagvekar6696 4 роки тому

    Sir, you explain well.👌 I ran code on my android device and went good 👌. Issue shows some chinese symbol/letter instead of menu icon...😹 i tried name="ios-menu" and name="md-menu" but no luck.. again thank you very much for simple demo of RN5 👌

    • @prathameshsagvekar6696
      @prathameshsagvekar6696 4 роки тому

      got solution : github.com/oblador/react-native-vector-icons#android

    • @verainsardana
      @verainsardana 4 роки тому

      @@prathameshsagvekar6696 you need to link the icons

  • @mardiidking4030
    @mardiidking4030 4 роки тому

    For Android;
    medium.com/@taufiq_ibrahim/using-react-native-vector-icons-9fbb8f1d983d
    Then to use it;
    name = "menu" or name= "ios-menu" either works

  • @tobiawosola1602
    @tobiawosola1602 4 роки тому

    After adding the stack Navigator to the drawer Navigator I found this issue:
    ReferenceError: Can't find variable createStackNavigator

  • @mohdhasanchishti4672
    @mohdhasanchishti4672 4 роки тому

    In my case , drawer toggle icon is not displaying and also no error

  • @ibrahimmoosani6055
    @ibrahimmoosani6055 4 роки тому

    great man

  • @RaviSoni-ci9zu
    @RaviSoni-ci9zu 3 роки тому

    Sir, Please give me the solution to this error "Error: Got an invalid name (undefined) for the screen. It must be a non-empty string. "

  • @raphaelspitz3682
    @raphaelspitz3682 4 роки тому

    thanks for the video it s really cool. Just on thing navigation.popToTop() is not working any more.

    • @itzpradip
      @itzpradip  4 роки тому

      Yes, thanks for mentioning it here in the comment section.

  • @fsociety692
    @fsociety692 4 роки тому

    bro can anyone can help me i am doing the same code but it make the two header for every function

  • @androidios5990
    @androidios5990 4 роки тому

    hi, how to navigate to another screen from the screen which is inside drawer navigator

    • @amitmehta8554
      @amitmehta8554 4 роки тому

      first you need to create a new screen
      after that link that screen on your app.js
      and then simply pass this line
      onPress={() => navigation.navigate("your-screen")}

  • @TrialsFromTly
    @TrialsFromTly 3 роки тому

    Why it's showing unable to resolve module react-native-reanimated. I followed the same steps doc I can't find the solution please help..
    R_Version :0.65.1

  • @septehabudin6849
    @septehabudin6849 3 роки тому

    I have issue drawer on Android showing up. but in ios drawer not.
    How fix this

  • @kidsvideos5990
    @kidsvideos5990 4 роки тому

    Hi sir. Status bar not showing other page. Only showing mainScreen. How can I add StatusBar other page? Please help me :)

    • @amitmehta8554
      @amitmehta8554 4 роки тому

      import {StatusBar} from 'react-native';

  • @piergaetanodivita533
    @piergaetanodivita533 4 роки тому

    I have this error: cant find a component, 'getComponent' 'children' prop for the screen details. This can happen... why?

  • @tanveerkhan627
    @tanveerkhan627 3 роки тому

    version 6 pe video kab ayega sir

    • @itzpradip
      @itzpradip  3 роки тому

      Within a month or so but not sure. Thanks for your comment.

  • @rakeshghosh8314
    @rakeshghosh8314 4 роки тому

    Tab navigation, Drawer navigation and Stack navigation mix 🤗🤗🤗🤗🤗🤗 please sir upload video

    • @itzpradip
      @itzpradip  4 роки тому

      I just published a video on the same topic. Check the latest video in the playlist mentioned in the description of the video.

    • @rakeshghosh8314
      @rakeshghosh8314 4 роки тому

      @@itzpradip sir next video kb upload koroge 🤗🤗🤗🤗🤗🤗🤗🤗

  • @syedibrahim4327
    @syedibrahim4327 4 роки тому

    How to add an image in drawer navigator any help would be appreciated

    • @amitmehta8554
      @amitmehta8554 4 роки тому

      you need a tag for that. just import from react-native
      **import**
      import {View, StyleSheet, ImageBackground} from 'react-native'
      ***code***
      return(

      )

  • @h3tanshr3act30
    @h3tanshr3act30 3 роки тому

    My icon is not showing....???

  • @marcinc2345
    @marcinc2345 4 роки тому

    Będzie działać?

  • @mohitarora2190
    @mohitarora2190 4 роки тому

    Hi bro could u pls make a video on how to add login with gmail and facebook in react native without using expo.

    • @itzpradip
      @itzpradip  4 роки тому +1

      thank you for your suggestion. I'll try to make a tutorial on this topic in the near future.

    • @mohitarora2190
      @mohitarora2190 4 роки тому

      @@itzpradip please bro make it as fast as possible

  • @adnaan28
    @adnaan28 4 роки тому

    I am getting unrecognized operator min pleaseee help me anyone ...

  • @fsociety692
    @fsociety692 4 роки тому

    Can i get code of this video project
    ????

  • @chintukumar5726
    @chintukumar5726 4 роки тому

    how drawer open in right side

    • @amitmehta8554
      @amitmehta8554 4 роки тому +1

      Instead of headerLeft you need to provide headerRight :)
      headerRight: () => (
      {
      navigation.openDrawer()
      }}
      >
      )

    • @chintukumar5726
      @chintukumar5726 4 роки тому +1

      @@amitmehta8554 thanks

  • @mehrajuddinam3922
    @mehrajuddinam3922 4 роки тому

    Menu icon is not showing in Android device how to fix

    • @amitmehta8554
      @amitmehta8554 4 роки тому

      you need to import first
      import {Ionicons, AntDesign, Entypo, Foundation, Fontisto} from '@expo/vector-icons'

  • @ComputerManager
    @ComputerManager 4 роки тому

    TypeError: Cannot read property 'openDrawer' of undefined I am having this error
    function HomeStack({navigation}){
    return(

    (
    navigation.openDrawer()}/>),headerStyle:{
    backgroundColor:"coral"
    } }}/>


    );
    }