using Modal results in a red box error

[gillpeacegood]

Environment

Run the following in your terminal and copy the results here.

1. npx react-native --version: 4.13.0
2. npx react-native run-windows --info:

System:
    OS: Windows 10 10.0.18363
    CPU: (2) x64 Intel(R) Core(TM) i5-7600K CPU @ 3.80GHz
    Memory: 4.60 GB / 11.73 GB
  Binaries:
    Node: 12.16.3 - C:\Program Files\nodejs\node.EXE
    npm: 6.14.4 - C:\Program Files\nodejs\npm.CMD
  npmPackages:
    react: 16.13.1 => 16.13.1
    react-native: 0.63.2 => 0.63.2
    react-native-windows: ^0.63.0-0 => 0.63.1
  Installed UWP SDKs:
    10.0.18362.0

3. reg query "HKLM\SOFTWARE\Microsoft\Windows\CurrentVersion\AppModelUnlock"

    AllowDevelopmentWithoutDevLicense    REG_DWORD    0x1
    AllowAllTrustedApps    REG_DWORD    0x1

Steps To Reproduce

Provide a detailed list of steps that reproduce the issue.

1. From a freshly created react-native-windows project
2. Modify App.js to include a Modal

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  Modal
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

const App: () => React$Node = () => {
  return (
    <>

      <StatusBar barStyle="dark-content" />
      <SafeAreaView>
        <ScrollView
          contentInsetAdjustmentBehavior="automatic"
          style={styles.scrollView}>
          <Header />
          {global.HermesInternal == null ? null : (
            <View style={styles.engine}>
              <Text style={styles.footer}>Engine: Hermes</Text>
            </View>
          )}
          <View style={styles.body}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Step One</Text>
              <Text style={styles.sectionDescription}>
                Edit <Text style={styles.highlight}>App.js</Text> to change this
                screen and then come back to see your edits.
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>See Your Changes</Text>
              <Text style={styles.sectionDescription}>
                <ReloadInstructions />
              </Text>
            </View>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Debug</Text>
              <Text style={styles.sectionDescription}>
                <DebugInstructions />
              </Text>
            </View>
            <Modal visible={true}>
            <View style={styles.sectionContainer}>
              <Text style={styles.sectionTitle}>Learn More</Text>
              <Text style={styles.sectionDescription}>
                Read the docs to discover what to do next:
              </Text>
            </View>
            </Modal>
            
            <LearnMoreLinks />
          </View>
        </ScrollView>
      </SafeAreaView>
    </>
  );
};

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
});

export default App;

A red box appears : requireNativeComponent: RCTModalHostView was not found in the UIManager

Expected Results

Describe what you expected to happen.

A Modal appears

Snack, code example, screenshot, or link to a repository:

Please provide a Snack (https://snack.expo.io/), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.
You may provide a screenshot of the application if you think it is relevant to your bug report.
Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve

[asklar]

Dupe of #2989

[chrisglein]

Yep, this is not yet implemented.
Duplicate of #2989.

[SBS-olessia]

is there an update on Modal being implemented for windows apps? Absolute positioning workaround has not worked for me.

[chrisglein]

No updates, although feel free to capture your scenarios in the linked issue above. In general, there are lots of community options for capturing modal scenarios and the built in Modal one has less adoption. Many of those don't have Windows support at the moment (but could). Many people are working around this with the Flyout/Popup options available on RNW.

[SBS-olessia]

Thanks for the reply @chrisglein! I used Flyout as a a workaround but seems like there's an open issue where the full placement doesn't work if there are any Text elements inside. Github issue here: #2969

I'll try the Popup solution, thanks for the rec!