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 --recursiveThen 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