cannot enable experimental syntax 'classProperties' in a hybrid react-native-web project that uses react native elements

Question

I am following this tutorial

My project was initialised using CRWNA

Tutorial author and his git nb I have contacted him...

This is my tutorial repo showing the guilty code…

So, yarn android works as expected but yarn web fails to compile with:

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 {
> 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.

NB all the other questions, here in SO do not refer to CRWNA specifically & none of the proposals worked for me & I've tried quite a few...

Most pertinent info issues https://github.com/react-native-training/react-native-elements/issues/1779 and https://github.com/babel/babel/issues/8655 and Support for the experimental syntax 'classProperties' isn't currently enabled

package.json

{
  "name": "gitphone",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "./node_modules/.bin/react-native start",
    "start-clean": "rm -rf $TMPDIR/react-* && watchman watch-del-all && 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 && 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": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

babel.config.js

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"
        }
      }]
    ],
  };
};

My question is how do configure this so that yarn web works as expected?