React Navigation Tutorial for Beginners - Complex Navigation Flows with React Native

Ғылым және технология

Hey, what's up, guys? In this video, we're going to learn how to use React Navigation to incorporate complex navigation flows into our React Native apps.
🚀 React Native Course 👉🏼 codewithbeto.dev/learn
👨🏻‍💻 For resources go to Code With Beto 👉🏼 codewithbeto.dev
👯 Join the Discord: / discord
👨🏻‍💻 ☕️ 🌟 Would you like to support me? Sponsor me on GitHub🌟 ☕️ 👨🏻‍💻
github.com/betomoedano
⭐️ If you want to learn more about me, check this links:
Twitter: / betomoedano
Instagram: / betomoedano. .
Github: github.com/betomoedano
Linkedin: / betomoedano
Discord: / discord
Code With Beto: codewithbeto.dev
Medium: / betomoedano01
Figma: www.figma.com/@betomoedano
⭐️ My apps & projects:
► Code With Beto: codewithbeto.dev/
► Eco Studios:www.ecostudios.dev/
⭐️ Contact: betomoedano@outlook.com

Пікірлер: 108

  • @InfinityInsights758
    @InfinityInsights75814 күн бұрын

    One of the best video on React Navigation

  • @codewithbeto

    @codewithbeto

    14 күн бұрын

    Thanks! You may be interested on checking the new version 7 video :) kzread.info/dash/bejne/iqOpz8uweMWxdMo.html

  • @user-me2tr9bf7p
    @user-me2tr9bf7p5 күн бұрын

    This is awesome, thank you. For anyone looking I recommend this

  • @penguinxed
    @penguinxed Жыл бұрын

    you're such a very underrated and great teacher brother! thank you so much for all your effort and time to create these awesome tutorials, will definitely recommend your channel to my classmates! :)

  • @codewithbeto

    @codewithbeto

    Жыл бұрын

    Thank you ❤️

  • @ihebbenaicha1353
    @ihebbenaicha1353 Жыл бұрын

    thanks man ! that's exactly what's i've been looking for these past two days !

  • @uwasevanessa3758
    @uwasevanessa37584 ай бұрын

    This is a really great video. It explains all the navigations really well. Thank you Beto

  • @Joe-il7jz
    @Joe-il7jz2 ай бұрын

    You are really an awesome coach. I saw a lot of videos on navigation and none of them worked well enough until i saw your videos. Cant wait to see the remaining videos.

  • @codewithbeto

    @codewithbeto

    2 ай бұрын

    Awesome, thank you!

  • @haseebrehman2573
    @haseebrehman25735 ай бұрын

    Mr. Beto, Thank You, ive got a clear idea of how navigation in complex apps actually works. and also i've the ways how to handle thank you man.

  • @user-my3xn9rp9k
    @user-my3xn9rp9k4 ай бұрын

    Beto! Thank you so much for the lesson!

  • @hqasmei
    @hqasmei Жыл бұрын

    Yay another awesome video by Beto. Muchas gracias!!🙏

  • @codewithbeto

    @codewithbeto

    Жыл бұрын

    Thank you!

  • @m__link6499
    @m__link6499 Жыл бұрын

    Dude the way you explain thing is so clean….. thank you🎉

  • @codewithbeto

    @codewithbeto

    Жыл бұрын

    I appreciate that!

  • @mrd.j.2303
    @mrd.j.230311 ай бұрын

    Great video Beto! Keep them coming. Thank you so much!

  • @codewithbeto

    @codewithbeto

    11 ай бұрын

    Thanks, will do!

  • @aerleylopez
    @aerleylopez3 ай бұрын

    Thanks beto this is much help for me👏🏼

  • @sithijashehara6566
    @sithijashehara6566 Жыл бұрын

    really good content brother keep up the good work ! thank you so much and hope this chanel will grow futher... best of luck !!

  • @codewithbeto

    @codewithbeto

    Жыл бұрын

    Thank you so much 😀

  • @Brocollipy
    @Brocollipy Жыл бұрын

    Amazing video and desperatley needed when coming across to React Native from React.

  • @codewithbeto

    @codewithbeto

    Жыл бұрын

    Glad it was helpful!

  • @juanevillam
    @juanevillam Жыл бұрын

    Great video for beginners!

  • @tj44032
    @tj440322 ай бұрын

    Thank you Beto, you explained everything so well.

  • @codewithbeto

    @codewithbeto

    2 ай бұрын

    Thank you 😊

  • @wisdomelue
    @wisdomelue Жыл бұрын

    really awesome turorial!

  • @avikanshtiwari6241
    @avikanshtiwari62413 ай бұрын

    this video Helped me a lot.Thanks

  • @codewithbeto

    @codewithbeto

    3 ай бұрын

    Glad to hear that

  • @MrAwesome188
    @MrAwesome1885 ай бұрын

    Great video! Really helping me create my first react native app! :)

  • @codewithbeto

    @codewithbeto

    4 ай бұрын

    Great to hear!

  • @lawrenceughonu4954
    @lawrenceughonu49547 ай бұрын

    Awesomeness 🎉 I learn a lot in 1hr Thanks for this

  • @codewithbeto

    @codewithbeto

    7 ай бұрын

    Glad you liked it!

  • @imdabaws4402
    @imdabaws44025 ай бұрын

    absolute banger bruv!!

  • @mahendranath2504
    @mahendranath25047 ай бұрын

    nice thank you so much for amazing content, liked 👍 and subscribed to your channel

  • @youssefmahmoud6268
    @youssefmahmoud62687 ай бұрын

    Thanks, i hope your channel to be ranked from the best channel in KZread.

  • @codewithbeto

    @codewithbeto

    7 ай бұрын

    Thank you 😊

  • @BarakerZeonlist
    @BarakerZeonlist Жыл бұрын

    SO MUCH LOVE FROM TANZANIA

  • @codewithbeto

    @codewithbeto

    Жыл бұрын

    Thank you 🙏🏼

  • @vivekkor8309
    @vivekkor8309 Жыл бұрын

    very helpful, so damn good explicacion, gracias hermano

  • @Bianchi77
    @Bianchi778 ай бұрын

    Nice video, well done, thanks :)

  • @__diego432__
    @__diego432__ Жыл бұрын

    Excelente video amigo, tu contenido y tu explicación es muy buena. Me surgió una duda con tantos cambios en las versiones de RN y la navegación, Me recomiendas alguna configuración de versiones en específico? o solo seguir ambas documentaciones en sus ultimas versiones? lo que pasa es que me da errores pero no se sea tema de versiones de RN y la navegación

  • @ali.muhsin
    @ali.muhsin11 ай бұрын

    super helpful

  • @supplyuniquenotessun4562
    @supplyuniquenotessun45627 ай бұрын

    extremly awesome really i got understand it perfectly thanks to god then you many thanks to you

  • @michelro
    @michelro Жыл бұрын

    Thanks for the video, really good content. I’m actually trying to hide the tabs when the stack is 3 levels deep and I’m not sure if the nesting approach is the best?

  • @ydafy
    @ydafy10 ай бұрын

    Buen video bro.

  • @yjhoneban2671
    @yjhoneban26715 ай бұрын

    thank you verry much

  • @sahilverma_dev
    @sahilverma_dev Жыл бұрын

    great video

  • @samuelola6432
    @samuelola643210 ай бұрын

    What a great teaching ,please how can I get the source code so that I can follow along properly

  • @paulinkladi1689
    @paulinkladi16895 ай бұрын

    Thanks a lot Beto !! How can we make the sidebar navigation scrollable, in case of when the screens will become more and more

  • @anhdunghoang5303
    @anhdunghoang53039 ай бұрын

    Hello Beto. Your video is so great. Thank you for it. But I have a small question. Suppose that the Payments Component is a StackNavigator with multiple screens (For example, PaymentsScreen and PaymentsDetailsScreen). When I click on a button in the PaymentsScreen to navigate to the PaymentsDetailsScreen, the Drawer Navigator is still there. How can I hide it in the PaymentsDetailsScreen (Still available in the PaymentsScreen)? Thank you so much!

  • @helenaenrose
    @helenaenrose7 ай бұрын

    Thank you for the great content! One question: is the android top tab working for you? I didn’t see you switching the top tab in the video so I’m wondering if there’s a bug cuz my top tab indicator is not switching with the page..😢 really hope you could answer 😊

  • @joshuaedward6893
    @joshuaedward68937 ай бұрын

    this is a really nice course, i think it will be nice if you add those things they add in videos these days so you can jump to certain sections. I think that will really be helpful. There are some people who already know some section of the course and its time consuming to keep fast forwarding and checking if you are at the place you want.

  • @codewithbeto

    @codewithbeto

    7 ай бұрын

    Noted!

  • @succeeder3044

    @succeeder3044

    7 ай бұрын

    yea timestamps are really good .

  • @BoundlessCode
    @BoundlessCode Жыл бұрын

    setting up reanimated plugin and Darkmode 10:39 drawer = 52:36

  • @user-po6kj9lh6w
    @user-po6kj9lh6w23 күн бұрын

    Nice video Beto, out of curiosity why around min 41 why you use the useRoute and useNavigation hooks, as it's a screen can you not get it from the components props? Or are you doing it to demonstrate the hooks?

  • @svenbjorn9700
    @svenbjorn97005 ай бұрын

    Hi, please make some non-expo tutorials. I got 10 minutes into this one with you saying learn without expo first-then you said you're skipping some stuff because expo handles it 🤷‍♂

  • @CrustyMusty101

    @CrustyMusty101

    4 ай бұрын

    Thanks for this comment, saved me a ton of time lol

  • @codewithbeto

    @codewithbeto

    Ай бұрын

    Expo is the recommended way of creating RN apps

  • @svenbjorn9700

    @svenbjorn9700

    Ай бұрын

    @@codewithbetoit’s the opposite of the title of the video and it’s antithetical to your own advice in the beginning.

  • @versace_dinner
    @versace_dinner9 ай бұрын

    How are you making your regular React Native components change theme with the React Navigation Components? i.e. text color

  • @ProLOLify
    @ProLOLifyАй бұрын

    so if i want to access details page from notifications or settings screen, then i need to put the details screen into notification's and setting's stack again?

  • @m__link6499
    @m__link6499 Жыл бұрын

    Still waiting for your English react native course 😊

  • @milon27
    @milon27 Жыл бұрын

    all good, but when i go to notification tab I can still swipe to open the drawer, I want to only open the drawer from home tab not any other tab, how to do it ? would you please reply

  • @indrawan2086
    @indrawan20865 ай бұрын

    how about if notification tab have nested stack like home screen?

  • @smarttechinfo4512
    @smarttechinfo4512 Жыл бұрын

    Sir, I am using android ... , many plugin have different code for android and apple ... So please inform us whenever there is a different code for android.. like shadow and elevation... I think U got my point sir.. some of the animations are not working in android that is why I request ...Thank You Sir..

  • @oabdulazeez
    @oabdulazeez5 ай бұрын

    Hi bro... Nice tutorial. But how did you remove that Route HomeStackGrop from the DrawerContent?

  • @jairoevaristo2289
    @jairoevaristo2289 Жыл бұрын

    Very good video excellent content congratulations. Could you let me know what your vscode theme is, I really liked it 😄

  • @codewithbeto

    @codewithbeto

    Жыл бұрын

    Is the regular vscode dark theme 😄

  • @erfelipe
    @erfelipe10 ай бұрын

    Valeu.

  • @Mlubano
    @Mlubano Жыл бұрын

    Hi, I have problem with drawer. When I click on burgermenu its freeze, also when I use gesture to open side menu and click on link its freeze again and I need to reload app to unlock it. How can I fix in your opinion? Thanks 🙏

  • @raffacr7480
    @raffacr7480 Жыл бұрын

    Please will you share with us which android and IOS emulator you are using?

  • @ThanHtutZaw3
    @ThanHtutZaw36 ай бұрын

    How facebook mobile do navigation with scroll saved position ? Are they using stack navigation ?

  • @JorgeRivera-rp1zw
    @JorgeRivera-rp1zw2 ай бұрын

    This is with Expo..? Wanted it..!

  • @APerson-d5s
    @APerson-d5s Жыл бұрын

    How do you get rid of the vulnerabilities?

  • @shubhamgaur-go6xl
    @shubhamgaur-go6xl Жыл бұрын

    please give a solution about react native health connect and make a separate video

  • @BBTR_
    @BBTR_7 ай бұрын

    how to add drawer menu for setting and notification

  • @CopperEngineerEs
    @CopperEngineerEs9 ай бұрын

    ❤❤❤❤❤❤

  • @imsarvesh_
    @imsarvesh_11 ай бұрын

    How can I do the same in expo router?

  • @aliraza-zt8ef
    @aliraza-zt8ef Жыл бұрын

  • @tamimabdullah3624
    @tamimabdullah36249 ай бұрын

    Can you share the files you copied and pasted in this project ?

  • @vinitjain7
    @vinitjain7 Жыл бұрын

    when I do a production build my app freezes at splash screen

  • @MoeBiglow
    @MoeBiglow Жыл бұрын

    Hey Can you assist me here. I am on timestamp 15:48 --- I am unable to get the import navigation down.... it continues to say I have errors with casing import "react-native-gesture-handler"; import Navigation from "./navigation"; export default function App() { return ; } this is my code. I created the JS file with both navigation.js and Navigation.JS but running into same problem and it will not let me move forward

  • @codewithbeto

    @codewithbeto

    Жыл бұрын

    Try changing your import adding the file extension (from “./navigation.js”)

  • @BoundlessCode
    @BoundlessCode Жыл бұрын

    for me "SafeAreaView" from react-native does not work but the one from react-native-safe-area-context works just fine, anyone know why.

  • @user-hv1ve5rg4t

    @user-hv1ve5rg4t

    Жыл бұрын

    to me happened the exact opposite hahaha

  • @armaanchoudhary
    @armaanchoudhary Жыл бұрын

    Hey, Do you have any idea why we are getting those 14 vulnerabilities and if they can be removed? Do they matter?

  • @0xVaibhav11

    @0xVaibhav11

    Жыл бұрын

    in react native?

  • @SysDeveloper
    @SysDeveloper Жыл бұрын

    Cuando lo harás en español otra pregunta en tu plataforma es un único pago de 20 dólares o es mensual?

  • @codewithbeto

    @codewithbeto

    Жыл бұрын

    El curso es $20 dolares un solo pago Aqui esta en español: kzread.info/dash/bejne/kaCYl6SYitmsh6Q.html

  • @detronxplayzzz2799
    @detronxplayzzz27993 ай бұрын

    Is your React Native course updated?

  • @usmanmarkaz
    @usmanmarkaz Жыл бұрын

    Hi Beto how are you i have request plz make One Full stack app in react native with sanity or strapi choose any one but plz make atleast one

  • @codewithbeto

    @codewithbeto

    Жыл бұрын

    Got it!

  • @usmanmarkaz

    @usmanmarkaz

    Жыл бұрын

    @@codewithbeto what???

  • @codewithbeto

    @codewithbeto

    Жыл бұрын

    I will create a video with sanity or strapi

  • @s_5526
    @s_55268 ай бұрын

    Have anyone implemented call recording app for iOS or Android in React Native in 2023?

  • @techfreakZs
    @techfreakZs Жыл бұрын

    How do I persist the state of B , when I come back to A from B. B gets unmounted

  • @codewithbeto

    @codewithbeto

    Жыл бұрын

    You likely need redux or useContext, would you be interested in a video?

  • @user-cl7lo4ky4t
    @user-cl7lo4ky4t Жыл бұрын

    presentation: 'modal' is not working on android. Is there any known bug?

  • @codewithbeto

    @codewithbeto

    Жыл бұрын

    Just works for iOS 😬

  • @zapxcero
    @zapxcero2 ай бұрын

    npx create-expo-app is now giving tsx and i can't no app.js ...bruh im not ready for typescript 😂

  • @codewithbeto

    @codewithbeto

    2 ай бұрын

    Haha if you are interested you should check my react with typescript course! It’ll get you ready!

  • @Lionel_R21
    @Lionel_R219 ай бұрын

    what sound is that bro at 10:47, it scares me when i wear earphones

  • @codewithbeto

    @codewithbeto

    9 ай бұрын

    Haha I think is my keyboard

  • @dave_an
    @dave_anАй бұрын

    Timestamp?

  • @m__link6499
    @m__link6499 Жыл бұрын

    Dude, it’s still not possible to create an account on your website…user is not confirmed..and no confirmation code is sending …

  • @codewithbeto

    @codewithbeto

    Жыл бұрын

    Please send me your email at betomoedano@outlook.com

Келесі