Tushar Gupta
Tushar Gupta@madebytushar · Product Designer & Maker.

Figure out React Navigation

Completed on
@madebytushar are you referring to react-router?
@sudarsangp I was referring to this - https://reactnavigation.org/ because that's what Expo XDE uses!
@sudarsangp @madebytushar Thanks for sharing that, I have never seen it before. What are you having trouble with?
@madebytushar I can help you with that! What exactly are you having trouble with (My team has used React Native's Navigation tools in depth :D
@ralf_maamari @jamesstewart @sudarsangp Okay so I just started developing in React Native using Expo, and I selected the 3 Tabbed Default project, which uses the 'MainTabNavigator.js' navigation file to create a NavigatorStack object. But now I'm creating a 4th screen called "SearchResults" which needs to be called when I submit the text input in the search bar on the home screen... so how would the structure of the navigation change? Am I supposed to create another switch in the AppNavigator.js file? And another NavigatorStack object for this entire flow? Pretty confused. Here's the Github repo: Navigation Files: https://github.com/tushgup/shopp... Navigator Call: https://github.com/tushgup/shopp...
@jamesstewart @sudarsangp @madebytushar So the call looks fine, I think the thing messing you up is the structure of everything. I would advise you seperate the navigators and draw the structure you are trying to build in a Tree Format. Then you will see what is going on and how everything works. (I think right now you nested two navigators under each other but since they are in the same file you are confused as to how the navigation props are being manipulated) If you post the Tree Diagram of what you want I can help further :)
@jamesstewart @sudarsangp @ralf_maamari Ummm, okay. I still haven't figured out how to make this work. Pretty sure I'm doing something super silly :\ The app has a main bottom tab navigation, which is three major screens. And that three tabbed layout was a part of the template Expo generated for me. Now, I obviously need more than 3 screens for various parts of the app, but they won't be a part of the "main bottom nav", so I'm guessing the right way is to create a separate Stack Navigator for this flow, right? But I'm stuck at the implementation of this... I think the tree diagram will be something similar to this: (I figured out how they did it in the tutorial, https://medium.com/async-la/reac... - but I can't figure out how I'd do the same in my current folder structure. Thanks for taking out the time to help! :)
@jamesstewart @sudarsangp @ralf_maamari Update: I figured it out, thank you so much for all the help, guys! Really appreciate it. ^_^
@jamesstewart @sudarsangp @madebytushar Congratulations! Also for future reference, that's not the correct way to draw the Tree Diagram for it you want to have something like App | NamedStackNavigator (Not clumped up like that) / | \ ScreenOne ScreenTwo ScreenThree Ugh, it's hard to explain but basically, remember that everything in a stack is under the same layer (Level). Let me know I can be more clear because having this tool under your belt will be a huge advantage!