Popover and Modal Position / Anchor Sometimes Wrong (Potential Race Condition?)

🐛 Bug Report

We have been using UI Kitten for a while now with Expo Go, and it has been great! However, when we recently made a development build, we encountered a weird bug on (as far as we know) iPhone 13's running IOS 16.3.1 with the popover component where it wasn't using the proper anchor or Popover Placements.

We found this extremely odd, so first we checked and upgraded our package.json to use the latest versions "@ui-kitten/components": "^5.3.0", "@ui-kitten/eva-icons": "^5.3.0" and tried running it again on Expo Go, and we encountered it again. What we noticed that was also odd was the fact that it happens randomly where sometimes it is correct and other times where it is not correct, suggesting almost a race condition? (See attached video). When we then switched to using a modal component as a workaround as this didn't have the placement position, we noticed this still occurs (See second attached video), suggesting it may be something else and not just the Popover Placements.

Videos

https://user-images.githubusercontent.com/74498986/233358287-07f19ce0-8a8e-4195-9df9-4f15be1b2146.MP4

https://user-images.githubusercontent.com/74498986/233358294-4555ef61-da2c-47d5-9460-b04082417a0d.MP4

To Reproduce

A snapshot of our code for this section is as followed, and we think we are using this component correctly; happy to try and create a snack as well if it helps.

const renderScheduleCallOptions = () => (
    <TouchableOpacity
      onPress={() => {
        setScheduleMenuVisible(true);
      }}
      style={styles.scheduleCallButton}
    >
      <Icon
        style={styles.scheduleButtonIcon}
        name={props.isCallScheduled ? "calendar-times-o" : "calendar-plus-o"}
        color="white"
        size={32}
      />
    </TouchableOpacity>
  );

  return (
    <Popover
      anchor={renderScheduleCallOptions}
      visible={scheduleMenuVisible}
      placement="left end"
      backdropStyle={styles.backdrop}
      onBackdropPress={() => setScheduleMenuVisible(false)}
    >
            <Text category="s1" style={{ paddingHorizontal: 40 }}>
              Be called in...
            </Text>
            <Select
              style={{ marginVertical: 16 }}
              selectedIndex={scheduleOptions.timeSelectIndex}
              value={scheduleOptions.displayValue + " mins time"}
              onSelect={(index) => onTimeSelectChanged(index as IndexPath)}
            >
              <SelectItem title={"2 mins time"} />
              <SelectItem title={"5 mins time"} />
              <SelectItem title={"10 mins time"} />

https://user-images.githubusercontent.com/74498986/233358154-cfd7a7da-69d3-4314-93c5-f0e1597d09f7.MP4

https://user-images.githubusercontent.com/74498986/233358176-d146c188-73f9-473f-8d30-53d272f97fda.MP4

              <SelectItem title={"15 mins time"} />
              <SelectItem title={"20 mins time"} />
              <SelectItem title={"25 mins time"} />
              <SelectItem title={"30 mins time"} />
            </Select>
            <Button
              onPress={() => {
                setScheduleMenuVisible(false);
              }}
            >
              Schedule
            </Button>
    </Popover>
);

Expected behaviour

Should be consistent and at the right placement

UI Kitten and Eva version

Package	Version
@eva-design/eva
@ui-kitten/components	5.3.0

Environment information

Using UI Kitten with Expo Go but also affects development builds

akveo / react-native-ui-kitten