react-native-macos Invariant Violation: requireNativeComponent: "RCTModalHostView" was not found in the UIManager.

[michelcrypt4d4mus]

Installed the package with npm, setup a basic component by copy/pasting the example (see below for code), and get this error:

Invariant Violation: requireNativeComponent: "RCTModalHostView" was not found in the UIManager.

This error is located at:
    in RCTModalHostView (created by Modal)
    in Modal (created by DropdownModal)
    in DropdownModal
    in RCTView (created by View)
    in View
    in Unknown (created by TouchableOpacity)
    in TouchableOpacity (created by TouchableOpacity)
    in TouchableOpacity
    in Unknown (created by AppConfigPanel)
    in RCTView (created by View)
    in View (created by AppConfigPanel)
    in AppConfigPanel (created by SceneView)
    in StaticContainer
    in EnsureSingleNavigator (created by SceneView)
    in SceneView (created by CardContainer)
    in RCTView (created by View)
    in View (created by CardContainer)
    in RCTView (created by View)
    in View (created by CardContainer)
    in RCTView (created by View)
    in View
    in CardSheet (created by Card)
    in RCTView (created by View)
    in View
    in Unknown (created by Card)
    in Dummy (created by Card)
    in <…>

Environment:

• npm --version: 10.5.0
• node --version: v21.7.2

package.json:

    "@react-navigation/native": "^6.1.17",
    "@react-navigation/native-stack": "^6.9.26",
    "@react-navigation/stack": "^6.3.29",
    "@reduxjs/toolkit": "^2.2.5",
    "formik": "^2.4.6",
    "lodash": "^4.17.21",
    "react": "^18.2.0",
    "react-native": "^0.73.8",
    "react-native-macos": "^0.73.27",
    "react-native-menubar-extra": "^0.3.1",
    "react-native-safe-area-context": "^4.10.1",
    "react-native-screens": "^3.31.1",
    "react-native-select-dropdown": "^4.0.1",
    "react-redux": "^9.1.2"

Code, copied from the example project but removing the Icon references:

import { StyleSheet, Text, View } from "react-native";

// import Icon from '@react-native-vector-icons/fontawesome';
import SelectDropdown from 'react-native-select-dropdown';

export default function AppConfigPanel() {

    const emojisWithIcons = [
        {title: 'happy', icon: 'emoticon-happy-outline'},
        {title: 'cool', icon: 'emoticon-cool-outline'},
        {title: 'lol', icon: 'emoticon-lol-outline'},
        {title: 'sad', icon: 'emoticon-sad-outline'},
        {title: 'cry', icon: 'emoticon-cry-outline'},
        {title: 'angry', icon: 'emoticon-angry-outline'},
        {title: 'confused', icon: 'emoticon-confused-outline'},
        {title: 'excited', icon: 'emoticon-excited-outline'},
        {title: 'kiss', icon: 'emoticon-kiss-outline'},
        {title: 'devil', icon: 'emoticon-devil-outline'},
        {title: 'dead', icon: 'emoticon-dead-outline'},
        {title: 'wink', icon: 'emoticon-wink-outline'},
        {title: 'sick', icon: 'emoticon-sick-outline'},
        {title: 'frown', icon: 'emoticon-frown-outline'},
    ];

    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Text style={styles.headerTxt}>Demo</Text>
            </View>

            <SelectDropdown
                data={emojisWithIcons}
                onSelect={(selectedItem, index) => console.log(selectedItem, index)}
                renderButton={(selectedItem, isOpen) => {
                    return (
                        <View style={styles.dropdownButtonStyle}>
                            {selectedItem && <Text>'selectedItem'</Text>}

                            <Text style={styles.dropdownButtonTxtStyle}>
                                {(selectedItem && selectedItem.title) || 'Select your mood'}
                            </Text>

                            <Text> {isOpen ? 'chevron-up' : 'chevron-down'}</Text>

                            {/* <Icon name={isOpen ? 'chevron-up' : 'chevron-down'} style={styles.dropdownButtonArrowStyle} /> */}
                        </View>
                    );
                }}
                renderItem={(item, index, isSelected) => {
                    return (
                        <View
                            style={{
                                ...styles.dropdownItemStyle,
                                ...(isSelected && {backgroundColor: '#D2D9DF'}),
                            }}>

                            {/* <Icon name={item.icon} style={styles.dropdownItemIconStyle} /> */}
                            <Text style={styles.dropdownItemTxtStyle}>{item.title}</Text>
                        </View>
                    );
                }}
                showsVerticalScrollIndicator={false}
                dropdownStyle={styles.dropdownMenuStyle}
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        flex: 1,
        paddingVertical: 100,
        alignItems: 'center',
        justifyContent: 'space-evenly',
        paddingTop: 90,
    },
    header: {
        position: 'absolute',
        top: 0,
        width: '100%',
        height: 90,
        backgroundColor: '#E9ECEF',
        justifyContent: 'flex-end',
        alignItems: 'center',
        paddingBottom: 16,
    },
    headerTxt: {
        fontSize: 18,
        fontWeight: 'bold',
        color: '#151E26',
    },
    dropdownButtonStyle: {
        width: 200,
        height: 50,
        backgroundColor: '#E9ECEF',
        borderRadius: 12,
        flexDirection: 'row',
        justifyContent: 'center',
        alignItems: 'center',
        paddingHorizontal: 12,
    },
    dropdownButtonTxtStyle: {
        flex: 1,
        fontSize: 18,
        fontWeight: '500',
        color: '#151E26',
    },
    dropdownButtonArrowStyle: {
        fontSize: 28,
    },
    dropdownButtonIconStyle: {
        fontSize: 28,
        marginRight: 8,
    },
    dropdownMenuStyle: {
        backgroundColor: '#E9ECEF',
        borderRadius: 8,
    },
    dropdownItemStyle: {
        width: '100%',
        flexDirection: 'row',
        paddingHorizontal: 12,
        justifyContent: 'center',
        alignItems: 'center',
        paddingVertical: 8,
    },
    dropdownItemTxtStyle: {
        flex: 1,
        fontSize: 18,
        fontWeight: '500',
        color: '#151E26',
    },
    dropdownItemIconStyle: {
        fontSize: 28,
        marginRight: 8,
    },
});

[jasonmcaffee]

I get the same error. going to switch libraries to Picker, as this isn't supported by react-native-windows: https://github.com/microsoft/react-native-windows/issues/1978