Vector icons bloat on react-native-web

Current behaviour

Using with react-native-web (without expo) while requiring react-native-vector-icons adds an additional 1.3MB to the bundle.

Expected behaviour

Would like to use react-native-vector-icons for native builds, while using the fallback for react-native-web builds.

Using the fallback like this, fixes it for me. https://github.com/rahuljayaraman/react-native-paper/commit/7f102d6da0fb1aa56a25cc604c7fcde4a42f5a37

Code sample

import { ListItem } from “react-native-paper”;

Screenshots (if applicable)

N/A

What have you tried

Built with 3 different combinations

Build sizes:

Default CRNA ejected: 409 Kb Import react-native-paper: 1.72 Mb With react-native-paper babel plugin: 1.5 Mb With fallback fork: 658 Kb

Your Environment

  "dependencies": {
    "react": "16.3.1",
    "react-dom": "16.3.1",
    "react-native": "~0.55.2",
    "react-native-paper": "^1.12.0",
    "react-native-vector-icons": "^5.0.0",
    "react-native-web": "^0.4.0",
    "webpack": "^3.11.0",
    "webpack-dev-server": "2.9.4"
  }

I’m not sure if this issue belongs here, react-native-web or something i need to fix using configuration. Would be nice to have some docs nonetheless.

Another solution might involve having a compatibility layer for react-native-vector-icons (using webpack alias perhaps?), similar to how expo-web does it. https://github.com/raarts/expo-web/blob/master/packages/expo-web/src/exports/MaterialIcons/index.js

[0x006F]

This is an out-of-the-context question, but @rahuljayaraman , how did you setup the react-native-paper with react-native-web in the first place? I’m trying to do the same, but I’m getting compilation errors.

I tried with create-react-app boilerplate, as well as a vanilla react package with parceljs. Both of them didn’t work. May be can you share a sample repo for me?

When I used create-react-app, it was throwing TypeScript errors whereas while using parceljs, it failed to load ./styles/colors module.

[rahuljayaraman]

I’ll try that, thanks.