fix: Clear touch :hover on a blank tap inside an Android Modal

[MatiPl01]

Clear touch :hover on a blank-space tap inside an Android Modal/Dialog - a separate OS window the Activity-window observer couldn't see. iOS already handles this via its key-window observer.

Demo

A blank tap inside a Modal clears a stuck :hover

Open the modal, tap the box to hover it (turns orange), then tap the blank space.

Before, the blank tap inside the Modal/Dialog window leaves :hover stuck (the Activity-window observer is blind to that window).

After, the blank tap clears it. Recorded on an Android emulator; the crosshair and yellow touch dot are the system pointer overlay showing each tap.

Before	After
modal-hover-before.1.mp4	modal-hover-after.1.mp4

Example source

import React, { useState } from 'react';
import { Modal, Pressable, StyleSheet, Text, View } from 'react-native';
import Animated from 'react-native-reanimated';

export default function EmptyExample() {
  const [open, setOpen] = useState(false);

  return (
    <View style={styles.container}>
      {/* A `:hover` element must be registered before the modal opens so the
          extra-window observer is installed in time. This tiny always-mounted
          view is enough. */}
      <Animated.View
        style={{
          width: 1,
          height: 1,
          backgroundColor: { default: 'transparent', ':hover': 'transparent' },
        }}
      />

      <Pressable style={styles.button} onPress={() => setOpen(true)}>
        <Text style={styles.buttonText}>Open modal</Text>
      </Pressable>

      <Modal transparent visible={open} onRequestClose={() => setOpen(false)}>
        <View style={styles.backdrop}>
          <View style={styles.card}>
            {/* Tap this box to hover it (turns orange)... */}
            <Animated.View
              onStartShouldSetResponder={() => true}
              style={{
                width: 160,
                height: 160,
                borderRadius: 24,
                backgroundColor: { default: '#3b82f6', ':hover': '#f76707' },
                transitionDuration: '150ms',
              }}
            />

            {/* ...then tap this blank space: it clears the hover */}
            <View style={styles.blankSpace} />

            <Pressable style={styles.button} onPress={() => setOpen(false)}>
              <Text style={styles.buttonText}>Close</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    gap: 20,
  },
  button: {
    paddingVertical: 12,
    paddingHorizontal: 24,
    borderRadius: 12,
    backgroundColor: '#3b82f6',
  },
  buttonText: {
    color: 'white',
    fontWeight: '600',
  },
  backdrop: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: 'rgba(0, 0, 0, 0.4)',
  },
  card: {
    padding: 28,
    gap: 20,
    borderRadius: 22,
    alignItems: 'center',
    backgroundColor: '#0b1020',
  },
  blankSpace: {
    height: 120,
    width: '80%',
  },
});