Getting Started with React Navigation v5 - Stack, Tabs, Drawer, Authentication

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

КОМЕНТАРІ • 236

  • @ReactNativeSchool
    @ReactNativeSchool  4 роки тому +10

    Want to learn more (at a slightly slower pace)? Check out my free class on React Navigation v5! www.reactnativeschool.com/master-react-navigation-v5

  • @louicoder
    @louicoder 4 роки тому +6

    This was explained in the most easy way possible. The docs are quite challenging even to someone who's been using the older version. I love your channel bro 🥂❊♨️🌟

  • @rafaelfez
    @rafaelfez 4 роки тому +10

    Best video about React Navigation on the internet, really grateful! Thanks man

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

      Do you want to monetize on Admob? We have native templates for you. ✔️ We advise you on the Reskin mira️ look at our templates, very low cost.
      ua-cam.com/channels/iFXrb4vWHhwoq6PhEr0Uqw.html?view_as=subscriber

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

    You are the most chilled person to listen to. Very, very helpful when one is trying to learn some pretty mind twisting stuff. Thank you so much for this vid and your content!!

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

      Thanks! I go into more details on React Navigation v5 here - www.reactnativeschool.com/master-react-navigation-v5

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

    I had lots of troubles to understand the react navigations but with this tutorial all clear for me. Thank you man. I really appreciated. Please continue to prepare another react native tutorials.

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

      Do you want to monetize on Admob? We have native templates for you. ✔️ We advise you on the Reskin mira️ look at our templates, very low cost.
      ua-cam.com/channels/iFXrb4vWHhwoq6PhEr0Uqw.html?view_as=subscriber

  • @heybiggins
    @heybiggins 4 роки тому +4

    This was FANTASTIC. Thank you! (: I'm just learning React / React Native for the first time and this was by far the clearest and most concise explainer for setting up React Navigation.

  • @harrybanda
    @harrybanda 4 роки тому +13

    This helped me understand how to do authentication correctly in react-navigation 5, thanks

  • @jeserodriguez
    @jeserodriguez 4 роки тому +9

    Hi Spencer. Thank you so much for this! 🙌🏼
    I read the news on this new declarative API for React Navigation, and am glad to watch you trying it out.
    You're always on top of all things RN! 💯

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

    The best RN guy on internet! Thank you so much for your work!!!

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

    This is honestly the best video explanation I have ever seen on UA-cam. Love it ⭐

  • @TeddeeJordan
    @TeddeeJordan 3 роки тому +1

    Great video. Enough information to walk through the process without becoming drawn out too much. I'm just starting in React Native and this was the best video on nav and authorization I've found so far.

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

    This video is great, I was able to understand the options you have available with react navigation and understand how it works.

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

    I am just a beginner in React native. The way cover the topic that help me a lot. Thanks.

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

    This video clear my doubts.
    The way you shows the problem and the solution, really makes it easy to understand.
    Thank you brother, Thank you so much. 💝

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

    Being a newbie to React Native I would have ended up spending a week to figure this out. You saved me! Nice and clear code, also very comprehensive video.

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

    Very Helpful, but when i try to split screens files (Sign In, Sign Up, Home, Profile,... etc.) i get error: Couldn't find a 'component' or 'children' prop for the screen 'X' this can happen if you passed 'undefined'
    how to solve that?

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

      Sounds like an export/import issue. If you're using export default Component then import it "import Component from './Component'". Otherwise, if you'r exporting with "export const Component = ..." then you want to import with "import { Component } from './Component'"

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

      @@ReactNativeSchool thanks, that was the issue

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

    Thanks, bro for the tutorial it was really great. I'm a React developer so the transition from react router to react navigation was easy with this tutorial.

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

    Man, this tutorial is GREAT, I have been getting a lot of errors and stuff cuz I couldn't understand the other tutorials, Im really grateful for this, if it wasn't for you I believe I wouldn't have been able to solve the problems I had with my code, thanks bro.

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

    This mini-course on React Navigation is AMAZING... really appreciate the video my man!!!

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

    You are my hero. You saved my exam assignment. Thanks.

  • @BNgema
    @BNgema 4 роки тому +4

    Haven't been working on mobile apps for a while, this is really helpful, I needed the recap.

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

    I struggled with navigator for one week and after this one, I got some feeling! Thank you so much!! You should make more contents about React Native ( with Expo LOL)

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

      @Carmin you can follow Spencer on Medium he has a lot of articles there, all of them are really interesting and also he has interesting course about React Native with Meteor.

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

    Really useful the login flow. I'm new to react and I was struggling to do this part. Thank you very much

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

    now react navigation is not complicated. Thanks for this tutorial.

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

    This is the best video on react native

  • @bluekeny
    @bluekeny 2 роки тому +1

    great job! thanks

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

    Great piece of explanation dude.

  • @CredenceEve
    @CredenceEve Рік тому

    This was so well explained. Thank you so much!

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

    This is best video for create react navigator . I just to start learn react native
    Thank you so much 😊🙏🙏

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

    Very structured and planned out tutorial, despite being so long! You have earned yourself a subscriber!

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

    You made me love react navigation version 5. The video was awesome

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

    Thanks, this improved my understanding of react-navigation 5

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

    These is helpful, much needed some explaination on v5 after its launched, thanks man... looking forward some example with hooks as well... Thank you! :)

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

      Do you want to monetize on Admob? We have native templates for you. ✔️ We advise you on the Reskin mira️ look at our templates, very low cost.
      ua-cam.com/channels/iFXrb4vWHhwoq6PhEr0Uqw.html?view_as=subscriber

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

    Thank you so much, you made it so easy to understand.

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

    Spencer is back!!!!! Love it and also love the react-native by example.

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

    Excellent, Thank you very much for sharing.

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

    excellent video, helped me to understand of new version of react navigation (v5) 👍🏻

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

    one of the habit of programming channel is thy provide code in the description

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

    Was looking for a good react navigation tutorial since yesterday. Thought that this video would do a little good. But it did a lot.

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

    In case you have not been adequately informed, please consider this official notification that you are awesome.

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

    Great video !! ...simple, crisp and to the point ....you made it look so easy :)

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

    The video is awesome. This is a quick approach when I program
    !

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

    Que buen material!!, me ha servido mucho, ¡saludos desde Chile!

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

    Thank you very much! You put me on the right path.

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

    Thanks for the excellent demonstration with examples!

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

    This tutorials helped a lot! Especially the authentication part! Good Job!!

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

    Thanks a lot man. You are the best. Thanks for all of your tuts and articles on Medium.

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

    Very good info, thanks! I hesitate to start learning RN or Flutter...I' ll try to RN

  •  4 роки тому

    Very good! But what would authentication look like in the MySql database?

  • @chiroto
    @chiroto 3 роки тому +1

    Hi, just started with react native. Appreciate your lessons!
    One thing I don't understand, the app needs an app.js to work, right? In your files there isn't such a file or an index.js. This is probably obvious, but I'm a newbie :D
    Where should I redirect my app.js?

    • @learnedjellyfish
      @learnedjellyfish Рік тому

      Hi, how’s it going? I am about to start react native also. How’s it going with you?

    • @chiroto
      @chiroto Рік тому

      @@learnedjellyfish I'm looking forward to resuming react native :D Work took me away, I'm dealing with more simple things so far, frontend for WordPress sites. But react native is awesome, I wish you the best!

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

    Great tutorial! Though doesn't work as expected with v6 :( will there be v6 version of this example? thanks!

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

    Nice tutorial Spencer! Btw, gotta ask what theme are you using?

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

    Great tutorial as always. Can you share you prettier/eslint configs on this project?

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

      I'm using my custom config - eslint-config-handlebarlabs.

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

    Thanks bro you save my life!

  • @Evalionn
    @Evalionn 3 роки тому +1

    Can’t say thank you enough!! I Do appreciate your work ♥️

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

    Good video, first thing. I have a doubt. Is it better to put the screens in a "js", or make a screen for each component? in a real app.

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

    Excellent tutorial. Thank you.

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

    super nice tutorial. Thanks

  • @arto00-g2n
    @arto00-g2n 3 роки тому

    It’s a great video but I wish the code was updated because I got some errors when testing the linked repo. Maybe link a new video and project.

  • @deepaksingh-kb1ot
    @deepaksingh-kb1ot 3 роки тому

    Thank you very much for this was a great help!

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

    Woahh.
    Helped me a lot , thanks buddy for this master piece

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

    Thanx brother..Very good..You save my day

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

    Amazing! Thanks for shared. 😁

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

    ughh... its easy to learn, thank youuu so much 🙋‍♂️

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

    You are God-sent. Thank you so much

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

    so helpful ... keep this work up

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

    thank you man, realy good lesson.

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

    This was very helpful, thank youuuuu!!!!!!

  • @AkashKumar-cc5kf
    @AkashKumar-cc5kf 4 роки тому

    Thanks bro love from India ...............................

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

    Best explanation

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

    This was one of the better tutorials on React Navigation that I've seen - thanks so much!
    Why did you put your screens inside a screens.js file in stead of each screen in its own .js file in a screens folder? Amateur asking here :)

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

      I tried to customize the screen to be a multiple screen. But failed for a week right now. If you know the way. Really appreciate it.

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

      What do you mean?

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

      @@delanick sorry. I try to seperate the screen by using multiple file.js.

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

      @@asyrafroszaki8008 Did you import and export them all correctly? You can share your code with me and I'll have a look for you.

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

      @@delanick basically i want to insert the page that I already design into this lecture code. I want to combine two code into one. Can i get your email

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

    In your example, that signedin state is not persistant right? Can you make a video with persistant signedin state??

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

    literally you are the man

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

    Great Video. Do you have a tutorial with Firebase?

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

      I use firebase in the chat example here: www.reactnativebyexample.com/

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

    Thanks!! Very good explanation

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

    Thanks! It was useful.

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

    Do you have a video using this setup with firebase?

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

    Auth stuff is at 18:17 if anyone came here just for that.

  • @nurhamsah_tech
    @nurhamsah_tech Рік тому

    Great tutorial

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

    You didnt add this
    To finalize installation of react-native-gesture-handler, add the following at the top (make sure it's at the top and there's nothing else before it) of your entry file, such as index.js or App.js:

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

    Really helpful, thank you very much.

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

    Any chance there will be a video showing how to test components using RNV5 with Jest and React Native Testing Library?

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

      Sure! What do you have in mind for testing on this front? Typically I just test on a per-screen basis, independent of navigation, and just mock navigation.

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

      Handlebar Labs mocking the navigation is a good place to start! What's a clean way to mock the NavigationContainer and the navigation/route props inside a component that's not a screen.

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

    is there a best practice on where the navigation container/stack code should go? For example in the root app.js file or does it make sense to create a separate navigation folder for all navigation? feel like i've seen navigation handled many different ways. Any insight is much appreciated!

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

    Thank you so much, man. Great tutorial

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

    You are awesome! Just what I needed!

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

    When do you release instructions for v6? Please pin the link here! The tutorial is very helpful. Thank you very much

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

    Dear spencer thnx alot for this content and also concept for Auth

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

    It was really helpful 🤩thanks

  • @lucas.family0200
    @lucas.family0200 3 роки тому

    Can you help me about keeping user logged in when using AsyncStorage?
    Give me example please, thank you so much!

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

    Hi, went through the website. I would love to buy them. Great context. But the price too high to afford. What do you suggest, please?

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

    It was amazing!!1 Thanks for sharing!!!!

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

    Hi! Cool video!
    I have a short question - at the 20:05, 25:24 seconds (when screens appear and tabBarbottom appear) main content is jumping. Why does this happen?
    Drawer ?
    Navigation v5 very raw?
    Or something else?
    Thx!

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

      It looks like that may have just been cuts from editing.

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

    thanks a lot, dude!

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

    hey man, can you create a tutorial explaining how to create a user token in the backend?

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

    Great tutorial )))

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

    How did you configure your shell prompt to show the current git branch name ?

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

    hi bro did u made folder App and put index,js and screens.js under it ???

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

    How do you use headerRight? I'm trying to navigate to another screen using Header Right.

  • @sadiarty-0111
    @sadiarty-0111 4 роки тому

    Great tutorial. I have a question for you. I saw in your page some projects and catch my attention one of them that is the "Main Quiz", to see the videos i need to be premium? pay for watch it?

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

      Yes, I have a quiz app available as part of reactnativebyexample.com.

  • @Boo-ky5kc
    @Boo-ky5kc 3 роки тому

    Thank you so much 😆