Open Charles-Johnson opened 10 months ago
@flochtililoch , any insights on desired behavior here or other approaches with the new navigation system (focus/blur events)?
I would think the visible
trigger should only trigger when the element is actually visible on screen. If an event causes an unfocused screen to reload, the elements that are in the unfocused view-pane should not trigger the visible
behavior until their screen is focused again.
We can rely on the focus
/blur
event on the new navigation system, but we could probably amend the visible
handler to behave correctly for unfocused screens.
I ended up not using the navigation focus event listener because it actually caused the hyperview screen to go blank if you navigate to a hyperview screen and immediately scroll down. I instead explicitly triggered events to update elements with trigger="on-event"
and, in my fork, prevented the visibility action from being triggered when navigating screen on Android so that it is consistent with iOS
The VisibilityDetectingView component triggers actions when the screen that the hyperview component is in comes back into focus on an Android device but on iOS no actions are triggered when the screen comes back into focus.
After adding
console.log(arguments);
to the onMeasure method, when navigating away from the screen I had 5 views withtrigger="visible"
,I observed the output on Android:and on iOS:
So it looks like this.view.measure calls the callback (this.onMeasure) without any arguments on Android when views aren't in focus but does provide arguments for iOS regardless of whether the screen is in focus.
I'm not sure whether this is a bug in react-native or react-navigation or whether hyperview should handle this inconsistency.
I'm also not sure whether navigation actions should affect the
visible
trigger or whether a separate trigger should be implemented for navigation focus events.In order to unblock my work, in my fork of this library, I'm going to try to add an event listener in the
VisibilityDetectingView
for focus events: https://reactnavigation.org/docs/function-after-focusing-screen/#triggering-an-action-with-a-focus-event-listener