Setting up swipe navigation

I am wondering how to set up navigation that allows users to swipe from the left to go back to the previous screen. I currently have a tab navigator set up for my main pages, but I would also like users to be able to swipe to go back to the previous page. Is this possible?

Hi Dylan,

You can use swipe navigation in Stack Navigators! There’s no additional configuration required to enable this. Let me know if you need help setting yours up.

Thanks,
Angela

I saw where I can add a Stack Navigator and how to add screens. Is it possible to use both navigation types? I was envisioning being able to swipe back to a previous screen, but also have the Tab Navigator on the bottom.

Yes, you can put Stack Navigators inside of Tab Navigators and assign each stack to a tab! You’ll still be able to swipe between screens in the stack.

The example below is what I currently have laid out for navigation. The first Stack Navigator is showing up under the Tab Navigator, but I cannot seem to make anything else show up on the Tab Navigator. Does each icon on the Tab Navigator have to be linked to a Stack Navigator? Or I can have some tabs linked to Stack Navigators and some linked to static pages?

Example Nav Layout

I want to clarify – are you having trouble viewing the Tab Navigator on Live Preview? If so, I can take a look into that and see what’s going on. You can link each tab in the Tab Navigator to a Stack Navigator or just a static screen.

I’m having trouble viewing the updated Tab Navigator in Expo. Does the way I have the Navigator laid out in the photo look like it should be working? Whenever I scan the QR code to view my app in Expo, it is showing me an outdated version of my app, with pages that I have previously deleted.

Ah, at second glance, you may be experiencing some issues because you have the Vendor Details screen in two places – once inside of the Stack Navigator and another time in a separate tab. Could you try removing the screen from one of those spots and see if it works in Live Preview properly? If you’re still experiencing issues, let me know and I’ll go inside of the app and take a look.

That fixed the problem! Now things are looking as they should. So just to clarify, is there any way to have a screen in both a Stack Navigator AND Tab Navigator as a link to static page?

Glad everything is working properly! So I just checked with engineering – having the same screen in two places will work fine after your export your project or generate a PWA, it’s just having the same screen in two places will cause issues in Live Preview. For the Live Preview experience, I would suggest making a copy of your screen and placing the copy in another navigator.