IOS Back gesture navigation - Stack

[Remeic]

Summary

Hello! First of all thank you for all the work you do, it's amazing!

I've never developed an app with Expo and React Navigation or Expo Router, I might have made some mistakes, sorry if that's the case.

I was trying to create a shared layout between subcategory pages.
The bug occurs when from the third and last page I try to swipe back, sometimes instead of taking me to the previous screen it takes me directly to the initial one.
I am attaching a demonstration video and a codesanbox, I haven't been able to replicate the problem on the web, but I hope it will still be useful.

I don't know if I'm doing things right, I would mainly like all the screens to have the Stack as a navigator, so that I can take advantage of the gestures and then the header.
Any advice is welcome, even on any errors that don't directly affect the bug

Project structure:

RPReplay_Final1670153687.MP4

I hope I have provided all the necessary information

Minimal reproducible example

https://codesandbox.io/s/issue-ios-back-gesture-skvp1y

// app/_layout.tsx

import { Stack, RootContainer } from 'expo-router'
import { DarkTheme } from '@react-navigation/native'
import { FC } from 'react'

export const Layout: FC = () => {
  return <>
      {/* These props will be applied to the parent NavigationContainer. */}
      <RootContainer theme={DarkTheme} />
      <Stack screenOptions={{ headerShown: false, contentStyle: { paddingTop: 24, paddingBottom: 24, paddingLeft: 8, paddingRight: 8 } }} />
  </>
}
export default Layout

// app/sub/_layout.tsx

import React, { FC } from 'react'
import { Stack } from 'expo-router'

export const CustomLayout: FC = () => {
  return (<>
      <Stack screenOptions={{
        headerShown: false,
        contentStyle:
        {
          paddingTop: 24,
          paddingBottom: 24,
          paddingLeft: 8,
          paddingRight: 8
        }
      }} />
  </>)
}

export default CustomLayout

[EvanBacon]

Thanks for the comprehensive issue report.

So you have two nested stack navigators which is a bit of an anti-pattern. If you remove the headerShown: false you can get a sense for what's going wrong here. There are effectively two screens in the top-most stack index, and sub/_layout. Because there's horizontal padding on the sides of the native container, the inner-stack's swipe logic is being interrupted.

Removing contentStyle in favor of a nested child with padding should fix the issue. Alternatively, you can also combine the two stack navigators.

[Remeic]

@EvanBacon Thank you so much for helping me so quickly.

I hadn't really noticed the double header because I had hidden it, my mistake.

To avoid the antipattern of the two nested stack navigators, could you recommend me an approach to have a shared layout between two screens inside the sub folder that still use the Stack navigator?

I tried to change the layout like this (code below) but going back from screen 3 takes me directly to the first one, I think I misunderstood your advice.

import React, { FC } from 'react'
import { Children } from 'expo-router'
import { Typography } from 'src/components'

export const CustomLayout: FC = () => {
  return (<>
      <Typography variant={'button'}>Shared Header</Typography>
      <Children />
    </>)
}

export default CustomLayout

Thanks a lot again Evan, and sorry for issue reopening

[EvanBacon]

I don't quite understand your issue now. If you update the app/_layout.js file to look like this, then there will only be one stack and you should have normal navigation.

import {
  ThemeProvider,
  DarkTheme,
  DefaultTheme,
} from "@react-navigation/native";


import { Slot  } from 'expo-router'


export const Layout = () => {
  return (
    <ThemeProvider value={DarkTheme}>
      <Slot  />
    <ThemeProvider/>
  )
}
export default Layout