[BUG] Does this library prevent inspection of accessibilityLabels, IDs, and Test IDs?

[philipfong]

Because this library acts like an overlay on our mobile app, it seems to prevent the inspection of IDs on basic components like inputs boxes and buttons. Is there a way to incorporate this into our app while being able to view these type of props? We are looking to build automated tests in Maestro or Detox but are unable to without disabling this component.

[gunnartorfis]

If you use element inspector, does it look like this issue report? https://github.com/gunnartorfis/sonner-native/issues/114

Could you post your setup? How and where the Toaster is rendered especially.

[philipfong]

Hi @gunnartorfis -- yes that is pretty much the exact side effect that we're seeing.

Here is what looks to be the relevant code in our App.tsx

    <GestureHandlerRootView style={styles.layout}>
      <KeyboardProvider>
        <SafeAreaProvider>
          <QueryClientProvider client={queryClient}>
            <ModalProvider stack={modalStack}>
              <RootNavigator />
            </ModalProvider>
          </QueryClientProvider>
          <Toaster position="bottom-center" />
        </SafeAreaProvider>
      </KeyboardProvider>
    </GestureHandlerRootView>

If I remove the line with the Toaster tag I'm able to inspect elements again.

Please advise as we'd like to keep the toaster messages in place. Our other alternative is to remove this library conditionally for testing purposes.

[gunnartorfis]

@philipfong Is the NavigationContainer defined in the RootNavigator component?

Can you try moving the outside the KeyboardProvider?

<GestureHandlerRootView style={styles.layout}>
      <KeyboardProvider>
        <SafeAreaProvider>
          <QueryClientProvider client={queryClient}>
            <ModalProvider stack={modalStack}>
              <RootNavigator />
            </ModalProvider>
          </QueryClientProvider>
        </SafeAreaProvider>
      </KeyboardProvider>
      <Toaster position="bottom-center" />
    </GestureHandlerRootView>

[philipfong]

Tried that and it generates an error related to SafeAreaProvider.

Edit: @gunnartorfis to answer your first question, yes NavigationContainer is imported and used in the RootNavigator component.

Edit2: Looking into RootNavigator, all it does is return different navigation structures based on auth conditions. I tried moving <Toaster> over to those and still run into the same issue with the app being overlayed by the Toast component and unable to inspect elements/components.

[gunnartorfis]

@philipfong Keep the SafeAreaProvider around the Toaster, try that. This is roughly the exact same setup as my personal app uses:

<GestureHandlerRootView style={styles.layout}>
        <SafeAreaProvider>
      <KeyboardProvider>
          <QueryClientProvider client={queryClient}>
            <ModalProvider stack={modalStack}>
              <RootNavigator />
            </ModalProvider>
          </QueryClientProvider>
        </SafeAreaProvider>
      <Toaster position="bottom-center" />

      </KeyboardProvider>
    </GestureHandlerRootView>

[vargas-arthur]

@gunnartorfis I have the same problem. My setup is really similar to @philipfong.

Tried putting Toaster in different places but none worked.

[gunnartorfis]

@vargas-arthur could you share how you render the Toaster? A minimum repro GitHub repo would be highly appreciated.

[gunnartorfis]

@philipfong @vargas-arthur

https://github.com/gunnartorfis/sonner-native/issues/114#issuecomment-2427297469

Would be great to know if this works for you guys too!

[philipfong]

We've tried moving up and down our entire hierarchy without success. I've tried to move this right outside the NavigationContainer as the other issue recommends, but we're still not seeing elements.

I suspect maybe our usage of ModalProvider in react-native-modalfy is causing a problem? But I'm not too familiar with that library. Edit: That's not it either. We're a little bit at a loss here.

[gunnartorfis]

@philipfong I'm really confused about this as well. I recommend creating a minimum reproducible example, that might both help you narrow down the culprit and me fix it if it is an issue on my end.

[vargas-arthur]

Hey @gunnartorfis , I will try to do that this week and send it to you.