sort-styles.md

Require StyleSheet keys to be sorted

It's like sort-keys, but just for React Native styles.

Keeping your style definitions sorted is a common convention that helps with readability. This rule lets you enforce an ascending (default) or descending alphabetical order for both "class names" and style properties.

Rule Details

The following patterns are considered warnings:

const styles = StyleSheet.create({
  button: {
    width: 100,
    color: 'green',
  },
});

const styles = StyleSheet.create({
  button: {},
  anchor: {},
});

The following patterns are not considered warnings:

const styles = StyleSheet.create({
  button: {
    color: 'green',
    width: 100,
  },
});

const styles = StyleSheet.create({
  anchor: {},
  button: {},
});

Options

{
    "react-native/sort-styles": ["error", "asc", { "ignoreClassNames": false, "ignoreStyleProperties": false }]
}

The 1st option is "asc" or "desc".

• "asc" (default) - enforce properties to be in ascending order.
• "desc" - enforce properties to be in descending order.

The 2nd option is an object which has 2 properties.

• ignoreClassNames - if true, order will not be enforced on the class name level. Default is false.
• ignoreStyleProperties - if true, order will not be enforced on the style property level. Default is false.

desc

/* eslint react-native/sort-styles: ["error", "desc"] */

The following patterns are considered warnings:

const styles = StyleSheet.create({
  button: {
    color: 'green',
    width: 100,
  },
});

const styles = StyleSheet.create({
  anchor: {},
  button: {},
});

The following patterns are not considered warnings:

const styles = StyleSheet.create({
  button: {
    width: 100,
    color: 'green',
  },
});

const styles = StyleSheet.create({
  button: {},
  anchor: {},
});

ignoreClassNames

/* eslint react-native/sort-styles: ["error", "asc", { "ignoreClassNames": true }] */

The following patterns are not considered warnings:

const styles = StyleSheet.create({
  button: {
    color: 'green',
    width: 100,
  },
  anchor: {},
});

ignoreStyleProperties

/* eslint react-native/sort-styles: ["error", "asc", { "ignoreStyleProperties": true }] */

The following patterns are not considered warnings:

const styles = StyleSheet.create({
  anchor: {},
  button: {
    width: 100,
    color: 'green',
  },
});