expoaliasreact-native-mapswebpack.config.js

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


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

Solution

  • 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.