vhpoet / react-native-styling-cheat-sheet

React Native Styling Cheat Sheet Most of the React Native styling material in one page. Imported from the official docs. Contents General • Flexbox • ShadowPropTypesIOS • Transforms Components • Image • ScrollView • Text • TextInput • View Flexbox | Name | Type | Default | Description | |------|------|---------|-------------| | alignContent | oneOf , , , , , | | controls how rows align in the cross direction, overriding the of the parent. See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content for more details. | | alignItems | oneOf , , , , | stretch | aligns children in the cross direction. For example, if children are flowing vertically, controls how they align horizontally. It works like in CSS, except the default value is instead of . See https://css-tricks.com/almanac/properties/a/align-items/ for more detail. | | alignSelf | oneOf , , , , , | auto | controls how a child aligns in the cross direction, overriding the of the parent. It works like in CSS. See https://css-tricks.com/almanac/properties/a/align-self/ for more detail. | | aspectRatio | number | | controls the size of the undefined dimension of a node. is a non-standard property only available in React Native and not CSS. On a node with a set / controls the size of the unset dimension. On a node with a set controls the size of the node in the cross axis if unset. On a node with a function works as though the function measures the . On a node with / controls the size of the node in the cross axis if unset. takes min/max dimensions into account. | | borderBottomWidth | number | 0 | works like in CSS. See http://www.w3schools.com/cssref/pr_border-bottom_width.asp for more details. | | borderLeftWidth | number | 0 | works like in CSS. See http://www.w3schools.com/cssref/pr_border-bottom_width.asp for more details. | | borderRightWidth | number | 0 | works like in CSS. See http://www.w3schools.com/cssref/pr_border-right_width.asp for more details. | | borderTopWidth | number | 0 | works like in CSS. See http://www.w3schools.com/cssref/pr_border-top_width.asp for more details. | | borderEndWidth | number | 0 | When direction is ltr, is equivalent to . When direction is rtl, is equivalent to . | | borderStartWidth | number | 0 | When direction is ltr, is equivalent to . When direction is rtl, is equivalent to . | | borderWidth | number | 0 | works like in CSS. See http://www.w3schools.com/cssref/pr_border-width.asp for more details. | | bottom | number | auto* | is the number of logical pixels to offset the bottom edge of this component. It works similarly to in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/bottom for more details of how affects layout. | | direction | oneOf , , | | specifies the directional flow of the user interface. The default is , except for root node which will have value based on the current locale. See https://facebook.github.io/yoga/docs/rtl/ for more details. | | display | oneOf , | | sets the display type of this component. It works similarly to in CSS, but only support 'flex' and 'none'. | | end | number | auto* | When the direction is , is equivalent to . When the direction is , is equivalent to . This style takes precedence over the and styles. | | start | number | auto* | When the direction is , is equivalent to . When the direction is , is equivalent to . This style takes precedence over the , , and styles. | | flex | number | 0 | In React Native does not work the same way that it does in CSS. is a number rather than a string, and it works according to the library at https://github.com/facebook/css-layout . When is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with set to 2 will take twice the space as a component with set to 1. When is 0, the component is sized according to and and it is inflexible. When is -1, the component is normally sized according and . However, if there's not enough space, the component will shrink to its and . , and work the same as in CSS. | | flexDirection | oneOf , , , | column | controls which directions children of a container go. goes left to right, goes top to bottom, and you may be able to guess what the other two do. It works like in CSS, except the default is . See https://css-tricks.com/almanac/properties/f/flex-direction/ for more detail. | | flexBasis | number | 0 | | | flexGrow | number | 0 | | | flexShrink | number | 0 | | | flexWrap | oneOf , | nowrap | controls whether children can wrap around after they hit the end of a flex container. It works like in CSS. See https://css-tricks.com/almanac/properties/f/flex-wrap/ for more detail. | | height | number | auto* | sets the height of this component. It works similarly to in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See http://www.w3schools.com/cssref/pr_dim_width.asp for more details. | | justifyContent | oneOf , , , , | flex-start | aligns children in the main direction. For example, if children are flowing vertically, controls how they align vertically. It works like in CSS. See https://css-tricks.com/almanac/properties/j/justify-content/ for more detail. | | left | number | auto* | is the number of logical pixels to offset the left edge of this component. It works similarly to in CSS, but in React Native you must use logical pixel units, rather than percents, ems, or any of that. See https://developer.mozilla.org/en-US/docs/Web/CSS/left for more details of how affects layout. | | margin | number | 0 | Setting has the same effect as setting each of , , , and . | | marginBottom | number | 0 | works like in CSS. See http://www.w3schools.com/cssref/pr_margin-bottom.asp for more details. | | marginHorizontal | number | 0 | Setting has the same effect as setting both and . | | marginLeft | number | 0 | works like in CSS. See http://www.w3schools.com/cssref/pr…