WIP: Web support

[mfazekas]

Rebase of #861, this is just a POC.

Structure: package.json/browser points to index.web.js which the loads content form javascript/web directory that contains separate implementation of rnmapbox/maps on the mapbox-gl js api.

To consume:

yarn add @rnmapbox/maps

Extra steps for web:

1. Add `mapbox-gl' dependency

yarn add mapbox-gl

2. Configure web pack so that rnmapbox/maps is transpiled. @expo/webpack-config auto transpires packages starting with react-native- but rnmapbox has not `react-native in it's name, so it will not be transpired. See [Web] Work well in My Project ,but get error Module parse failed: Unexpected token in module  expo/expo-cli#3744 (comment) and https://github.com/expo/expo-cli/tree/master/packages/webpack-config#include-modules :

expo customize:web

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(
    {
      ...env,
      babel: { dangerouslyAddModulePathsToTranspile: ["@rnmapbox/maps"] },
    },
    argv
  );
  
  return config;
};

[localjo]

This works for me, for rendering a map. Just to clarify, there is currently only support for MapView and Camera, but not yet for other components like ShapeSource, etc, so it's not possible yet to render data to the map?

I can look into contributing, but no promises how much I'll be able to do.

[localjo]

An alternative approach that might be more efficient for some is to use platform specific code for your map component, and write a separate map component for web and native. If you do all the data and state handling in parent component, you'll have very little to implement twice. https://reactnative.dev/docs/platform-specific-code#native-specific-extensions-ie-sharing-code-with-nodejs-and-web

[cglacet]

@mfazekas What is the state of this feature? I'm wondering if I should either invest time in doing what @localjo suggested but if there is a way to better share code I would gladdly use it.

@localjo could you give an implementation example of your web map?

I'm currently trying to test porting a react-native app that has a lot of maps in it. I'm using Nextjs and react-native-web.
My folder structure looks like this:

├── package.json
├── node_modules
├── ios
├── android
├── web
│   ├── package.json
│   ├── node_modules
│   ├── config.next.js
│   └── pages

My setup next config looks a bit like this:

// next.config.js
const path = require('path');
const packageJson = require('../package.json');
const withTM = require('next-transpile-modules');
const withImages = require('next-images');

const modulesToTranspile = [
    ...Object.keys(packageJson.dependencies).filter((dep) =>
        dep.startsWith('react-native')
    ),
];

/** @type {import('next').NextConfig} */
const configuration = {
    transpilePackages: modulesToTranspile,
    compiler: {
        removeConsole: process.env.NODE_ENV === 'production',
    },
    images: {
        disableStaticImages: true,
    },
    webpack: (
        config,
        { buildId, dev, isServer, defaultLoaders, nextRuntime, webpack }
    ) => {
        config.resolve.alias = {
            ...(config.resolve.alias || {}),
            'react-native$': 'react-native-web',
            'react-native-vector-icons/': 'react-native-vector-icons/dist/',
            'react-native-linear-gradient': 'react-native-web-linear-gradient',
        };
        config.resolve.extensions = [
            '.web.js',
            '.web.ts',
            '.web.tsx',
            ...config.resolve.extensions,
        ];

        config.module.rules.push({
            test: /\.ttf$/,
            loader: 'url-loader',
            include: path.resolve(
                __dirname,
                '../node_modules/react-native-vector-icons'
            ),
        });

        config.plugins.push(
            new webpack.DefinePlugin({
                __DEV__: dev,
            })
        );

        return config;
    },
};

module.exports = withImages(withTM(modulesToTranspile)(configuration));

So I only add to change this:

const modulesToTranspile = [
+    '@rnmapbox/maps',
    ...Object.keys(packageJson.dependencies).filter((dep) =>
        dep.startsWith('react-native')
    ),
];

I didn't manage to install mapbox-gl in the web/node_modules, it was causing an error:

error - ../node_modules/@rnmapbox/maps/javascript/web/MapboxModule.js:1:0
Module not found: Can't resolve 'mapbox-gl'

But if I add mapbox-gl to the root node_modules it works (that seems a bit odd to have it defined in the root no?).

[mfazekas]

@cglacet it's a proof of concept as this time. It's merged, but it's not really usefull at the moment. Waiting for community contributions...

[cglacet]

@mfazekas Peole at mapbox are still puting efforts in this repository or is this only maintained by benevolent people? (are they willing to support any work that is made here?)

[Ramon-Balaguer]

@mfazekas Do you know if there is a plan to move this?

[mfazekas]

@Ramon-Balaguer this has been merged. There were some contributions so it's slowly improving.

https://rnmapbox.github.io/example-app/

Is the current example app.