#14825 Accessing page content when using deeply nested React Navigation navigators on iOS Using Appium

Update:

Tips for the react native
- Some nested element cases, you may need to set accessible={false} in the outer element and set accessible={true} in the inner element to interact with the inner element
- snapshotMaxDepth customSnapshotTimeout may help to control how deep Appium XCUITest get the element tree recursively
  - https://appium.github.io/appium-xcuitest-driver/latest/settings/
  - The 60 depth maximum was added to prevent apps from slowing down system performance when UI queries occur during an XCTest UI test. Unfortunately React Native often creates nested hierarchies that are larger than 60 levels of depth on iOS. That said, you should be able to use webdriverIO for testing, which would not face this 60 depth maximum limit.
    - by Developer Tools Engineer in Apple https://developer.apple.com/forums/thread/749918?answerId=800794022#800794022
- mobile: source with https://appium.github.io/appium-xcuitest-driver/latest/execute-methods/#mobile-source with excludedAttributes visible may help to make the load faster by skipping time consuming attribute resolution
  - pageSourceExcludedAttributes settings does the same thing for a general page source result
- testID handling: https://github.com/wix/Detox/blob/master/website/versioned_docs/version-20.x/guide/test-id.md
- https://github.com/appium/appium/issues/14825#issuecomment-2471051537 would be helpful

problem:

Does anyone have any experience with React Navigation 5 on iOS and nested navigators?

It appears that in appium once the navigation tree hits 5 nested navigators on iOS that instead of being able to access the current pages content it returns a single XCUIElementTypeOther element.

For instance if the navigation tree looks like Stack -> Tab -> Stack -> Tab then the content tree is rendered correctly

But if there’s an extra level such as Stack -> Tab -> Drawer -> Stack -> Tab then the content tree becomes that single XCUIElementTypeOther element

I had initial thought this could be down to not using the accessible prop correctly on the view containing the content (as this can cause similar behaviour) but after testing out a number of different nested navigation configurations and setting this prop on every view I believe it’s due to this.

I don’t have this issue on Android as the same structure works perfectly fine, is there just some config I’m missing?

Environment

Appium version 1.18.3