mybigday / react-native-external-display Goto Github PK

Let me start by saying that I think this is an awesome project!

I came across the project last week so I decided to clone the repo and install a release build of the example app on my phone. I enabled Airplay on my phone and tried to stream the screens to my AppleTV. It works great with the video screen! The other screens don't seem to work. I then tried to run the app in the simulator with an external display. The other screens are rendered to the simulated external screen as expected.

Ref: https://developer.android.com/guide/topics/large-screens/multi-window-support

I think it's possible to support multi-window on Android, as it's currently supported on iOS. We don't have such a need internally at the moment, if anyone is interested in contributing I can help.

Hi,

we are having artifacts on the second screen when changing the content of the second screen. First we display some text and further change to a webrtc view which covers the whole stream. I debugged a bit the code and found out, that some (not all) text views of the formerly added screen where still into the render tree.
I tried to remove them in RNExternalDisplayView.removeViewAt, but failed with IndexOutOfBounds.
Help would be appreciated!

Thanks in advance!

Kai

Please can you provide type definitions for this library? I can not seem to find any under the @types repo either.

I want to use a Scrollview on external display.
But there is a problem, because on external display there is no RootView component.

I tried to change in RNExternalDisplayView type of wrap from ReactViewGroup to ReactRootView, and scroll is working.

Can it be changed?

any way to fix this error ?
I tried to use on React Native Typescript Expo.
when I called any method from "react-native-external-display" it's always pop this error "TypeError: null is not an object (evaluating 'RNExternalDisplayEvent.SCREEN_INFO')" and crash

Wondering how to use this module in Expo? Would be great if there could have a simple example.

If I connect to a screen using "Screen Mirroring" on my iPad, and then start my application it will throw an error:

To reproduce, just connect to a screen with airplay on iOS. After it connected, start the application or reload the app.

import {ExternalDisplay} from 'react-native-external-display';

Oddly enough, if I start the application first and then connect to my screen via airplay, there is no issue. There is also no issues whatsoever if I'm connecting with an HDMI instead of using airplay. Not sure what's going on here. I'd take a crack at fixing it but I just have no experience in writing objective C or writing native code within React Native, and don't really know what's going on in the functions themselves.

I'm wondering if this will occur for everyone

Edit: Sorry, this was related to a change I made in the iOS native code. Removing that change made it so this doesn't happen.

Firstly, thanks for your work on this project!!!

Today I used patch-package to patch [email protected] for the project I'm working on.

Since I have updated to Scene API for my react native project, the UIScreen way did not work as expected (only blank screen). I replaced the UIScreen APIs to UIWindowScene APIs and it would work.

I create the issue and attached the patch here to see if it would help anyone who faces the same issue.

Here is the diff that solved my problem:

diff --git a/node_modules/react-native-external-display/ios/RNExternalDisplayEvent.m b/node_modules/react-native-external-display/ios/RNExternalDisplayEvent.m
index a398c40..95f7326 100644
--- a/node_modules/react-native-external-display/ios/RNExternalDisplayEvent.m
+++ b/node_modules/react-native-external-display/ios/RNExternalDisplayEvent.m
@@ -11,7 +11,7 @@ @implementation RNExternalDisplayEvent
 
 + (BOOL)requiresMainQueueSetup
 {
-  return NO;
+  return YES;
 }
 
 - (NSDictionary *)constantsToExport
