How do I fix support for the experimental syntax 'decorators-legacy' isn't currently enabled error in react native expo

Question

0.00/5 (No votes)

See more:

Android

ReactJS

react-native

, +

I'm trying to run my react native app

Quote:
This is the error I'm getting when i run"npm start" on cmd

Error

 Expo  Press ? to show a list of all available commands.
SyntaxError: F:\PROJECT ONE\apptest-expo\src\components\PostList\index.js: Support for the experimental syntax 'decorators-legacy' isn't currently enabled (14:1):

  12 |   Constants.Window.headerHeight - HEADER_MIN_HEIGHT;
  13 |
> 14 | @withTheme
     | ^
  15 | class PostList extends PureComponent {
  16 |   state = { scrollY: new Animated.Value(0) };
  17 |
Failed building JavaScript bundle.

Source code of index.js

/** @format */

import React, { PureComponent } from "react";
import { FlatList, Text, RefreshControl, Animated, View } from "react-native";
import { PostLayout, PostBanner } from "@components";
import { Constants, Layout, withTheme, AppConfig } from "@common";
import { connect } from "react-redux";
import styles from "./styles";

const HEADER_MIN_HEIGHT = 40;
const HEADER_SCROLL_DISTANCE =
  Constants.Window.headerHeight - HEADER_MIN_HEIGHT;

@withTheme                                     <-----------here-----------
class PostList extends PureComponent {
  state = { scrollY: new Animated.Value(0) };

  constructor(props) {
    super(props);
    this.page = 1;
    this.limit = Constants.pagingLimit;
    this.isProductList = props.type === undefined;
  }

  componentDidMount() {
    this.page === 1 && this.fetchData();
  }

  fetchData = (reload = false) => {
    if (reload) {
      this.page = 1;
    }
    if (this.isProductList) {
      this.props.initProduct();
      this.props.fetchProducts(this.limit, this.page);
    } else {
      this.props.initNews();
      this.props.fetchNews(this.limit, this.page);
    }
  };

  _handleLoadmore = () => {
    this.nextPosts();
  };

  onRowClickHandle = (item) => {
    if (this.isProductList) {
      this.props.onViewProductScreen({ product: item });
    } else {
      this.props.onViewNewsScreen({ post: item });
    }
  };

  renderItem = ({ item, index }) => {
    if (item == null) return <View />;

    let layout = null;

    if (typeof this.props.layoutHome !== "undefined") {
      layout = this.props.layoutHome;
    }

    // only use parentCard prop if it is kind of Horizontal
    if (layout == null || 
      (layout == Constants.Layout.horizon && typeof this.props.parentLayout !== "undefined") ) {
      layout = this.props.parentLayout;
    }

    // update layout for advance mod
    if (layout === Constants.Layout.advance) {
      layout = Layout[index % Layout.length];
    }

    return (
      <PostLayout
        post={item}
        type={this.props.type}
        key={`key-${index}`}
        onViewPost={() => this.onRowClickHandle(item, this.props.type)}
        layout={layout}
        currency={this.props.currency}
      />
    );
  };

  nextPosts = () => {
    this.page += 1;

    if (this.isProductList) {
      this.props.fetchProducts(this.limit, this.page);
    } else {
      this.props.fetchNews(this.limit, this.page);
    }
  };

  headerComponent = () => {
    const { type, headerLabel, theme: {colors: { text }} } = this.props;

    const animateOpacity = this.state.scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
      outputRange: [1, 1, 0],
      extrapolate: "clamp",
    });

    const titleTranslate = this.state.scrollY.interpolate({
      inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
      outputRange: [0, -50, -150],
      extrapolate: "clamp",
    });

    if (typeof headerLabel != 'undefined') {
      return (
        <View style={styles.headerLabel}>
            <View style={styles.headerLeft}>
              <Text style={[styles.tagHeader, { color: text }]}>
                {headerLabel}
              </Text>
            </View>
        </View>
      )
    }

    return (
      <PostBanner
        onViewItem={this.onRowClickHandle}
        type={type}
        animateOpacity={animateOpacity}
        animate={titleTranslate}
      />
    );
  };

  render() {
    const { list, isFetching, parentLayout } = this.props;
    const {
      theme: {
        colors: { background },
      },
    } = this.props;

    // override numColumns
    let numColumns = 1;
    let styless = {};
    
    if (typeof parentLayout != "undefined") {
      if (parentLayout == Constants.Layout.twoColumn) {
        numColumns = 2;
        styless = {}
      }
      if (parentLayout == Constants.Layout.threeColumn) {
        numColumns = 3;
        styless = {}
      } else {
        // advance layout
        styless = {flexWrap: "wrap", flexDirection: "row"};
      }
    }
    if(!this.isProductList) {
      numColumns = 3;
      styless = {};
    }

    return (
      <FlatList
        overScrollMode="never"
        style={{ backgroundColor: background }}
        contentContainerStyle={[
          styles.flatlist,
          { backgroundColor: background }, styless
        ]}
        data={list}
        key={numColumns === 1 ? "1" : (numColumns === 2 ? "2" : "3")}
        keyExtractor={(item, index) => `post_${item.id}_${index}`}
        renderItem={this.renderItem}
        scrollEventThrottle={1}
        numColumns={numColumns}

        refreshing={isFetching}
        refreshControl={
          <RefreshControl
            refreshing={isFetching}
            onRefresh={() => this.fetchData(true)}
          />
        }
        ListHeaderComponent={this.headerComponent}

        onEndReachedThreshold={10}
        onEndReached={this._handleLoadmore}
        onScroll={Animated.event([
          { nativeEvent: { contentOffset: { y: this.state.scrollY } } },
        ])}
      />
    );
  }
}

