Button compile failure on Web with react-native-web

Explain what you did While following https://react-native-training.github.io/react-native-elements/blog/2018/12/13/react-native-web.html, `import { Button } from ‘react-native-elements’ triggers screenshot below.

Native (Android) would render Button fine.

Expected behaviour Button renders on Web, as it does on native platforms.

Describe the bug

To Reproduce Follow https://react-native-training.github.io/react-native-elements/blog/2018/12/13/react-native-web.html

In src/App.js:

import { Button } from 'react-native-elements

Run yarn web

Your Environment (please complete the following information):

software	version
react-native-elements	1.1.0
react-native	0.55.4
npm or yarn	yarn: 1.13.0

Related: #882

[oxyii]

@fungilation Metro react-native bundler compile modules in node_modules. And most libraries for react-native are published without compilation. But RNWeb applications compile with react-scripts like standard React application. So you must eject your application for including node_modules libraries into babel. See this discussion about babel config without ejecting.

If you don’t want to eject you can replace react-scripts with react-app-rewired and change babel config using customize-cra. Ok, step-by-step:

1. npm install --save-dev react-app-rewired customize-cra @babel/plugin-proposal-class-properties

2. Change scripts in your package.json:

...
"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
}
...

1. Create config-overrides.js in your project root

const path = require("path");
const {override, addBabelPlugins, babelInclude} = require("customize-cra");

module.exports = override(
    babelInclude([
        path.resolve("src"), // your src folder can be another
        path.resolve("node_modules/react-native-elements"),
        path.resolve("node_modules/react-native-ratings"),
        path.resolve("node_modules/react-native-status-bar-height"), // <- I'm not sure that this is necessary
        path.resolve("node_modules/react-native-vector-icons"),
    ]),
    addBabelPlugins(
        "@babel/plugin-proposal-class-properties",
    ),
);

And woo a la - react-native-elements buttons works fine without ejecting!

P.S. @babel/plugin-proposal-class-properties plugin resolve static class properties like propTypes or defaultProps.

P.P.S. Sorry for my english )))

[oxyii]

@fungilation I’m going out this issue. I recommend you to read about webpack and babel.

From your repo, after install deps and @babel/plugin-proposal-class-properties