I have built a list with a few subsections (hence using the library SectionList). I have implemented a drag and drop gesture to be able to rearrange items inside and across sections. The drag and drop gesture logic I have implemented measures the drop action, and compares it with the coordinates of each item, and based on the relative position, rearranges items accordingly. This works well, but I have had to come up with temporary, not-ideal solutions I’m afraid may cause problems in the future due to unexpected behavior of the combination of SafeAreaView + my logic.

I am wrapping this screen of my app using SafeAreaView to account for potential variations in screens of devices that will use my app in the future. Inside the SafeAreaView, is the SectionList component, inside of which, is the standard method ‘renderItem’ that renders each list item. To get measurements for my drag and drop logic, my custom renderItem method calls the ‘measure()’ function on layout (added in the onLayout() method of the renderItem function).

The unexpected behaviour is that, the very first initial measurement taken when rendering for the first time upon launching the app, does not take into account the insets added from SafeAreaView. All subsequent measurements do. So I have to adjust manually adding insets using useSafeAreaInsets() in the onLayout measurement at the beginning of the program then stopping after the app is running.

The measure() function called by the OnLayout() or by any other function after the initial render works well and takes into account the insets internally/automatically. The weird behavior occurs just the very first render. Any idea why?

I am using the most recent versions of everything as far as I know, and my app is working as I want it too, with my manual adjustment