Support on Expo?

[goodwill]

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

[jhen0409]

It may be work with own build dev-client, or bare workflow. I'd happy to accepted a PR for add an example if anyone can try it out.

[jyling]

.I installed it with eas local building, it's surprisingly painless, I used https://github.com/mybigday/react-native-external-display/blob/master/packages/RNExternalDisplayExample/src/Touch.js to make a local testing, removed a bunch of unrelated packages like react-native-gesture-handler. it surprisingly works, I didn't change much code.

it works instantly on my machine, I only tested it on android tho

[desmond58]

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

  const screens = useExternalDisplay({
    onScreenConnect: () => {
      Alert.alert('Display connected');
    },
    onScreenChange: () => {
      Alert.alert('Display disconnected');
    },
    onScreenDisconnect: (error) => {
      Alert.alert('Display error', error);
    }
  });
  const isScreenConnected = Object.keys(screens).length > 0;
  const externalScreen = Object.keys(screens)[0];
  
  {isScreenConnected && (
  <ExternalDisplay
    mainScreenStyle={{ flex: 1 }}
    fallbackInMainScreen={false}
    screen={externalScreen}
  >
    <View
      style={{
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
      <SecondaryScreen /> // ur component (UI)
    </View>
  </ExternalDisplay>
)}

This is a sample working code for an Expo app (client dev, you have to rebuild eas else u will get error "TypeError: Cannot read property 'getInitialScreens' of null, js engine: hermes")
It took me quite some time to study the Presentation API and Display Manager. However, I was stuck on integrating the feature into my Expo app using expo module. Fortunately, I found this module, which saved me a lot of time. Much appreciated!