Webfills for useful packages of React Native so they can be used on React Native Web

Feel free to make PRs to fix stuff or add new supported packaged

• react-native-blur => Stub, doing nothing
• react-native-drawer-layout => Fully working
• react-native-linear-gradient => Fully working
• react-native-maps => A bit glitchy, MapView, Marker, Circle and Polylines implemented

NOTE: Add this line to your index.html before your bundle.js :

<script src="//maps.google.com/maps/api/js?key=MYGOOGLEAPIKEY" type="text/javascript"></script>

• react-native-i18n => Working, just install i18n-js beside
• react-native-photo-view => Stub, doing nothing
• react-native-modal-datetime-picker => Stub, doing nothing
• react-native-vector-icons => Only MaterialIcons and MaterialCommunityIcons

NOTE: Respective instructions can be found in each index.js file

• react-native-view-pager => Fully working without swipe gestures`obviously
• react-native-version-number => Fully working, instructions for setup in the index.js)

This module is made to be cloned as a submodule named webfills in your webpack project.

git submodule add https://github.com/VinceBT/react-native-webfills.git webfills
git submodule update --init --recursive

Then add this to your webpack.config.js :

const fs = require('fs');
const path = require('path');

const webfillsFolder = 'webfills';

const aliases = {
  'react-native': 'react-native-web',
  'react-router-native': 'react-router',
};

fs.readdirSync(webfillsFolder).filter(f => fs.statSync(`${webfillsFolder}/${f}`).isDirectory()).forEach(mod => {
  console.log(`Webfill detected: ${mod}`);
  aliases[mod] = path.join(__dirname, webfillsFolder, mod);
});

...

module.exports = {
  ...
  resolve: {
    alias: aliases,
  },
  ...
}

MIT