How to control a React Native external screen separately from main screen navigation?

user_1154625 0
Viewed 323

I am using React Native view renderer in External Display to show song lyrics by verse on an external projection screen. (The view on the device is different from the view on the external screen.) Once I navigate back from the song details screen to the song list in a stack navigator, the external screen goes blank, because currently only the song details screen contains the ExternalDisplay. This is undesirable, as I want to have an uninterrupted external view of the current song details until another song is selected from the list. Navigating to other sections of the app such as a song LineUpScreen should also not effect the view that is seen on the external display.

In React Native the view is always directly associated with the active screen and I am trying to figure out a way on how to control the external display view quite independently from what the active screen on the display is. I am asking for help in finding the most sensible way to approach this. The sample code below is just for illustration and greatly simplified from the actual code.

//SongDetailsScreen.js
... 
return (
    <View style={styles.container}>
        // Song Lyrics Text on the External Projector Display
        <ExternalDisplay
            screen={on && Object.keys(info)[0]}
            onScreenConnect={setInfo}>
            <View style={styles.mdContainer}>
                <Image source={{uri: 'https://...backgr.jpg'}} style={styles.image}/>
                <LyricsText />
            </View>
        </ExternalDisplay>
        <View>
            <Text>
                Song Details shown on the device
            </Text>
        </View>
    </View>
)
...

// SongListScreen.js
... 
return (
    <View style={styles.container}>
        <View style={styles.listContainer}>
          <FlatList
            data={songsDocs}
            renderItem={renderEntity}
            keyExtractor={(item) => item.id}
            extraData={selectedId}
          />
        </View>
    </View>
  );
...

I noticed that I can push another screen on top of the stack, while the external display is shown without loosing the view. Therefore my idea at the moment is to render the ExternalDisplay pretty much at the root of the navigation tree and then control the content from the relevant screens. I would have to pass the data back down to it. Would this make sense or is there a better approach? I do wonder also if this otherwise hidden screen (which will only show the external display) will stay in memory or if it will be discarded by React Native after a while?

I am not so much asking for sample code, but I am looking more for the right conceptual approach.

(This is a new app using React Native 0.63 with hooks and functional components, not classes, and React Navigation 5.)

react-native multiple-monitors
1 Answers

This one took me about half an hour to solve, but it turns out all you need to do is just make the ExternalDisplay the immediate child of your SongDetailsScreen parent view. Just make sure to set fallbackInMainScreen to false and you can design your components just as you would normally.

import React from 'react';
import { Alert, Text, View } from 'react-native';
import ExternalDisplay, { useExternalDisplay } from 'react-native-external-display';

export default function App() {

  const screens = useExternalDisplay({
    onScreenConnect: () => {
      Alert.alert('Display connected');
    },
    onScreenChange: () => {
      Alert.alert('Display disconnected');
    },
    onScreenDisconnect: (error) => {
      Alert.alert('Display error', error);
    }
  });

  return (
    <View style={{flex: 1}}>
    <ExternalDisplay
      mainScreenStyle={{ flex: 1 }}
      fallbackInMainScreen={false}
      screen={Object.keys(screens)[0]}
    >
      <View
        style={{
          flex: 1,
          justifyContent: 'center',
          alignItems: 'center',
          backgroundColor: '#333',
        }}
      >
        <Text style={{ color: 'red', fontSize: 40 }}>External Display</Text>
      </View>
    </ExternalDisplay>
      <View style={{ flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "orange"}}>
        <Text style={{color: 'blue', fontSize: 40}}>Main Screen</Text>
      </View>
    </View>
  );
}
user_50152190
Related