React Navigation | [eslint] Parsing error: Unexpected token = | React-Native

Question

I'm having a linting issue with the Air Bnb eslint ruleset, this is my code:

import React, { Component } from 'react';
import {
  StyleSheet,
  Text,
  View,
} from 'react-native';

class HomePage extends Component {
  static navigationOptions = {
    title: 'Whats on',
    headerStyle: {
      backgroundColor: '#1980F5',
    },
    headerTintColor: '#fff',
  };

  render() {
    return (
      <View>
        <Text>Insert HomePage</Text>
      </View>
    );
  }
}
export default HomePage;

after navigationOption it doesn't like the "=" (line 9) and shows the message in the title. Everything works like it should but i would like to know how i can get rid of the ESlint error without disabling the rule.

Thanks in advance

score 1 · Answer 1 · answered Aug 24 '18 at 12:54

According to https://github.com/airbnb/javascript/issues/589 this is still intended behaviour but can be resolved by adding the babel-eslint parser and transform.

In your .eslintrc add

{
  ...
  "parser": "babel-eslint",
  "settings": {
    ...
    "import/parser": "babel-eslint",
  }
  ...
}

If you'd like to avoid this you could also add the value as a property on the class.

class Example {}
Example.staticProp = 'value';

React Navigation | [eslint] Parsing error: Unexpected token = | React-Native

1 Answers1