@@ -36,38 +36,40 @@ -(NSArray *)supportedEvents {
 }
 
 -(NSDictionary *)getScreenInfo {
-  NSArray *screens = [UIScreen screens];
+  NSSet *scenes = [UIApplication sharedApplication].connectedScenes;
   NSMutableDictionary *screenInfo = [[NSMutableDictionary alloc] init];
-  NSUInteger index = 0;
-  for (UIScreen* screen in screens) {
-    if (screen != UIScreen.mainScreen) {
+  for (UIWindowScene* scene in scenes) {
+    if (![scene.session.role isEqual:UIWindowSceneSessionRoleApplication]) {
       [screenInfo
         setValue:@{
-          @"id": @(index),
-          @"width": @(screen.bounds.size.width),
-          @"height": @(screen.bounds.size.height),
-          @"mirrored": @(screen.mirroredScreen == UIScreen.mainScreen),
+          @"id": scene.session.persistentIdentifier,
+          @"width": @(scene.screen.bounds.size.width),
+          @"height": @(scene.screen.bounds.size.height),
+          @"mirrored": @(scene.screen.mirroredScreen == UIScreen.mainScreen),
 #if !TARGET_OS_TV
-          @"wantsSoftwareDimming": @(screen.wantsSoftwareDimming),
+          @"wantsSoftwareDimming": @(scene.screen.wantsSoftwareDimming),
 #endif
           // @"maximumFramesPerSecond": @(screen.maximumFramesPerSecond),
         }
-        forKey:[NSString stringWithFormat: @"%ld", index]
+        forKey:scene.session.persistentIdentifier
       ];
     }
-    index++;
   }
   return screenInfo;
 }
 
 - (void) handleScreenDidConnectNotification: (NSNotification *)notification{
-  NSDictionary* screenInfo = [self getScreenInfo];
-  [self sendEventWithName:@"@RNExternalDisplay_screenDidConnect" body:screenInfo];
+    dispatch_async(dispatch_get_main_queue(), ^{
+        NSDictionary* screenInfo = [self getScreenInfo];
+        [self sendEventWithName:@"@RNExternalDisplay_screenDidConnect" body:screenInfo];
+    });
 }
 
 - (void) handleScreenDidDisconnectNotification: (NSNotification *)notification{
-  NSDictionary* screenInfo = [self getScreenInfo];
-  [self sendEventWithName:@"@RNExternalDisplay_screenDidDisconnect" body:screenInfo];
+    dispatch_async(dispatch_get_main_queue(), ^{
+        NSDictionary* screenInfo = [self getScreenInfo];
+        [self sendEventWithName:@"@RNExternalDisplay_screenDidDisconnect" body:screenInfo];
+    });
 }
 
 @end
diff --git a/node_modules/react-native-external-display/ios/RNExternalDisplayView.m b/node_modules/react-native-external-display/ios/RNExternalDisplayView.m
index 232a205..cd3f293 100644
--- a/node_modules/react-native-external-display/ios/RNExternalDisplayView.m
+++ b/node_modules/react-native-external-display/ios/RNExternalDisplayView.m
@@ -59,14 +59,17 @@ - (void)invalidate {
 #endif
 
 - (void)updateScreen {
-  if (!_subview) {
-    return;
-  }
-  NSArray *screens = [UIScreen screens];
-  int index = [_screen intValue];
-  if (index > 0 && index < [screens count]) {
-    // NSLog(@"[RNExternalDisplay] Selected External Display");
-    UIScreen* screen = [screens objectAtIndex:index];
+    if (!_subview) {
+        return;
+    }
+    NSSet *scenes = [UIApplication sharedApplication].connectedScenes;
+
+    UIWindowScene* scene = [[scenes filteredSetUsingPredicate:[NSPredicate predicateWithFormat:@"session.persistentIdentifier == %@", _screen]] anyObject];
+    if (scene == nil) {
+        return;
+    }
+    
+    UIScreen *screen = scene.screen;
 
 #if !defined(MA_APPLE_TV)
     __block UIScreenMode *highestWidthMode = NULL;
@@ -86,9 +89,8 @@ - (void)updateScreen {
     rootViewController.view = [RCTView new];
     [rootViewController.view insertSubview:_subview atIndex:0];
     _window.rootViewController = rootViewController;
-    [_window setScreen:screen];
+    [_window setWindowScene:scene];
     [_window makeKeyAndVisible];
-  }
 }
 
 - (void)setScreen:(NSString*)screen {

This issue body was partially generated by patch-package.

Hey there, I would have two questions and I hope the owner of this repo or someone from the community can provide answers.

1. Does anyone know, whether this repo is still maintained by someone?
2. Will this package support the new architecture of react-native soon?

Thank you in advance for your answers! :)

Hello,
Can someone please explain me what's wrong with this piece of code ? 2 issues.

...
const [picURI, setPicURI] = useState(null)
return (
   ...
    <ExternalDisplay
      mainScreenStyle={{ flex: 1, backgroundColor: 'black', alignItems: 'center', justifyContent: 'center' }}
      screen={Object.keys(screens)[0]}
    >
    {picURI ? (
      <Image source={{ uri: picURI }} style={{ height: '100%' }}/>
    ) : (
      <Text style={{ fontSize: 500, color: 'white' }} >TEXT</Text>
    )}
    </ExternalDisplay>
   ...
)
...

When I update picURI with setPicURI, it ends up with the picture full screen with TEXT overlay and when I try to change picURI dynamically, the first picture remains...
Second issue : mainScreenStyle is not taken into account (items not centered).
Thank you

EDIT : this solved the issues, if it can help...

    <ExternalDisplay
      mainScreenStyle={{ flex: 1 }}
      screen={Object.keys(screens)[0]}
    >
     <View style={{ flex: 1, backgroundColor: 'black', alignItems: 'center', justifyContent: 'center' }}>
    {picURI ? (
      <Image source={{ uri: picURI }} style={{ height: '100%' , width: '100%' }}/>
    ) : (
      <Text style={{ fontSize: 500, color: 'white' }} >TEXT</Text>
    )}
    </View>
    </ExternalDisplay>

Without getting into the merits/pitfalls of different component types, all our components in all our apps are class based components.

Whilst I understand this is in beta, class based component types are common for anyone doing more complicated apps, which is where this package is more likely to be used.

Hey,

I have an Android device with two screens that are both touch capable. Touch works just fine in OS but when I open up an app and mount a secondary display using this repo then the secondary screen touch doesn't work (even if app is just in background).

Is there a way to catch touch events from secondary screen?

Any suggestions / code snippets / help in any way is much obliged.

Thank you in advance,
-H

Hello
I am trying to run example from RNExternalDisplayExample packages but got next error

steps:

1. yarn in RNExternalDisplayExample folder
2. yarn android in RNExternalDisplayExample folder

meanwhile getScreens() function returns second display data

details from logcat

2022-10-27 16:31:45.430 14461-14485/com.rnexternaldisplayexample D/EGL_emulation: app_time_stats: avg=1117.44ms min=6.24ms max=8630.20ms count=10
2022-10-27 16:31:45.577 14461-14461/com.rnexternaldisplayexample E/unknown:ReactNative: Exception in native call
    android.view.WindowManager$InvalidDisplayException: Unable to add window android.view.ViewRootImpl$W@b7efa64 -- the specified display can not be found
        at android.view.ViewRootImpl.setView(ViewRootImpl.java:1187)
        at android.view.WindowManagerGlobal.addView(WindowManagerGlobal.java:399)
        at android.view.WindowManagerImpl.addView(WindowManagerImpl.java:133)
        at android.app.Dialog.show(Dialog.java:345)
        at android.app.Presentation.show(Presentation.java:279)
        at com.externaldisplay.RNExternalDisplayView.updateScreen(RNExternalDisplayView.java:136)
        at com.externaldisplay.RNExternalDisplayView.addView(RNExternalDisplayView.java:44)
        at com.facebook.react.uimanager.ViewGroupManager.addView(ViewGroupManager.java:37)
        at com.facebook.react.uimanager.NativeViewHierarchyManager.manageChildren(NativeViewHierarchyManager.java:533)
        at com.facebook.react.uimanager.UIViewOperationQueue$ManageChildrenOperation.execute(UIViewOperationQueue.java:217)
        at com.facebook.react.uimanager.UIViewOperationQueue$1.run(UIViewOperationQueue.java:915)
        at com.facebook.react.uimanager.UIViewOperationQueue.flushPendingBatches(UIViewOperationQueue.java:1026)
        at com.facebook.react.uimanager.UIViewOperationQueue.access$2600(UIViewOperationQueue.java:47)
        at com.facebook.react.uimanager.UIViewOperationQueue$DispatchUIFrameCallback.doFrameGuarded(UIViewOperationQueue.java:1086)
        at com.facebook.react.uimanager.GuardedFrameCallback.doFrame(GuardedFrameCallback.java:29)
        at com.facebook.react.modules.core.ReactChoreographer$ReactChoreographerDispatcher.doFrame(ReactChoreographer.java:175)
        at com.facebook.react.modules.core.ChoreographerCompat$FrameCallback$1.doFrame(ChoreographerCompat.java:85)
        at android.view.Choreographer$CallbackRecord.run(Choreographer.java:1035)
        at android.view.Choreographer.doCallbacks(Choreographer.java:845)
        at android.view.Choreographer.doFrame(Choreographer.java:775)
        at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:1022)
        at android.os.Handler.handleCallback(Handler.java:938)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at android.os.Looper.loopOnce(Looper.java:201)
        at android.os.Looper.loop(Looper.java:288)
        at android.app.ActivityThread.main(ActivityThread.java:7839)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1003)
2022-10-27 16:31:45.581 14461-14461/com.rnexternaldisplayexample E/unknown:ReactNative: Exception in native call
    java.lang.IllegalStateException: View DecorView@8d8f182[] has already been added to the window manager.
        at android.view.WindowManagerGlobal.addView(WindowManagerGlobal.java:371)
        at android.view.WindowManagerImpl.addView(WindowManagerImpl.java:133)
        at android.app.Dialog.show(Dialog.java:345)
        at android.app.Presentation.show(Presentation.java:279)
        at com.externaldisplay.RNExternalDisplayView.updateScreen(RNExternalDisplayView.java:136)
        at com.externaldisplay.RNExternalDisplayView.onHostResume(RNExternalDisplayView.java:101)
        at com.facebook.react.bridge.ReactContext$1.run(ReactContext.java:223)
        at android.os.Handler.handleCallback(Handler.java:938)
        at android.os.Handler.dispatchMessage(Handler.java:99)
        at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:27)
        at android.os.Looper.loopOnce(Looper.java:201)
        at android.os.Looper.loop(Looper.java:288)
        at android.app.ActivityThread.main(ActivityThread.java:7839)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.RuntimeInit$MethodAndArgsCaller.run(RuntimeInit.java:548)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1003)

