I'm on the Tasks screen where I have a UI kitten Overflow Menu component bound to a card, while I'm on Tasks, it works as expected, but when I switch to another screen (Habits screen) and I go back to Tasks and press the dropdown menu icon the OverflowMenu appears on the Habits screen, not on Tasks.
This is a link for an expo snack to reproduce the problem.
I found the problem: you are using inside the add task component.
must be used only once and it should be on the top layer of your application “aka”
If you use it in multiple places it will break the app behavior as for each used the component will look at it as an anchor for its UI (in this case the dropdown will see the app provider in add task as the anchor after navigating to it so it will bypass the one wrapping the app.
For simpler words:
Think of the as a box, If you use another in a component inside of it you create a smaller box, once you visit that component’s screen the box now will be the smaller one and the UI kitten components will relate to and inside that box.
What happened exactly in your app:
The app renders ==> Generate the first (wrapping the navigator in App.js) ==> you click on the dropdown (everything is fine) ==> you navigate to “habits/Add task” screen ==>Generate a second (a smaller box)==> the dropdown now is linked to the new ApplicationProvider ==> you get back to “tasks” screen ==> click on the dropdown ==> it displays inside the new (the smaller box) That’s why you see it inside the “habits/Add task” screen