react-native-web support?

[yogevlahyani]

Recently I've created a react-native app and tried to make some adjustments for the web.

The icons do work but I'm getting lots of errors and warnings when bundled:

I also tried to make an alias for the web using webpack

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

    config.resolve.alias['phosphor-react-native'] = 'phosphor-react';

  return config;
};

but getting a different error:

Is there a way to use phosphor icons for react-native-web?

[Joeao]

To remove these warnings you can make sure the library is being transpiled by babel/other.

To do this using webpack you can add this to your webpack config:

entry: "./src/index.ts",
module: {
    rules: [
        {
            test: /\.js$/i,
            loader: "babel-loader",
            include: [
                path.resolve(__dirname, "node_modules/phosphor-react-native")
            ]
        }

[duongdev]

Besides, phosphor-react-native APIs is the same as phosphor-react APIs, you can add an extra layer to make your app load 2 different libs on 2 platforms. Eg writing a wrapper layer with .web.tsx for the web. That could be another solution for you.

[yogevlahyani]

Besides, phosphor-react-native APIs is the same as phosphor-react APIs, you can add an extra layer to make your app load 2 different libs on 2 platforms. Eg writing a wrapper layer with .web.tsx for the web. That could be another solution for you.

That worked for me.

The error

The `style` prop expects a mapping from style properties to values, not a string. For example, style={{marginRight: spacing + 'em'}} when using JSX.

caused by using NativeBase Icon component.

Here is my webpack.config.js

const createExpoWebpackConfigAsync = require('@expo/webpack-config');

module.exports = async function (env, argv) {
  const config = await createExpoWebpackConfigAsync(env, argv);

  config.resolve.alias['phosphor-react-native'] = 'phosphor-react';

  return config;
};

[duongdev]

@yogevlahyani did you solve the issue? Does NativeBase inject style prop into the component?

[yogevlahyani]

@yogevlahyani did you solve the issue? Does NativeBase inject style prop into the component?

Yes, thank you!