@fooxly/eslint-config-react-native v3.0.0
Fooxly ESLint Config for React Native
The default ESLint config for Fooxly projects using React Native.
:rocket: Powered By
:heart: Support us
About 40% of your donation goes to one of the charities we support. For further information or questions please visit our website or contact us via charity@fooxly.com.
:cloud: Installation
using npm
npm install --save-dev @fooxly/eslint-config-react-nativeusing yarn
yarn add -D @fooxly/eslint-config-react-native:triangular_ruler: Usage
We recommend using Babel's ESLint parser.
using .eslintrc
{
"parser": "babel-eslint",
"extends": ["@fooxly/eslint-config-react-native"]
}using package.json
...
"eslintConfig": {
"parser": "babel-eslint",
"extends": ["@fooxly/eslint-config-react-native"]
}
...:straight_ruler: Our Configuration
This configuration extends our React config with a few additional rules for React Native.
No Inline Styles
Logging level: Error
Unless variables (like Animations) are used for inline styling, these slow down your app (mostly during re-renders) and are therefore not allowed.
No Unused Styles
Logging level: Error
This one is obvious, reduces the bundle size due to the styles not being used anyways.
No Color Literals
Logging level: Warning
We (like others) prefer storing all our color variables inside a theme file (like styled-components theming) or folder.
Splitting Platform Components
Logging level: Warning
Splitting platform-specific parts of your app in multiple files produces the correct bundle per platform.
No Single Element Style Arrays
Logging level: Error
These cause an unnecessary performance loss due to the array's identity changing on every re-render, and are therefore not allowed.
:label: Badge
Are you using this in one of your projects? Include this badge in your README to let others know that your code is using the Fooxly code style.
[](https://www.npmjs.com/package/@fooxly/eslint-config-react-native)