Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Support on Expo? #715

Open
goodwill opened this issue Jul 13, 2023 · 4 comments
Open

Support on Expo? #715

goodwill opened this issue Jul 13, 2023 · 4 comments
Labels
good first issue Good for newcomers

Comments

@goodwill
Copy link

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

@jhen0409
Copy link
Member

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.

@jhen0409 jhen0409 added the good first issue Good for newcomers label Jul 16, 2023
@jyling
Copy link

jyling commented Nov 2, 2023

.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
Copy link

desmond58 commented May 29, 2024

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!

@aadelalqaabi
Copy link

Any update? I couldn’t find a way to make it work for Expo. @jhen0409

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
good first issue Good for newcomers
Projects
None yet
Development

No branches or pull requests

5 participants