Build complex layouts with Expo Router v2 and Expo SDK 49 | File Based Routing | React Native

Поділитися
Вставка
  • Опубліковано 21 лис 2024
  • Hello everyone 👋, In this video you will learn about implementing any kind of layout with expo router v2 and using latest expo sdk 49, we will build stack/tabs navigations and very complex nested navigations. Build professions apps using expo router v2.
    Github repo: github.com/sye...
    Expo Router Installation: docs.expo.dev/...
    Test Deep-linking: reactnavigatio...
    Add TailwindCSS in React Native: • Add Tailwind CSS In Yo...
    Add Navigation in React Native: • Food Delivery App with...
    If you appreciate my work and you would like to support my channel: www.buymeacoff...
    🚨 more videos on react native:
    Food Recipe App : • 🔴 Build Food Recipe Ap...
    Movie App : • 🔴 Build Movie App Usin...
    Onboarding UI with Lottie Animations: • 🔴 Onboarding UI with L...
    AI Voice Assistant with ChatGPT & DALL-E : • 🔴 Build a React Native...
    Travel App UI : • 🔴 Travel App UI | Reac...
    Weather App : • 🔴 Build Weather App Us...
    Coffee App UI : • 🔴 Coffee App UI - Reac...
    Food Delivery App : • 🔴 Build Food Delivery ...
    UA-cam Clone App: • 🔴 UA-cam Clone - Reac...
    Login | SignUp UI : • 🔴 Login | SignUp UI - ...
    Fast Food App : • 🔴 Fast Food App UI - R...
    App Store UI : • 🔴 App Store UI - React...
    Fruit Shop UI : • 🔴 Fruit Shop UI - Reac...
    Firebase Authentication React Native: • React Native Firebase ...
    Food Delivery App : • Food Delivery App with...
    Learn React Native: • Build Expensify App Wi...
    Learn Reactjs: • Modern React For Begin...
    #expo #reactnative #tailwindcss #javascript #programming #typescript #speedcode #coding #design #appdevelopment #reactjs #ui #uiux #reactnavigation #reactnativetutorial #react #animation #reactjs #navigation #navigationbar #uidesign #mobiledevelopment #iosdeveloper #buildinpublic #opensource #reactnativeapp #reactjstutorial #typescript
    react native animations
    animations in react native
    react native tutorial
    react native app
    react native tutorial for beginners
    react native project
    react native course
    react native expo router
    expo router v2
    expo router sdk 49
    expo router tabs
    tab navigation
    expo router nested navigation

