Rule idea: check for known values

[kristerkari]

There could a be a rule that checks for valid values for styling properties that are supported by React Native.

React Native documentation already list the valid values and those are also probably available in the repo: https://facebook.github.io/react-native/docs/layout-props.html

[arvigeus]

Will this help? .stylelintrc.json

[kristerkari]

@arvigeus There is already a rule that does that: https://github.com/kristerkari/stylelint-react-native/blob/master/src/rules/css-property-no-unknown/README.md#css-property-no-unknown

This idea was for checking valid values for those properties.

[jason1985]

@kristerkari Hi! I know this is super old, but was there a current way to lint for valid values for styling properties that are supported by React Native?

invalid for React Native:

height: '30px',

valid value for React Native:

height: 30,

I'm just looking for an easy solution to lint for both valid properties and values for React Native styles.

Thanks!

[kristerkari]

@jason1985 No worries.

Honestly, I don't see much point to add linting for the example that you gave, since it can be easily avoided if you use Typescript and add typings to your styles.

[jason1985]

@kristerkari Thanks so much for your response!

Works great however do you know of somewhere that has these types already or do I need to manually make them? I feel like someone must have already done this.

I've found this https://github.com/vhpoet/react-native-styling-cheat-sheet which is getting the info from the docs https://reactnative.dev/docs/layout-props (the link you posted).

I have something like this so far:

type Style = {
  alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "stretch" | "baseline"
  backgroundColor?: string
  borderColor?: string
  borderRadius?: number
  borderWidth?: number
  color?: string
  elevation?: number
  flex?: number
  flexDirection?: "row" | "row-reverse" | "column" | "column-reverse"
  fontFamily?: string
  fontSize?: number
  fontWeight?: "normal" | "bold" | "100" | "200" | "300" | "400" | "500" | "600" | "700" | "800" | "900"
  height?: number
  // etc.
}

Thank you!

[jason1985]

Just an update in the off chance someone else happens to read this and not know. I found all the possible react native style types defined by TextStyle and StyleSheet.

import {TextStyle, StyleSheet} from 'react-native'

const exampleStyles: ViewStyle | TextStyle = {
  // Intellisense works here
}

file location: ./node_modules/@types/react-native/index.d.ts

[kristerkari]

@jason1985 yes, that's good way to do it. Just assign the style object the ViewStyle, TextStyle, etc. depending on which element the styles get applied to 👍