It looks like flow is buggy here. If I just use React.useRef<?React.ElementRef<typeof TouchableOpacity>> here I'm getting errors like:

Cannot call closeButtonRef.current.measure because property measure is missing in mixed [1]. [incompatible-use]

 [1] 442│     React.useRef<?React.ElementRef<typeof TouchableOpacity>>();
        :
     478│     if (!closeButtonRef.current) {
     479│       return;
     480│     }
     481│     closeButtonRef.current.measure((x, y, width, height, pageX, pageY) => {
     482│       closeButtonDimensions.value = { x: pageX, y: pageY, width, height };
     483│     });
     484│   }, [closeButtonDimensions]);

In the error message it looks like closeButtonRef.current is mixed, however if you inspect the type using yarn flow type-at-pos command it shows it's LegacyHostInstanceMethods.
If I change it to View then it all works ok.
Also if you change TouchableOpacity -> View just for the first button (closeButtonRef) then errors disappear for all buttons. If all buttons are TouchableOpacity then the errors appear for all 4 buttons.
If you dig into TouchableOpacity definition:

const Touchable: component(
  ref?: React.RefSetter<React.ElementRef<typeof Animated.View>>,
  ...props: TouchableOpacityProps
) = React.forwardRef((props, ref) => (
  <TouchableOpacity {...props} hostRef={ref} />
));

you'll see in the ref there is Animated.View. Now take a look at AnimatedComponentType that is returned from createAnimatedComponent:

export type AnimatedComponentType<Props: {...}, +Instance = mixed> = component(
  ref?: React.RefSetter<Instance>,
  ...AnimatedProps<Props>
);

maybe this mixed here is problematic and it works for View because there is no Animated component ref.

So I can see 2 solutions:

• cast to LegacyHostInstanceMethods
• use View in refs instead of TouchableOpacity - it isn't so wrong because TouchableOpacity is a View after all