Dispays information

[Display id 0: DisplayInfo{"Built-in Screen", displayId 0", displayGroupId 0, FLAG_SECURE, FLAG_SUPPORTS_PROTECTED_BUFFERS, FLAG_TRUSTED, real 1920 x 360, largest app 1920 x 1840, smallest app 360 x 280, appVsyncOff 1000000, presDeadline 16666666, mode 1, defaultMode 1, modes [{id=1, width=1920, height=360, fps=60.000004, alternativeRefreshRates=[]}], hdrCapabilities HdrCapabilities{mSupportedHdrTypes=[], mMaxLuminance=500.0, mMaxAverageLuminance=500.0, mMinLuminance=0.0}, userDisabledHdrTypes [], minimalPostProcessingSupported false, rotation 0, state ON}, DisplayMetrics{density=2.0, width=1920, height=328, scaledDensity=2.0, xdpi=320.0, ydpi=320.0}, isValid=true, Display id 2: DisplayInfo{"Emulator 2D Display", displayId 2", displayGroupId 0, FLAG_SHOULD_SHOW_SYSTEM_DECORATIONS, FLAG_TRUSTED, real 1920 x 1080, largest app 1920 x 1824, smallest app 1080 x 984, appVsyncOff 0, presDeadline 16666666, mode 2, defaultMode 2, modes [{id=2, width=1920, height=1080, fps=60.0, alternativeRefreshRates=[]}], hdrCapabilities null, userDisabledHdrTypes [], minimalPostProcessingSupported false, rotation 0, state ON}, DisplayMetrics{density=1.3312501, width=1920, height=984, scaledDensity=1.3312501, xdpi=213.0, ydpi=213.0}, isValid=true]

