Why I got an Error: Can't display popup. Could not find view with tag XXX when using UIManager.showPopupMenu() method in React Native

Hello Everyone!

I want to show a native popup menu in Android using UIManager.showPopupMenu() method, but I got an Error Can't display the popup. Could not find view with tag XXX at the docs the first parameter of that method should be filled with a view tag number using the findNodeHandle() method.

It works fine if I am using a ref from <Pressable ref={handlePopupRef} /> but It doesn't work if I am using a ref from <View ref={handlePopupRef}></View>

I have no idea what's wrong with my code even when I am trying with ref callback it still doesn't work like <View ref={ref => handlePopupRef.current = ref}></View>

Code Samples

Icon.tsx

import React, {forwardRef, RefAttributes} from 'react';import {View, StyleProp, TextStyle} from 'react-native';import Icon from 'react-native-vector-icons/Feather';interface IconHelperProps {  name?: string;  size?: number;  color?: string;  style?: StyleProp<TextStyle>;}const IconHelper: React.ForwardRefExoticComponent<  IconHelperProps & RefAttributes<null>> = forwardRef((props, ref) => {  return (<View ref={ref}><Icon        name={props.name || 'help-circle'}        size={props.size || 24}        color={props.color || '#242424'}        style={[props.style]}      /></View>  );});export default IconHelper;

Button.tsx

import React, {useRef, useState} from 'react';import {  Pressable,  UIManager,  findNodeHandle,  StyleProp,  TextStyle,  ViewStyle,} from 'react-native';import Icon from './Icon';import Text from './Text';export interface ButtonHelperProps {  title?: string;  iconName?: string;  iconSize?: number;  iconColor?: string;  isDropdown?: boolean;  dropdownMenu?: string[];  style?: StyleProp<ViewStyle>;  textStyle?: StyleProp<TextStyle>;  onPress?: () => void;  onPressDropdownMenu?: (i: number | undefined) => void;}const Button: React.FC<ButtonHelperProps> = props => {  const {title, iconName, isDropdown} = props;  const [bgColor, setBgColor] = useState('transparent');  const handlePopupRef = useRef(null);  return (<Pressable      onPressIn={() => {        setBgColor('#E3E3E7');      }}      onPress={() => {        if (isDropdown) {          UIManager.showPopupMenu(            findNodeHandle(handlePopupRef.current),            props.dropdownMenu || ['Sample Menu'],            error => {              console.log(error);              console.error('Error Show Popup');            },            (e, i) => {              props.onPressDropdownMenu?.(i);            },          );        } else {          props.onPress?.();        }      }}      onPressOut={() => {        setBgColor('transparent');      }}      style={[        {          backgroundColor: bgColor,          borderRadius: title ? 8 : 0,          flexDirection: 'row',          alignItems: 'center',        },        props.style,      ]}>      // It's work fine when I am using a Ref from Pressable component      {/* {isDropdown && <Pressable ref={handlePopupRef}></Pressable>} */}      // But it doesn't work when I am using a Ref from View component      {iconName && (<Icon          name={iconName}          size={props.iconSize}          color={props.iconColor}          ref={ref => (handlePopupRef.current = ref)}        />      )}      {title && (<Text          size={14}          bold          style={[            {              paddingHorizontal: 24,              paddingVertical: 12,            },            props.textStyle,          ]}>          {title}</Text>      )}</Pressable>  );};export default Button;