КОМЕНТАРІ • 66

  • @MrRobots100
    @MrRobots100 9 місяців тому +8

    One of the best videos I have ever seen. Perfect. Made my day.

  • @saherraza7110
    @saherraza7110 4 місяці тому +1

    your way of teaching is so smooth and efficient. loved it...!!!

  • @priyanshudhawan5054
    @priyanshudhawan5054 5 місяців тому +2

    you solve half of my problem that i suffering from 1 long day.

  • @JahangirAmin
    @JahangirAmin 9 місяців тому +2

    @galaxies_dev deserves all the credits for this video. This dude didnt even bother to change the thimbnail.

  • @Lior-n9b
    @Lior-n9b 11 місяців тому +5

    Great tutorial thank you! For your future tutorials what would be great is a at the end of small summary of how the concepts you've showed in the video works :)

  • @HermesSoilder
    @HermesSoilder 2 місяці тому

    I don’t say this much but this is the best video on the topic. You provide a little bit more complex of an example that almost reflects a real life use case (mine especially).
    Everyone else is just barely scratching the surface, yk how when you read a medium article and come out feeling like you should have just read the docs. content quality in the RN space sucks.

  • @codewithtae6637
    @codewithtae6637 9 місяців тому +1

    Appreciate the video! You filled in some knowledge gaps I had!

  • @haroldllames5709
    @haroldllames5709 Рік тому +2

    Wow. That's so informative and really great. I have been looking for this kind of tutorial. Please make more. Thank you!!!

  • @perrythepalteypus2185
    @perrythepalteypus2185 11 місяців тому +1

    Brilliant tutorial 🎉❤

  • @mtpk0
    @mtpk0 10 місяців тому +1

    You are awesome! Excellent tutorial, clear and concise, learned a lot. Thank you for all the effort you applied in making it. :)

  • @refaldybagas
    @refaldybagas Рік тому +2

    thankyou. great tutorial ❤

  • @hellatalented
    @hellatalented Рік тому +1

    Awesome vid bro helped alot!!!!!!

  • @macabro019
    @macabro019 6 місяців тому

    Excellent video, how do you make the routes typed when using ? I just created a project with expo v50

  • @tuansiraj
    @tuansiraj 2 місяці тому

    This is Great !!!
    when navigating the stack inside the tabs , are there anyway can we hide tab bar ?
    what if link something on the outer stack in tabs will it return to the outer stack ?

  • @themrsupermanto
    @themrsupermanto 2 місяці тому

    Amazin video. You saved me👌

  • @withpaulex8645
    @withpaulex8645 6 місяців тому

    Nice video compare to others am seeing for expo router

  • @mahamathassan6153
    @mahamathassan6153 4 місяці тому

    Thank you, you helped a lot.

  • @ibiyemisamuel6082
    @ibiyemisamuel6082 Рік тому +2

    Thank you😊🎉❤

  • @mahendranath2504
    @mahendranath2504 9 місяців тому

    Nice thank you so much for amazing content

  • @MustaphaMuhamed-z4t
    @MustaphaMuhamed-z4t 7 місяців тому

    perfect i will apreciate for this knowledes

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

    You gained my subscription

  • @kral626
    @kral626 10 місяців тому

    Excellent! Thank you for this video. Say, if I want to make the Post Details page take up the full screen (even above the bottom tabs), how would I do that?

    • @codewithnomi
      @codewithnomi  10 місяців тому +1

      You will have to create the post details screen in another stack

    • @kral626
      @kral626 10 місяців тому

      @@codewithnomi I see. Separate from the stack inside the (tabs) folder? Something like this?
      (tabs)
      index
      _layout
      posts
      post-details
      index
      _layout

    • @codewithnomi
      @codewithnomi  10 місяців тому +1

      @@kral626 yup

  • @bestelectrocity
    @bestelectrocity Рік тому +1

    Thanks, amazing 🎉

  • @ugo3648
    @ugo3648 9 місяців тому

    What a great tutorial! Thanks dude. Do you plan to make one on the SDK 50 and his new features ? Keep doing !

  • @carlosmedrano8596
    @carlosmedrano8596 4 місяці тому

    hey a very good video, thanks

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

    How incredible, wonderful this video is.
    How could we do this if we log in to the app?
    for the user to access the routes only after logging in, using expo router.

    • @codewithnomi
      @codewithnomi  Рік тому +1

      you can implement auth as well.
      here is the reference: docs.expo.dev/router/reference/authentication

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

    Great learing with you sir. Nicely explain routing, waiting for more content.

  • @rohanagrawal5747
    @rohanagrawal5747 26 днів тому

    thanks man

  • @Bkbois
    @Bkbois Рік тому +1

    So can the tabs header background colour be changed, like that of the stack screen?

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

    Good work 👌🏻

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

    Great tutorial. Please show how to make an animated drawer.

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

    do you need to use the native stack navigation swipe animation? Or is the stack navigation merely conceptual and you can choose the animation yourself?

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

    Great 🎉❤

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

    Nice, and drawer navigation not change ?

    • @codewithnomi
      @codewithnomi  Рік тому +2

      I'll create a video on this someday 😉

  • @Pan_Policjant
    @Pan_Policjant 9 місяців тому

    presentation modal doesnt work, is it because im on android?

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

    🎉

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

    guys please,how can we change baground fon on top screen where written the name of the our components and how can we get away this
    inscription?

  • @michealskup5730
    @michealskup5730 7 місяців тому

    hi there ! does modal work on android ?????????????

  • @lanskaba3668
    @lanskaba3668 Рік тому +1

    This is just like nextjs 13 app router

  • @paysnug4470
    @paysnug4470 11 місяців тому

    npm i react-native-modalize
    the modal is showing behing the tab
    the modal
    is showing behing

  •  Рік тому

    Hi, I've been following your work and technically you're very good. but I would like to know how to rotate the cell phone screen next to vs code.......I don't know if you understood me

  • @Pan_Policjant
    @Pan_Policjant 9 місяців тому

    how to test this deeplinking in android

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

    Can I hide tab bar when go to postId page?

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

      You will have to create a separate stack layout for postId page

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

      @@codewithnomi Thanks for replying.
      I already added stack layout to [id] folder, but tabbar is still shows.

  • @hubesh716
    @hubesh716 Рік тому +1

    That is totally similar with Next js

  • @user-rdr1712
    @user-rdr1712 Рік тому

    Why tsx instead of js? Is it mandatory to follow .tsx file?

  • @paysnug4470
    @paysnug4470 11 місяців тому

    the background inside tab is not working

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

    Sir plz make video how to . make Animated bottom Tabs with animated Drawer with navigation plz make this one with React native Reanimated

  • @osamaalmasalmeh6760
    @osamaalmasalmeh6760 Місяць тому

    🙅

  • @prodesigntz7776
    @prodesigntz7776 День тому

    we need a redo of expo 52 please stop using typescript has a lot of bias