as far i understood display on emulator is not a PRESENTATION type, so it can't find device with such type.
More details here
https://issuetracker.google.com/issues/227218392

Not the question is - is there any way to add support emulator second screen for Presentation usage?
Thanks!

Hello i have issue that the Second screen keep return main app screen and re-render 3 or 4 times then its work

Hi I was wondering if there is any iOS requirement for this package? I'm experiencing some differing behavior when testing on an older iPad that is on iOS 12.5 and newer iPads on 14.8 and 15.0. The weird thing is that it's not completely broken but if I try to start the app up with an external display connected already, it will just immediately crash the app. However, if I disconnect the iPad from the TV, start the app, and then plug the TV in, it shows up on the external display just fine and continues to work normally until the app gets restarted upon which it'll just resume crashing.

I'm using Android on hardware from a producer called PAX and they device has a secondary screen on the back that I want to use.

The screenSize reports width: 533.33, height: 853.33 and using flex: 1 also matches that. However, that only covers 1/3 (interestingly almost exactly 3 times) of the screen width. I'd be happy to contribute if you could tell me where the sizes are calculated.

I noticed that if I override the View width/height inside the ExternalDisplay, I can easily render whatever I want (even larger than the display thinks it is).

I would like to fix it so that flex works and to get the screenSize to match the actual display.