const mapStateToProps = ({ products, news, page, currency }, ownProps) => {
  const list =
    typeof ownProps.type === "undefined" ? products.listAll : news.list;
  const isFetching = products.isFetching || news.isFetching;
  const layoutHome = products.layoutHome;
  return { list, isFetching, page, currency, layoutHome };
};

const mergeProps = (stateProps, dispatchProps, ownProps) => {
  const { dispatch } = dispatchProps;
  const Product = require("@redux/ProductRedux");
  const News = require("@redux/NewsRedux");
  
  return {
    ...ownProps,
    ...stateProps,
    fetchProducts: (per_page, page) => {
      Product.actions.fetchAllProducts(dispatch, per_page, page);
    },
    fetchNews: (per_page, page) => {
      News.actions.fetchNews(dispatch, per_page, page);
    },
    initProduct: () => dispatch(Product.actions.initProduct()),
    initNews: () => dispatch(News.actions.initNews()),
  };
};

export default connect(
  mapStateToProps,
  null,
  mergeProps
)(PostList);

package.jsonpackage.json

<pre lang="Javascript">

{
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject"
},

"dependencies": {
"@babel/plugin-proposal-decorators": "^7.12.1",
"@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"
}

Quote:It's documented on babel’s page here https://babeljs.io/docs/en/babel-plugin-proposal-decorators.

I tried running: yarn add @babel/plugin-proposal-decorators

Quote:but I'm still getting the same error I don't know if it's a syntax error, but every time I run it I get this error Can you help me, thank you!

What I have tried:

Quote:
I tried running: yarn add @babel/plugin-proposal-decorators

Posted 29-Oct-20 6:18am

victor senanayaka

Updated 29-Oct-20 7:29am

Add a Solution

1 solution

Add a Solution

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Richard MacCutchan · Answer 1 · 2020-10-29T07:30:00

Solution 1

https://medium.com/@patrickjbradley/support-for-the-experimental-syntax-decorators-legacy-isn-t-currently-enabled-f69206bade39[^]

Posted 29-Oct-20 7:30am

Richard MacCutchan

Comments

victor senanayaka 29-Oct-20 14:05pm

Hi thank you for taking time to help me with the issue, I tried what's on that page before it still doesn't work, can you help thanks : )

Richard MacCutchan 29-Oct-20 14:16pm

Sorry, I just found that by a Google search. I suggest you try the same and read every suggested solution.

victor senanayaka 29-Oct-20 14:33pm

you are right, I should try few more methods once again thank you so much for helping me, :)

How do I fix support for the experimental syntax 'decorators-legacy' isn't currently enabled error in react native expo

1 solution

Solution 1

Add your solution here

Preview 0

How do I fix support for the experimental syntax 'decorators-legacy' isn't currently enabled error in react native expo

1 solution

Solution 1

Add your solution here

Preview 0

Existing Members

...or Join us