Not able to locate child element with Appium Inspector, but can see testID in parent app source

Question

I am having some issues with locating the Navigation bar (highlighted by me in the picture) on my React Native iOS app. I have a function which handles setting test Id and accessibility, accessibilityLabel for any component and I have that on my avatar (WJ) as well as the home button.

Environment

• Appium version (or git revision) that exhibits the issue: Server 1.22.0 Inspector 2021.12.2
• Desktop OS/version used to run Appium: macOS Monterey 12.0.1
• Mobile platform/version under test: iOS 15.2 Simulator
• Real device or emulator/simulator: iPad Pro 12.9 5th Generation

The Appium inspector recognizes everything else on this page, except for this Navigation component.

What makes things weirder is that while I can’t identify the element with the Appium inspector (or the search for Id/Accessibility Id), I can see that in the parent component in the App Source, my test IDs are being listed along with the whole app!!

Image: https://imgur.com/a/3rdIxe8

Furthermore, I can identify these elements when accessibility is set to true and I use the Xcode inspector.

Is there a way to disable the entire parent component so it’s not grouping everything into one component?

Here is the return for my App.tsx, where the Navigation is being called.

  return (
    <AuthContext.Provider value={{authToken, setAuthToken}}>
      <NavigationContainer linking={Linking} ref={navigationRef}>
        {!authToken && (
          <Stack.Navigator>
            <Stack.Screen
              name={Routes.SIGN_IN}
              component={SignInScreen}
              options={HIDE_STACK_HEADER}
            />
          </Stack.Navigator>
        )}
        {authToken && (
          <Stack.Navigator>
            <Stack.Screen
              name={Routes.HOME}
              component={HomeScreen}
              options={HIDE_STACK_HEADER}
            />
            <Stack.Screen
              name={Routes.REQUEST_DETAILS}
              component={RequestDetailsScreen}
              options={HIDE_STACK_HEADER}
            />
          </Stack.Navigator>
        )}
      </NavigationContainer>
      {authToken && <Navigation />}
      <Drawer />
      <VideoView />
      <Toaster id={NotifierIds.TOASTER} position={ToasterPositions.RIGHT} />
    </AuthContext.Provider>
  );

Here is part of my Navigation component, notice I have accessibility set to false on the main component.

  return (
    <View accessible={false} style={[TAB_STYLES.container, PlatformHelper.isIOS && TAB_STYLES.ios]}>
…
      <View
        accessible={false}
        style={[
          TAB_STYLES.side,
          {height: height - Sizing.BASE * (PlatformHelper.isIOS ? 6 : 4)},
        ]}>
        {_.map(navRouteButtons, (button: NavigationRouteButton) => (
          <TouchableOpacity
          {...accessibility("navigation-home")}
            key={button.route}
            style={TAB_STYLES.navRouteButton}
            onPress={() => {
              InactivityHelper.onAction();
              navigate(button.route, button.params);
            }}>
            {button.icon}
          </TouchableOpacity>
    …
<View>
          <TouchableOpacity
            {...accessibility("navigation-avatar")}
            style={TAB_STYLES.avatar}
            onPress={() => {
              InactivityHelper.onAction();
              setDropdownVisible(!dropdownVisible);
            }}>
            {getUserInitials()}
          </TouchableOpacity>
        </View>
      …      </View>
    </View>
  );