Open philipfong opened 1 week ago
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.
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.
@philipfong Is the NavigationContainer defined in the RootNavigator component?
Can you try moving the
<GestureHandlerRootView style={styles.layout}>
<KeyboardProvider>
<SafeAreaProvider>
<QueryClientProvider client={queryClient}>
<ModalProvider stack={modalStack}>
<RootNavigator />
</ModalProvider>
</QueryClientProvider>
</SafeAreaProvider>
</KeyboardProvider>
<Toaster position="bottom-center" />
</GestureHandlerRootView>
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.
@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>
@gunnartorfis I have the same problem. My setup is really similar to @philipfong.
Tried putting Toaster in different places but none worked.
@vargas-arthur could you share how you render the Toaster? A minimum repro GitHub repo would be highly appreciated.
@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!
We've tried moving
I suspect maybe our usage of Edit: That's not it either. We're a little bit at a loss here.ModalProvider
in react-native-modalfy
is causing a problem? But I'm not too familiar with that library.
@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.
Hey @gunnartorfis , I will try to do that this week and send it to you.
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.