Debugging my react-native expo app in an android emulator, and this icon just started popping up on all my different emulators in the top left of the screen. I can't find any information about what it means, and it seems to be just blocking all touch interactions whatsoever. It went away on one of my emulators for seemingly no reason and all touch interactions started working again fine, but I have no idea how to make it go away on the other ones and cannot find any information about what the icon is supposed to indicate. It seems like it's specifically an expo/react-native thing because it only shows on the screen when my app is open. It only shows up on my android emulators.

Much appreciated

Debugging my react-native expo app in an android emulator, and this icon just started popping up on all my different emulators in the top left of the screen. I can't find any information about what it means, and it seems to be just blocking all touch interactions whatsoever. It went away on one of my emulators for seemingly no reason and all touch interactions started working again fine, but I have no idea how to make it go away on the other ones and cannot find any information about what the icon is supposed to indicate. It seems like it's specifically an expo/react-native thing because it only shows on the screen when my app is open. It only shows up on my android emulators.

Much appreciated

• android
• react-native
• expo
• android-emulator

1 Answer 1

I still do not know what this icon means, but the issue was apparently related to using the Modal dependency from react-native too high up in the ui chain (don't ask me where it's okay and where it's not).

I changed my implementation from using the modal to just simulating a modal via overlay styling with:

original

import { type Popup } from '@shady-pines-common/db';
import { StyleSheet, Modal, Animated } from 'react-native';
import { View } from '@/components/base/Themed';
import { ThemeColors } from '@/constants/Colors';
import { shadowStyle, ThemeSpacing } from '@/constants/styles/shared';

const styles = StyleSheet.create({
  overlay: {
    backgroundColor: ThemeColors.Transparent.Light,
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
  },
  content: {
    borderColor: ThemeColors.Black.Primary,
    backgroundColor: ThemeColors.Cream.Primary,
    borderRadius: 16,
    padding: ThemeSpacing.lg,
    width: '100%',
  },
});

export const AnnouncementOverlay = ({
  visible,
}: {
  popup: Popup;
  onDismiss: () => void;
  visible: boolean;
  totalRemaining: number;
}) => {
  return (
    <Modal transparent animationType="fade" visible={visible}>
      <View style={styles.overlay}>
        <Animated.View style={[shadowStyle.largeShadow, styles.content]} />
      </View>
    </Modal>
  );
};

after

import { StyleSheet } from 'react-native';
import { Pressable } from '@/components/base/Pressable';
import { View } from '@/components/base/Themed';
import { ThemeColors } from '@/constants/Colors';
import { shadowStyle, ThemeSpacing } from '@/constants/styles/shared';

const styles = StyleSheet.create({
  overlay: {
    backgroundColor: ThemeColors.Transparent.Light,
    position: 'absolute',
    top: 0,
    left: 0,
    right: 0,
    bottom: 0,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    zIndex: 100,
  },
  content: {
    borderColor: ThemeColors.Black.Primary,
    backgroundColor: ThemeColors.Cream.Primary,
    borderRadius: 16,
    padding: ThemeSpacing.lg,
    width: '100%',
    zIndex: 101,
  },
});

export const AnnouncementOverlay = () => {
  return (
    <View style={styles.overlay}>
      <View style={[shadowStyle.largeShadow, styles.content]}>
        <Pressable onPress={() => {}} />
      </View>
    </View>
  );
};

i still have no idea what the symbol means. but this was my issue and after the change the symbol went away