Menu
Where can I get a list of the style properties supported by React Native for each type of component?
548
React Practice Course. We will import List in our Home component and show it on screen. To create a list, we will use the map() method. This will iterate over an array of items, and render each one. When we run the app, we will see the list of names.
With React Native, you style your application using JavaScript. All of the core components accept a prop named style . The style names and values usually match how CSS works on the web, except names are written using camel casing, e.g. backgroundColor rather than background-color .
React Native lets you style your whole application using JavaScript. Every component can use a prop named style , which enables you to write CSS styles for those components. There are two main methods that React Native has for creating styles: inline styling and using a style prop to style subcomponents.
Style attributes React Native mostly use CSS attributes with camelCase instead of kebab-case for styling.
Here's a cheatsheet:
The supported styles are in the official documentation for each component. Here are the links for View and Text components:
View : https://reactnative.dev/docs/view#style Text: https://reactnative.dev/docs/text#style Note that where it says View Style Props... on the top of styles for Text, it means it also supports (most of) the styles that View supports.
131
I have extracted a list of valid styles from react native logs.
Below collection help me alot during regular work.
[ "alignContent", "alignItems", "alignSelf", "aspectRatio", "backfaceVisibility", "backgroundColor", "borderBottomColor", "borderBottomLeftRadius", "borderBottomRightRadius", "borderBottomWidth", "borderColor", "borderLeftColor", "borderLeftWidth", "borderRadius", "borderRightColor", "borderRightWidth", "borderStyle", "borderTopColor", "borderTopLeftRadius", "borderTopRightRadius", "borderTopWidth", "borderWidth", "bottom", "color", "decomposedMatrix", "direction", "display", "elevation", "flex", "flexBasis", "flexDirection", "flexGrow", "flexShrink", "flexWrap", "fontFamily", "fontSize", "fontStyle", "fontVariant", "fontWeight", "height", "includeFontPadding", "justifyContent", "left", "letterSpacing", "lineHeight", "margin", "marginBottom", "marginHorizontal", "marginLeft", "marginRight", "marginTop", "marginVertical", "maxHeight", "maxWidth", "minHeight", "minWidth", "opacity", "overflow", "overlayColor", "padding", "paddingBottom", "paddingHorizontal", "paddingLeft", "paddingRight", "paddingTop", "paddingVertical", "position", "resizeMode", "right", "rotation", "scaleX", "scaleY", "shadowColor", "shadowOffset", "shadowOpacity", "shadowRadius", "textAlign", "textAlignVertical", "textDecorationColor", "textDecorationLine", "textDecorationStyle", "textShadowColor", "textShadowOffset", "textShadowRadius", "tintColor", "top", "transform", "transformMatrix", "translateX", "translateY", "width", "writingDirection", "zIndex" ] Implementation details are here: https://github.com/vhpoet/react-native-styling-cheat-sheet/blob/master/README.md
33
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