Edit: My theory is that dpi is interfering here and according to DisplayMetrics docs the size is in absolutePixels and might need to be adjusted for React Native sizes or density-independent-pixels.

Edit 2: The Android display.getRealScreensize() returns the correct resolution, but the scale part in the JS code seems to mess it up. Can anyone explain why iOS gets scale=1 and Android gets whatever the main screen has?

I am having this issue, using External Display on first Screen and Second Screen. When I navigate to Second Screen from First Screen by using the navigation.replace method of react-navigation then I get the error "detected two or more react native external displays to render the same screen id 1". I am using the same code in both the screens.
<ExternalDisplay
mainScreenStyle={{ flex: 1 }}
fallbackInMainScreen
screen={Object.keys(screens)[0]}
>

This implies you are exporting a named things that has the same name as a member of ExternalDisplay.

import ExternalDisplay, {
  useExternalDisplay,
} from 'react-native-external-display'

This rule is in a lot of rule groups. Feel free to close this if it's of no concern.

I am using RN 0.61

When the most basic view is used with any accessibility service enabled on the Android device, the app crashes, with the following stack trace:

2020-12-09 11:32:55.375 15655-15655/com.petrooutlet.supersonic E/AndroidRuntime: FATAL EXCEPTION: main
    Process: com.petrooutlet.supersonic, PID: 15655
    java.lang.IllegalArgumentException: parameter must be a descendant of this view
        at android.view.ViewGroup.offsetRectBetweenParentAndChild(ViewGroup.java:5459)
        at android.view.ViewGroup.offsetDescendantRectToMyCoords(ViewGroup.java:5388)
        at android.view.ViewGroup$ViewLocationHolder.init(ViewGroup.java:7885)
        at android.view.ViewGroup$ViewLocationHolder.obtain(ViewGroup.java:7819)
        at android.view.ViewGroup$ChildListForAccessibility.init(ViewGroup.java:7754)
        at android.view.ViewGroup$ChildListForAccessibility.obtain(ViewGroup.java:7722)
        at android.view.ViewGroup.addChildrenForAccessibility(ViewGroup.java:1978)
        at android.view.ViewGroup.addChildrenForAccessibility(ViewGroup.java:1987)
        at android.view.ViewGroup.addChildrenForAccessibility(ViewGroup.java:1987)
        at android.view.ViewGroup.onInitializeAccessibilityNodeInfoInternal(ViewGroup.java:3076)
        at android.view.View.onInitializeAccessibilityNodeInfo(View.java:6609)
        at android.view.View.createAccessibilityNodeInfoInternal(View.java:6568)
        at android.view.View.createAccessibilityNodeInfo(View.java:6553)
        at android.view.accessibility.AccessibilityRecord.setSource(AccessibilityRecord.java:145)
        at android.view.accessibility.AccessibilityRecord.setSource(AccessibilityRecord.java:119)
        at android.view.View.onInitializeAccessibilityEventInternal(View.java:6505)
        at android.view.View.onInitializeAccessibilityEvent(View.java:6493)
        at android.view.View.sendAccessibilityEventUncheckedInternal(View.java:6358)
        at android.view.View.sendAccessibilityEventUnchecked(View.java:6343)
        at android.view.ViewRootImpl$SendWindowContentChangedAccessibilityEvent.run(ViewRootImpl.java:7479)
        at android.os.Handler.handleCallback(Handler.java:755)
        at android.os.Handler.dispatchMessage(Handler.java:95)
        at android.os.Looper.loop(Looper.java:154)
        at android.app.ActivityThread.main(ActivityThread.java:6141)
        at java.lang.reflect.Method.invoke(Native Method)
        at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:912)
        at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:802)

