Alias the package in your webpack config: react native web maps ; react native maps

Question

I need to use react native web maps in react native project , i'm using expo and need to alias package in my webpack.config.js i want to use both ios/web version for my map.

I m fairly new to programming

link to library i m using

https://www.npmjs.com/package/react-native-web-maps

my webpack.config.js is

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

    module.exports = async function (env, argv) {
      const config = await createExpoWebpackConfigAsync(env, argv);
      // Customize the config before returning it.
      return config;
    };

score 3 · Accepted Answer · answered Feb 25 '22 at 13:23

You probably found out already, but for others who are looking for the solution:

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);
  config.resolve.alias['react-native'] = 'react-native-web';
  config.resolve.alias['react-native-maps'] = 'react-native-web-maps';
  return config;
};

This will create an alias for react-native and react-native-maps. So when we are on web, the modules react-native-web and react-native-web-maps will be used instead of the original ones.

If the page remains blank, temporarily remove the MapView element from your code and see if the other elements will appear.

Alias the package in your webpack config: react native web maps ; react native maps

1 Answers1