if let imageColor = details["imageColor"] {
 self.image = self.image?.withTintColor(RCTConvert.uiColor(imageColor), renderingMode: .alwaysOriginal)
}

if let imageColor = details["imageColor"] {
 let uiColor = RCTConvert.uiColor(imageColor)
 // Only apply tint if color is valid and not transparent (alpha > 0)
 // processColor(undefined) returns transparent color (0,0,0,0) which makes icons invisible
 if let color = uiColor {
 var red: CGFloat = 0
 var green: CGFloat = 0
 var blue: CGFloat = 0
 var alpha: CGFloat = 0
 if color.getRed(&red, green: &green, blue: &blue, alpha: &alpha) && alpha > 0 {
 self.image = self.image?.withTintColor(color, renderingMode: .alwaysOriginal)
 }
 }
}

import { MenuView } from '@react-native-menu/menu';
function TestMenu() {
 return (
 <MenuView
 actions={[
 {
 id: 'action1',
 title: 'Action with icon (no imageColor)',
 image: 'heart', // SF Symbol name
 // imageColor is undefined - this is the bug case
 },
 {
 id: 'action2',
 title: 'Another action',
 image: 'star',
 // imageColor is undefined
 },
 ]}
 onPressAction={(e) => console.log(e.nativeEvent.event)}>
 <Pressable>
 <Text>Open Menu</Text>
 </Pressable>
 </MenuView>
 );
}

import { MenuView } from '@react-native-menu/menu';
import { processColor } from 'react-native';
function TestMenuWithColor() {
 return (
 <MenuView
 actions={[
 {
 id: 'action1',
 title: 'Action with red icon',
 image: 'heart',
 imageColor: processColor('red'), // Valid color
 },
 {
 id: 'action2',
 title: 'Action with blue icon',
 image: 'star',
 imageColor: processColor('#007AFF'), // Valid color
 },
 ]}
 onPressAction={(e) => console.log(e.nativeEvent.event)}>
 <Pressable>
 <Text>Open Menu</Text>
 </Pressable>
 </MenuView>
 );
}

import { MenuView } from '@react-native-menu/menu';
import { processColor } from 'react-native';
function TestMenuWithTransparent() {
 return (
 <MenuView
 actions={[
 {
 id: 'action1',
 title: 'Action with transparent color',
 image: 'heart',
 imageColor: processColor('rgba(0,0,0,0)'), // Explicitly transparent
 },
 ]}
 onPressAction={(e) => console.log(e.nativeEvent.event)}>
 <Pressable>
 <Text>Open Menu</Text>
 </Pressable>
 </MenuView>
 );
}

import { MenuView } from '@react-native-menu/menu';
function TestMenuNoIcons() {
 return (
 <MenuView
 actions={[
 {
 id: 'action1',
 title: 'Action without icon',
 },
 {
 id: 'action2',
 title: 'Another action',
 },
 ]}
 onPressAction={(e) => console.log(e.nativeEvent.event)}>
 <Pressable>
 <Text>Open Menu</Text>
 </Pressable>
 </MenuView>
 );
}

import { MenuView } from '@react-native-menu/menu';
function TestMenuWithSubactions() {
 return (
 <MenuView
 actions={[
 {
 id: 'parent',
 title: 'Parent Action',
 image: 'folder', // No imageColor
 subactions: [
 {
 id: 'child1',
 title: 'Child 1',
 image: 'doc', // No imageColor
 },
 {
 id: 'child2',
 title: 'Child 2',
 image: 'doc.text', // No imageColor
 },
 ],
 },
 ]}
 onPressAction={(e) => console.log(e.nativeEvent.event)}>
 <Pressable>
 <Text>Open Menu</Text>
 </Pressable>
 </MenuView>
 );
}

import { MenuView } from '@react-native-menu/menu';
import { processColor } from 'react-native';
function TestMixedMenu() {
 return (
 <MenuView
 actions={[
 {
 id: 'action1',
 title: 'Default icon (no color)',
 image: 'heart',
 // No imageColor
 },
 {
 id: 'action2',
 title: 'Colored icon',
 image: 'star',
 imageColor: processColor('red'),
 },
 {
 id: 'action3',
 title: 'Another default icon',
 image: 'trash',
 // No imageColor
 },
 ]}
 onPressAction={(e) => console.log(e.nativeEvent.event)}>
 <Pressable>
 <Text>Open Menu</Text>
 </Pressable>
 </MenuView>
 );
}