React Native Web compatibility

Is react-native-web compatibility planned? It seems that it should be possible to make this library compatible with both react-native and react-native-web but some work is necessary.

I was able to make it almost work by using webpack aliases:

react-native -> react-native-web react-native-svg -> svgs

The biggest problem seems to be native only code such as setNativeProps and platform specific files (horizontal-labeled-bar-chart-component.android.jsandhorizontal-labeled-bar-chart-component.ios.js`).

I was able to hack the code quickly to make it render in a browser, so I think it should not take much effort to solve this properly (although I am not very familiar with the project so can’t tell for sure)

[wrsulliv]

@Elijen Thanks for the tip on svgs. I too am using react-native-svg-charts with react-native-web. I encountered the same horizontal-labeled-bar-chart-component issue, but removed these files from my fork for the time being. Additionally, I was using create-react-app, but I ejected to manually alter the webpack config.

It looks like setNativeProps is currently used in only one place: src/animated-path.js. If this is the only native specific code (excluding the mentioned component) then it seems supporting react-native-web out of the box may require minimal changes? Possibly with some code to degrade to a non-native setting when the option isn’t available? I’m not sure either…

Anyways, I’m posting here to both express interest in this feature and confirm that I was able to reproduce with the steps listed in the issue.

@JesperLekland Thanks for the great lib, I’m getting good looking charts across both native and web!

[DaKaZ]

@AlexBrasileiro we’ve had good luck using react-native-web. Basically what is going on is you need to pass many of the react-native modules (like react-native-svg) through babel. Here is snipit from our webpack config so you can see what we do (I am only posting the relavent section):

function modulesToCompile() {
  const modules = [
      "append-transform",
      "react-native-animatable",
      "react-native-bounceable",
      "react-native-datepicker",
      "react-native-elements",
      "react-native-web-linear-gradient",
      "react-native-orientation",
      "react-native-side-menu",
      "react-native-switch-selector",
      "react-native-svg",
      "react-native-svg-charts",
      "react-native-tab-navigator",
      "react-native-tab-view",
      "react-native-table-component",
      "react-native-vector-icons",
      "react-navigation",
      "svgs"
  ];
  return modules.map((m) => path.resolve(__dirname, `../../client/node_modules/${m}`));
}

then later on, in the config:

const config = {
module: {
    rules: [
      {
        test: /\.jsx?$/,
        include: modulesToCompile(),
        loader: "babel-loader?+cacheDirectory",
        query: {
          presets: ["es2015", "stage-2", "react", "react-native", "flow"],
          plugins: [
            "transform-flow-comments",
            "transform-react-remove-prop-types",
            "transform-dev"
          ]
        }
      },
      {
        test: /\.(gif|jpe?g|png|svg)$/,
        include: [
          path.resolve(
            __dirname,
            "../../client/node_modules/react-native-vector-icons"
          ),
          path.resolve(
            __dirname,
            "../../client/node_modules/react-native-elements"
          ),
          path.resolve(__dirname, "../../client/node_modules/react-navigation"),
          path.resolve(__dirname, "../../client/src/assets/")
        ],
        loader: "file-loader",
        query: { name: "[name].[hash:16].[ext]" }
      },
      {
        test: /\.ttf$/,
        loader: "url-loader", // or directly file-loader
        include: [
          path.resolve(
            __dirname,
            "../../client/node_modules/react-native-vector-icons"
          ),
          path.resolve(__dirname, "../../client/src/assets/fonts")
        ]
      }
    ]
  }
}