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.

Sign up for GitHub

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

Jump to bottom

Does this support Expo's new Metro bundler for web? #73

Open
JPStrydom opened this issue May 22, 2024 · 0 comments
Open

Does this support Expo's new Metro bundler for web? #73

JPStrydom opened this issue May 22, 2024 · 0 comments

Comments

@JPStrydom
Copy link

We use this library with Webpack for our web builds and it works fine, but we've been struggling to get it working with the new Metro web bundler.

Since Expo are forcing everyone to switch to their Metro builder for web, we've been migrating over to that. They also force devs to now switch to expo-router over react-navigation. I've added the following to my +html.jsx file as Expo recommends:

import { ScrollViewStyleReset } from 'expo-router/html';
import PropTypes from 'prop-types';
import { GOOGLE_MAPS_API_KEY_WEB } from '@env';

/**
 * This file is web-only and used to configure the root HTML for every web page during static rendering.
 * The contents of this function only run in Node.js environments and do not have access to the DOM or browser APIs.
 */
const WebAppWrapper = ({ children }) => (
  <html lang="en">
    <head>
      <meta charSet="utf-8" />
      <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
      <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />

      {/*
      Disable body scrolling on web. This makes ScrollView components work closer to how they do on native.
      However, body scrolling is often nice to have for mobile web. If you want to enable it, remove this line.
    */}
      <ScrollViewStyleReset />

      {/* Using raw CSS styles as an escape-hatch to ensure the background color never flickers in dark-mode. */}
      <style dangerouslySetInnerHTML={{ __html: responsiveBackground }} />
      {/* Add any additional <head> elements that you want globally available on web... */}
      {/* This is where we're adding our google api script */}
      <script
        async
        defer
        src={`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_MAPS_API_KEY_WEB}`}
      ></script>
    </head>
    <body>{children}</body>
  </html>
);

WebAppWrapper.propTypes = {
  children: PropTypes.node.isRequired
};

const responsiveBackground = `
body {
  background-color: #fff;
}
@media (prefers-color-scheme: dark) {
  body {
    background-color: #000;
  }
}`;

export default WebAppWrapper;

The script get's loaded with the correct key, but we get the following error when rendering react-native-web-maps:
image

Since we're not using webpack anymore, we can't use their resolve aliases anymore with:

config.resolve.alias['react-native-maps'] = 'react-native-web-maps';

So we've ended up making a Map.jsx and a Map.native.jsx component. The one uses

// Map.native.jsx
import MapView, { Marker, PROVIDER_GOOGLE } from 'react-native-maps';

And the other uses:

// Map.jsx
import MapView from 'react-native-web-maps';

Is there anything we're missing? Should this library work with the new Expo Metro builder for web?
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@JPStrydom