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;
    };

Answer 1

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.