title: cannot enable experimental syntax 'classProperties' in a hybrid react-native-web project that uses react native elements
body: <p>I am following this <a href="https://levelup.gitconnected.com/comprehensive-guide-to-create-simple-app-using-react-native-web-and-react-native-elements-306cf43fb8d7" rel="nofollow noreferrer">tutorial</a></p>
  
  <p>My project was initialised using <a href="https://github.com/orYoffe/create-react-native-web-app" rel="nofollow noreferrer">CRWNA</a></p>
  
  <p>Tutorial <a href="https://levelup.gitconnected.com/@haruelrovix" rel="nofollow noreferrer">author</a> and <a href="https://github.com/haruelrovix" rel="nofollow noreferrer">his git</a>  nb I have contacted him...</p>
  
  <p>This is my tutorial <a href="https://github.com/paddy10tellys/gitphone" rel="nofollow noreferrer">repo</a> showing the guilty code…</p>
  
  <p>So, yarn android works as expected but yarn web fails to compile with:</p>
  
  <pre><code>Failed to compile
  ./node_modules/react-native-ratings/src/SwipeRating.js
  SyntaxError: /home/pmy/gitphone/node_modules/react-native-ratings/src/SwipeRating.js: Support for the experimental syntax 'classProperties' isn't currently enabled (41:23):
  
    39 | 
    40 | export default class SwipeRating extends Component {
  &gt; 41 |   static defaultProps = {
       |                       ^
    42 |     type: 'star',
    43 |     ratingImage: require('./images/star.png'),
    44 |     ratingColor: '#f1c40f',
  
  Add @babel/plugin-proposal-class-properties (https://git.io/vb4SL) to the 'plugins' section of your Babel config to enable transformation.
  This error occurred during the build time and cannot be dismissed.
  </code></pre>
  
  <p>NB all the other questions, here in SO do not refer to CRWNA specifically &amp; none of the proposals worked for me &amp; I've tried quite a few...</p>
  
  <p>Most pertinent info <strong>issues</strong> <a href="https://github.com/react-native-training/react-native-elements/issues/1779" rel="nofollow noreferrer">https://github.com/react-native-training/react-native-elements/issues/1779</a> and  <a href="https://github.com/babel/babel/issues/8655" rel="nofollow noreferrer">https://github.com/babel/babel/issues/8655</a> and <a href="https://stackoverflow.com/questions/52237855/support-for-the-experimental-syntax-classproperties-isnt-currently-enabled">Support for the experimental syntax &#39;classProperties&#39; isn&#39;t currently enabled</a></p>
  
  <p><strong>package.json</strong></p>
  
  <pre><code>{
    "name": "gitphone",
    "version": "0.1.0",
    "private": true,
    "scripts": {
      "start": "./node_modules/.bin/react-native start",
      "start-clean": "rm -rf $TMPDIR/react-* &amp;&amp; watchman watch-del-all &amp;&amp; npm start -- --reset-cache",
      "android": "./node_modules/.bin/react-native run-android",
      "ios": "./node_modules/.bin/react-native run-ios",
      "web": "node scripts/start.js",
      "build": "node scripts/build.js",
      "test": "npm run test:web &amp;&amp; npm run test:native",
      "test:web-watch": "node scripts/test.js --watch --config \"./config/web.jest.config.js\"",
      "test:web": "node scripts/test.js --config \"./config/web.jest.config.js\"",
      "test:native": "node scripts/test.js --config \"./config/native.jest.config.js\"",
      "test:native-watch": "node scripts/test.js --watch --config \"./config/native.jest.config.js\"",
      "coverage": "node scripts/test.js --coverage --config \"./config/web.jest.config.js\"",
      "coverage:native": "node scripts/test.js --config \"./config/native.jest.config.js\" --coverage"
    },
    "dependencies": {
      "react": "^16.6.x",
      "react-app-polyfill": "^0.1.3",
      "react-art": "^16.6.x",
      "react-dom": "^16.6.x",
      "react-native": "0.55.x",
      "react-native-elements": "^1.1.0",
      "react-native-vector-icons": "^6.5.0",
      "react-native-web": "^0.10.x"
    },
    "devDependencies": {
      "@babel/core": "7.1.0",
      "@babel/plugin-proposal-class-properties": "^7.4.4",
      "@babel/preset-env": "^7.4.5",
      "@babel/preset-flow": "^7.0.0",
      "@babel/preset-react": "^7.0.0",
      "@svgr/webpack": "2.4.1",
      "babel-core": "7.0.0-bridge.0",
      "babel-eslint": "9.0.0",
      "babel-jest": "23.6.0",
      "babel-loader": "8.0.4",
      "babel-plugin-module-resolver": "^3.1.1",
      "babel-plugin-named-asset-import": "^0.2.3",
      "babel-preset-react-app": "^6.1.0",
      "bfj": "6.1.1",
      "case-sensitive-paths-webpack-plugin": "2.1.2",
      "chalk": "2.4.1",
      "css-loader": "1.0.0",
      "dotenv": "6.0.0",
      "dotenv-expand": "4.2.0",
      "eslint": "5.6.0",
      "eslint-config-react-app": "^3.0.5",
      "eslint-loader": "2.1.1",
      "eslint-plugin-flowtype": "2.50.1",
      "eslint-plugin-import": "2.14.0",
      "eslint-plugin-jsx-a11y": "6.1.2",
      "eslint-plugin-react": "7.11.1",
      "file-loader": "2.0.0",
      "fork-ts-checker-webpack-plugin-alt": "0.4.14",
      "fs-extra": "7.0.0",
      "html-webpack-plugin": "4.0.0-alpha.2",
      "identity-obj-proxy": "3.0.0",
      "jest": "23.6.0",
      "jest-pnp-resolver": "1.0.1",
      "jest-resolve": "23.6.0",
      "metro-react-native-babel-preset": "^0.51.0",
      "mini-css-extract-plugin": "0.4.3",
      "optimize-css-assets-webpack-plugin": "5.0.1",
      "pnp-webpack-plugin": "1.1.0",
      "postcss-flexbugs-fixes": "4.1.0",
      "postcss-loader": "3.0.0",
      "postcss-preset-env": "6.0.6",
      "postcss-safe-parser": "4.0.1",
      "react-dev-utils": "^6.1.1",
      "react-hot-loader": "^4.6.3",
      "react-test-renderer": "^16.6.3",
      "resolve": "1.8.1",
      "sass-loader": "7.1.0",
      "style-loader": "0.23.0",
      "terser-webpack-plugin": "1.1.0",
      "url-loader": "1.1.1",
      "webpack": "4.19.1",
      "webpack-dev-server": "3.1.9",
      "webpack-manifest-plugin": "2.0.4",
      "workbox-webpack-plugin": "3.6.3"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": [
      "&gt;0.2%",
      "not dead",
      "not ie &lt;= 11",
      "not op_mini all"
    ]
  }
  </code></pre>
  
  <p>babel.config.js</p>
  
  <pre><code>module.exports = function(api) {
    api.cache(true);
    return {
      presets: [
        ["module:metro-react-native-babel-preset"],
        ['react-app']
      ],
      ignore: [ "node_modules/art/core/color.js" ],
      plugins: [
      ['@babel/plugin-proposal-decorators', { legacy: true }],
      ['@babel/plugin-proposal-class-properties', { loose: true }],
      '@babel/plugin-syntax-dynamic-import',
      '@babel/plugin-transform-regenerator',
      [
        '@babel/plugin-transform-runtime',
        {
          helpers: false,
          regenerator: true,
        },
      ],
        ["module-resolver", {
          "alias": {
            "^react-native$": "react-native-web"
          }
        }]
      ],
    };
  };
  </code></pre>
  
  <p>My question is how do configure this so that yarn web works as expected?</p>