The basic version being used for testing:

EXPO SDK 39, Bare Workflow

import React from "react"
import { View, StyleSheet, Text } from "react-native"
import ExternalDisplay, {
  useExternalDisplay,
} from "react-native-external-display"

const CustomerFacingDisplay = () => {
  const screens = useExternalDisplay()

  return (
    <ExternalDisplay
      mainScreenStyle={{ flex: 1 }}
      fallbackInMainScreen={true}
      screen={Object.keys(screens)[0]}
    >
      <View style={{ backgroundColor: "brown", flex: 1, flexDirection: "row" }}>
        <Text>Hello!</Text>
      </View>
    </ExternalDisplay>
  )
}

export default CustomerFacingDisplay

When I press Home on my android device and then I go back to the app, the ExternalDisplay component is not viewable anymore nor on my external device (smartglasses) nor on my smartphone.
The component shows up again only when I close and restart the app.
Is there a way to keep it visible without restarting the app?

On Android 11 (RK3568 Board) when the second display is rendered using <ExternalDisplay> the main screen loses touchscreen responsiveness (stops responding to touches) but the main and secondary screens do continue to render properly (tested w/ a clock example).

No errors are thrown in LogCat.

Simply commenting out the <ExternalDisplay> component immediately restores touch responsiveness (useExternalDisplay() hook works correctly and causes no issue, only the rendering of <ExternalDisplay> breaks touch responsiveness).

The exact same codebase and hardware were working on Android 8.

Full Disclosure, this same hardware was affected by ticket #211 - perhaps the Chinese boards' modified firmware could be the issue? Not sure how to correct it since no error is appearing in LogCat and no crash/panic is occurring to know where to look.

Any ideas on this bug?

Thank you.

Hi,

I have been using the package for the past few days and it is working well. But one thing I have been noticing is that if the Application goes to the background and back to foreground, the External Display will not re display itself.

Is there a workaround for the External Display to display itself when the Application goes to the foreground?

Thank You.

I am currently using react-native-external-display for an app and when testing it on physical devices it behaves differently than in the simulators/emulators. On iPad 4 (iOS 10 - 32 bit) and iPad mini 2 (iOS 12 - 64 bit) the app basically works as expected including showing the background image behind the text.

But on an iPhone 6 (iOS 12) and an iPhone XS Max (iOS 14) the background image is not shown at all. It shows the text only. - I can provide additional details if needed for tracking down the cause of the issue. The code below covers just the relevant portions:

import Markdown, {MarkdownIt} from 'react-native-markdown-display';
import ExternalDisplay, {
  getScreens,
  useScreenSize,
} from 'react-native-external-display';

// based on ScreenSize example in
// https://github.com/mybigday/react-native-external-display/blob/master/packages/RNExternalDisplayExample/js/ScreenSize.js
const [info, setInfo] = useState(getScreens());
const [on, setOn] = useState(true);
const [mount, setMount] = useState(true);

const InMarkdown = () => {
  const {id, width, height} = useScreenSize() || {};
  const scalingBase = 1024;
  const fontScale = width / scalingBase;
  return (
    <Markdown
      markdownit={MarkdownIt({breaks: true})}
      style={{
        paragraph: {
          textAlign: 'center',
          marginTop: 10,
          marginBottom: 10,
          justifyContent: 'center',
          paddingHorizontal: 50,
        },
        text: {
          fontSize: 55 * fontScale,
        },
      }}>
      {paragraphData[selectedId].lyricsParagraph}
    </Markdown>
  );
};
// example content of paragraphData[selectedId].lyricsParagraph:
//   `Through many dangers, toils, and snares
//   I have already come.
//   'Tis Grace that brought me safe thus far
//   And Grace will lead me home.`

