Support for the experimental syntax 'decorators-legacy' isn't currently enabled in React Native

Question

**

MenuOverlay.js source code

**

/** @format */

import React, { PureComponent } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import SideMenu from "react-native-drawer";

import { withTheme, warn} from "@common";
import { Drawer } from "@components";


@withTheme
class MenuOverlay extends PureComponent {
  static propTypes = {
    goToScreen: PropTypes.func,
    routes: PropTypes.object,
    isOpenMenu: PropTypes.bool.isRequired,
  };

  toggleMenu = (isOpen) => {
    if (!isOpen) {
      this.props.toggleMenu(isOpen);
    }
  };

  render() {
    const {
      isOpenMenu,
      theme: {
        colors: {text, background },
      },
    } = this.props;

    warn(this.props.theme)

    return (
      <SideMenu
        ref={(_drawer) => (this.drawer = _drawer)}
        type="overlay"
        tapToClose
        open={isOpenMenu}
        onClose={() => this.toggleMenu(false)}
        panCloseMask={0.3}
        panThreshold={0.3}
        openDrawerOffset={0.3}
        useInteractionManager
        content={
          <Drawer
            colorTextMenu={text}
            backgroundMenu={background}
            goToScreen={this.props.goToScreen}p
          />
        }>
        {this.props.routes}
      </SideMenu>
    );
  }
}

const mapStateToProps = ({ sideMenu }) => ({
  isOpenMenu: sideMenu.isOpen,
});

const mergeProps = (stateProps, dispatchProps, ownProps) => {
  const { dispatch } = dispatchProps;
  const { actions: sideMenuActions } = require("@redux/SideMenuRedux");
  return {
    ...ownProps,
    ...stateProps,
    toggleMenu: (isOpen) => dispatch(sideMenuActions.toggleMenu(isOpen)),
  };
};
export default connect(
  mapStateToProps,
  null,
  mergeProps
)(MenuOverlay);

""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""""

package.json

"dependencies": {
    "@react-native-community/netinfo": "4.6.0",
    "api-ecommerce": "^0.0.34",
    "babel-preset-env": "^1.7.0",
    "base-64": "0.1.0",
    "currency-formatter": "1.5.5",
    "expo": "36.0.2",
    "expo-ads-admob": "8.0.0",
    "expo-ads-facebook": "8.0.0",
    "expo-apple-authentication": "2.0.0",
    "expo-asset": "8.0.0",
    "expo-av": "8.0.0",
    "expo-constants": "8.0.0",
    "expo-facebook": "8.0.0",
    "expo-font": "8.0.0",
    "expo-linear-gradient": "8.0.0",
    "expo-web-browser": "8.0.0",
    "firebase": "7.6.1",
    "html-entities": "1.2.1",
    "lodash": "4.17.15",
    "moment": "2.24.0",
    "oauth-1.0a": "^2.2.6",
    "patch-package": "6.2.0",
    "path": "0.12.7",
    "react": "16.12.0",
    "react-instantsearch": "6.1.0",
    "react-native": "https://github.com/expo/react-native/archive/sdk-36.0.0.tar.gz",
    "react-native-animatable": "1.3.3",
    "react-native-app-intro-slider": "3.0.0",
    "react-native-clean-form": "0.5.0",
    "react-native-collapsible": "1.5.1",
    "react-native-country-picker-modal": "1.9.8",
    "react-native-drawer": "https://github.com/luyx2412/react-native-drawer.git",
    "react-native-fluid-slider": "1.0.2",
    "react-native-gesture-handler": "~1.5.0",
    "react-native-image-zoom-viewer": "2.2.27",
    "react-native-keyboard-aware-scroll-view": "0.9.1",
    "react-native-masked-text": "1.13.0",
    "react-native-modalbox": "2.0.0",
    "react-native-paper": "3.4.0",
    "react-native-parallax": "0.3.0",
    "react-native-radio-buttons": "1.0.0",
    "react-native-reanimated": "~1.4.0",
    "react-native-render-html": "4.1.2",
    "react-native-restart": "0.0.13",
    "react-native-screens": "2.0.0-alpha.12",
    "react-native-scrollable-tab-view": "1.0.0",
    "react-native-side-menu": "1.1.3",
    "react-native-snap-carousel": "3.8.4",
    "react-native-star-rating": "1.1.0",
    "react-native-swipe-list-view": "2.1.2",
    "react-native-swiper": "^1.6.0-nightly.5",
    "react-native-webview": "8.0.1",
    "react-navigation": "^4.0.10",
    "react-navigation-header-buttons": "3.0.4",
    "react-navigation-props-mapper": "1.0.1",
    "react-navigation-stack": "^1.10.3",
    "react-navigation-tabs": "^2.6.2",
    "react-redux": "7.1.3",
    "redux": "4.0.5",
    "redux-actions": "2.6.5",
    "redux-persist": "^5.9.1",
    "redux-thunk": "2.3.0",
    "reselect": "4.0.0",
    "tcomb-form-native": "0.6.20",
    "urijs": "1.19.2",
    "url": "0.11.0",
    "url-parse": "1.4.7",
    "util": "0.12.1",
    "uuid": "3.3.3",
    "validate.js": "0.13.1",
    "wpapi": "^1.2.1"
  },
  "devDependencies": {
    "babel-jest": "24.9.0",
    "babel-plugin-transform-remove-console": "6.9.4",
    "babel-preset-expo": "8.0.0",
    "babel-preset-react-native": "4.0.1",
    "jest": "24.9.0",
    "reactotron-react-native": "3.6.4",
    "reactotron-redux": "3.1.1"
  }

//////////////////////////////////////////////////////////////////////////////////////////////////

I don't know if I have missed any dependencies,

I need help from you to resolve this issue thank you

Answer 1

You'll need to do a few things

1. If you don't already have a .babelrc , create one and add the following

{
  "plugins": [ 
    [ 
      "@babel/plugin-proposal-decorators", { "legacy": true } 
    ] 
  ]
}

---

2. Add the babel-plugin-proposal-decorators package:

yarn add @babel/plugin-proposal-decorators