// ...
// more code
// ...

// THIS IS THE MAIN VIEW
return (
  <View style={styles.container}>
    {mount && (
      <ExternalDisplay
        mainScreenStyle={{flex: 1}}
        /* fallbackInMainScreen */
        screen={on && Object.keys(info)[0]}
        onScreenConnect={setInfo}
        onScreenDisconnect={setInfo}>
        <View style={styles.mdContainer}>
          <Image
            source={require('../assets/worship-background-cross.png')}
            style={styles.image}
          />
          <InMarkdown />
        </View>
      </ExternalDisplay>
    )}
    <FlatList
      data={paragraphData}
      renderItem={renderItem}
      keyExtractor={(item) => item.id}
      extraData={selectedId}
    />
  </View>
);

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  mdContainer: {
    flex: 1,
    justifyContent: 'flex-start',
    backgroundColor: '#eee',
  },
  image: {
    position: 'absolute',
    top: 0,
    left: 0,
    bottom: 0,
    right: 0,
    opacity: 0.8,
    resizeMode: 'cover',
    justifyContent: 'center',
  },
});

SYSTEM INFO:

yarn react-native info
yarn run v1.22.5

System:
    OS: macOS 10.15.7
    CPU: (4) x64 Intel(R) Core(TM) i5-4460  CPU @ 3.20GHz
    Memory: 241.48 MB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 14.17.0 - /var/folders/tz/bqv7md4d0_l85kb7bpxvshdr0000gq/T/yarn--1623332200406-0.09626359247705052/node
    Yarn: 1.22.5 - /var/folders/tz/bqv7md4d0_l85kb7bpxvshdr0000gq/T/yarn--1623332200406-0.09626359247705052/yarn
    npm: 6.14.13 - ~/.nodenv/versions/14.17.0/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  Managers:
    CocoaPods: 1.10.1 - /usr/local/bin/pod
  SDKs:
    iOS SDK:
      Platforms: iOS 14.4, DriverKit 20.2, macOS 11.1, tvOS 14.3, watchOS 7.2
    Android SDK:
      API Levels: 29
      Build Tools: 28.0.3, 29.0.2, 29.0.3
      System Images: android-23 | Google APIs Intel x86 Atom, android-29 | Google APIs Intel x86 Atom_64, android-29 | Google Play Intel x86 Atom
      Android NDK: Not Found
  IDEs:
    Android Studio: 4.2 AI-202.7660.26.42.7322048
    Xcode: 12.4/12D4e - /usr/bin/xcodebuild
  Languages:
    Java: 1.8.0_292 - /usr/bin/javac
    Python: 3.6.8 - /usr/local/bin/python
  npmPackages:
    @react-native-community/cli: Not Found
    react: 16.13.1 => 16.13.1 
    react-native: 0.63.4 => 0.63.4 
    react-native-macos: Not Found
  npmGlobalPackages:
    *react-native*: Not Found

I am using smart glasses for my project and I want to view a component in a transparent background so I can also the surroundings, but all I get is the same component in a white background. Is there a chance that I may set it?

In this example, we haven't set flex to fill height, but it got full height on external screen on Android:

It was expected on iOS.

I'm having a problem that when I bring the app down to the background and reopen it, the external display doesn't show up under the component anymore, but on the inner screen

Good

<ExternalDisplay screen=""><View /></ExternalDisplay>

// With different screen id
<ExternalDisplay screen=""><View /></ExternalDisplay>
<ExternalDisplay screen="1">
  <View><Text>Screen 1</Text></View>
</ExternalDisplay>

Bad

// Throw error
<ExternalDisplay screen="1"><View /></ExternalDisplay>
<ExternalDisplay screen="1">
  <View><Text>Screen 1</Text></View>
</ExternalDisplay>

It will be helpful for debug.