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
• View

Flexbox

Name	Type	Default	Description
alignContent	oneOf flex-start, flex-end, center, stretch, space-between, space-around		alignContent controls how rows align in the cross direction, overriding the alignContent of the parent. See https://developer.mozilla.org/en-US/docs/Web/CSS/align-content for more details.
alignItems	oneOf flex-start, flex-end, center, stretch, baseline	stretch	alignItems aligns children in the cross direction. For example, if children are flowing vertically, alignItems controls how they align horizontally. It works like align-items in CSS, except the default value is stretch instead of flex-start. See https://css-tricks.com/almanac/properties/a/align-items/ for more detail.
alignSelf	oneOf auto, flex-start, flex-end, center, stretch, baseline	auto	controls how a child aligns in the cross direction, overriding the alignItems of the parent. It works like align-self in CSS. See https://css-tricks.com/almanac/properties/a/align-self/ for more detail.
aspectRatio	number		aspectRatio controls the size of the undefined dimension of a node. aspectRatio is a non-standard property only available in React Native and not CSS. On a node with a set width/height aspectRatio controls the size of the unset dimension. On a node with a set flexBasis aspectRatio controls the size of the node in the cross axis if unset. On a node with a measure function aspectRatio works as though the measure function measures the flexBasis. On a node with flexGrow/flexShrink aspectRatio controls the size of the node in the cross axis if unset. aspectRatio takes min/max dimensions into account.
borderBottomWidth	number	0	borderBottomWidth works like border-bottom-width in CSS. See http://www.w3schools.com/cssref/pr_border-bottom_width.asp for more details.
borderLeftWidth	number	0	borderLeftWidth works like border-left-width in CSS. See http://www.w3schools.com/cssref/pr_border-bottom_width.asp for more details.
borderRightWidth	number	0	borderRightWidth works like border-right-width in CSS. See http://www.w3schools.com/cssref/pr_border-right_width.asp for more details.
borderTopWidth	number	0	borderTopWidth works like border-top-width in CSS. See http://www.w3schools.com/cssref/pr_border-top_width.asp for more details.
borderEndWidth	number	0	When direction is ltr, borderEndWidth is equivalent to borderRightWidth. When direction is rtl, borderEndWidth is equivalent to borderLeftWidth.
borderStartWidth	number	0	When direction is ltr, borderStartWidth is equivalent to borderLeftWidth. When direction is rtl, borderStartWidth is equivalent to borderRightWidth.
borderWidth	number	0	borderWidth works like border-width in CSS. See http://www.w3schools.com/cssref/pr_border-width.asp for more details.
bottom	number	auto*	bottom is the number of logical pixels to offset the bottom edge of this component. It works similarly to bottom 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 top affects layout.
direction	oneOf inherit, ltr, rtl	inherit	direction specifies the directional flow of the user interface. The default is inherit, 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 none, flex	flex	display sets the display type of this component. It works similarly to display in CSS, but only support 'flex' and 'none'.
end	number	auto*	When the direction is ltr, end is equivalent to right. When the direction is rtl, end is equivalent to left. This style takes precedence over the left and right styles.
start	number	auto*	When the direction is ltr, start is equivalent to left. When the direction is rtl, start is equivalent to right. This style takes precedence over the left, right, and end styles.
flex	number	0	In React Native flex does not work the same way that it does in CSS. flex is a number rather than a string, and it works according to the css-layout library at https://github.com/facebook/css-layout . When flex is a positive number, it makes the component flexible and it will be sized proportional to its flex value. So a component with flex set to 2 will take twice the space as a component with flex set to 1. When flex is 0, the component is sized according to width and height and it is inflexible. When flex is -1, the component is normally sized according width and height. However, if there's not enough space, the component will shrink to its minWidth and minHeight. flexGrow, flexShrink and flexBasis work the same as in CSS.
flexDirection	oneOf row, row-reverse, column, column-reverse	column	flexDirection controls which directions children of a container go. row goes left to right, column goes top to bottom, and you may be able to guess what the other two do. It works like flex-direction in CSS, except the default is column. See https://css-tricks.com/almanac/properties/f/flex-direction/ for more detail.
flexBasis	number	0
flexGrow	number	0
flexShrink	number	0
flexWrap	oneOf wrap, nowrap	nowrap	flexWrap controls whether children can wrap around after they hit the end of a flex container. It works like flex-wrap in CSS. See https://css-tricks.com/almanac/properties/f/flex-wrap/ for more detail.
height	number	auto*	height sets the height of this component. It works similarly to height 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, flex-end, center, space-between, space-around	flex-start	justifyContent aligns children in the main direction. For example, if children are flowing vertically, justifyContent controls how they align vertically. It works like justify-content in CSS. See https://css-tricks.com/almanac/properties/j/justify-content/ for more detail.
left	number	auto*	left is the number of logical pixels to offset the left edge of this component. It works similarly to left 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 left affects layout.
margin	number	0	Setting margin has the same effect as setting each of marginTop, marginLeft, marginBottom, and marginRight.
marginBottom	number	0	marginBottom works like margin-bottom in CSS. See http://www.w3schools.com/cssref/pr_margin-bottom.asp for more details.
marginHorizontal	number	0	Setting marginHorizontal has the same effect as setting both marginLeft and marginRight.
marginLeft	number	0	marginLeft works like margin-left in CSS. See http://www.w3schools.com/cssref/pr_margin-left.asp for more details.
marginRight	number	0	marginRight works like margin-right in CSS. See http://www.w3schools.com/cssref/pr_margin-right.asp for more details.
marginTop	number	0	marginTop works like margin-top in CSS. See http://www.w3schools.com/cssref/pr_margin-top.asp for more details.
marginVertical	number	0	Setting marginVertical has the same effect as setting both marginTop and marginBottom.
marginEnd	number	0	When direction is ltr, marginEnd is equivalent to marginRight. When direction is rtl, marginEnd is equivalent to marginLeft.
marginStart	number	0	When direction is ltr, marginStart is equivalent to marginLeft. When direction is rtl, marginStart is equivalent to marginRight.
maxHeight	number	auto*	maxHeight is the maximum height for this component, in logical pixels. It works similarly to max-height 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_max-height.asp for more details.
maxWidth	number	auto*	maxWidth is the maximum width for this component, in logical pixels. It works similarly to max-width 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_max-width.asp for more details.
minHeight	number	auto*	minHeight is the minimum height for this component, in logical pixels. It works similarly to min-height 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_min-height.asp for more details.
minWidth	number	auto*	minWidth is the minimum width for this component, in logical pixels. It works similarly to min-width 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_min-width.asp for more details.
padding	number	0	padding works like padding in CSS. It's like setting each of paddingTop, paddingBottom, paddingLeft, and paddingRight to the same thing. See http://www.w3schools.com/css/css_padding.asp for more details.
paddingBottom	number	0	paddingBottom works like padding-bottom in CSS. See http://www.w3schools.com/cssref/pr_padding-bottom.asp for more details.
paddingHorizontal	number	0	Setting paddingHorizontal is like setting both of paddingLeft and paddingRight.
paddingLeft	number	0	paddingLeft works like padding-left in CSS. See http://www.w3schools.com/cssref/pr_padding-left.asp for more details.
paddingRight	number	0	paddingRight works like padding-right in CSS. See http://www.w3schools.com/cssref/pr_padding-right.asp for more details.
paddingTop	number	0	paddingTop works like padding-top in CSS. See http://www.w3schools.com/cssref/pr_padding-top.asp for more details.
paddingVertical	number	0	Setting paddingVertical is like setting both of paddingTop and paddingBottom.
paddingEnd	number	0	When direction is ltr, paddingEnd is equivalent to paddingRight. When direction is rtl, paddingEnd is equivalent to paddingLeft.
paddingStart	number	0	When direction is ltr, paddingStart is equivalent to paddingLeft. When direction is rtl, paddingStart is equivalent to paddingRight.
position	oneOf absolute, relative	relative	position in React Native is similar to regular CSS, but everything is set to relative by default, so absolute positioning is always just relative to the parent. If you want to position a child using specific numbers of logical pixels relative to its parent, set the child to have absolute position. If you want to position a child relative to something that is not its parent, just don't use styles for that. Use the component tree. See https://github.com/facebook/css-layout for more details on how position differs between React Native and CSS.
right	number	auto*	right is the number of logical pixels to offset the right edge of this component. It works similarly to right 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/right for more details of how right affects layout.
top	number	auto*	top is the number of logical pixels to offset the top edge of this component. It works similarly to top 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/top for more details of how top affects layout.
width	number	auto*	width sets the width of this component. It works similarly to width 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.
zIndex	number	auto*	zIndex controls which components display on top of others. Normally, you don't use zIndex. Components render according to their order in the document tree, so later components draw over earlier ones. zIndex may be useful if you have animations or custom modal interfaces where you don't want this behavior. It works like the CSS z-index property - components with a larger zIndex will render on top. Think of the z-direction like it's pointing from the phone into your eyeball. See https://developer.mozilla.org/en-US/docs/Web/CSS/z-index for more detail.

• properties with default value auto marked with asterisk are do not actually have auto as their default value, they just behave like if they would in css if they had auto as their value. auto is not valid value for those properties in react-native

Shadow Prop Types IOS

Name	Type	Description
shadowColor	customColorPropType	Sets the drop shadow color
shadowOffset	customReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} )	Sets the drop shadow offset
shadowOpacity	number	Sets the drop shadow opacity (multiplied by the color's alpha component)
shadowRadius	number	Sets the drop shadow blur radius

Transforms

Name	Type
decomposedMatrix	customDecomposedMatrixPropType
transform	customReactPropTypes.arrayOf( ReactPropTypes.oneOfType([ ReactPropTypes.shape({perspective: ReactPropTypes.number}), ReactPropTypes.shape({rotate: ReactPropTypes.string}), ReactPropTypes.shape({rotateX: ReactPropTypes.string}), ReactPropTypes.shape({rotateY: ReactPropTypes.string}), ReactPropTypes.shape({rotateZ: ReactPropTypes.string}), ReactPropTypes.shape({scale: ReactPropTypes.number}), ReactPropTypes.shape({scaleX: ReactPropTypes.number}), ReactPropTypes.shape({scaleY: ReactPropTypes.number}), ReactPropTypes.shape({translateX: ReactPropTypes.number}), ReactPropTypes.shape({translateY: ReactPropTypes.number}), ReactPropTypes.shape({skewX: ReactPropTypes.string}), ReactPropTypes.shape({skewY: ReactPropTypes.string}) ]) )
transformMatrix	customTransformMatrixPropType

Image

Name	Required	Type	Platforms	Description
...Flexbox
...ShadowPropTypesIOS
...Transforms
backfaceVisibility	false	oneOf visible, hidden
backgroundColor	false	ColorPropType
borderBottomLeftRadius	false	number
borderBottomRightRadius	false	number
borderColor	false	ColorPropType
borderRadius	false	number
borderTopLeftRadius	false	number
borderTopRightRadius	false	number
borderWidth	false	number
opacity	false	number
overflow	false	oneOf visible, hidden
resizeMode	false	oneOf cover, contain, stretch, repeat, center		Determines how to resize the image when the frame doesn't match the raw image dimensions. Visit the official docs for a guide on each
tintColor	false	ColorPropType		Changes the color of all the non-transparent pixels to the tintColor.
overlayColor	false	string	android	When the image has rounded corners, specifying an overlayColor will cause the remaining space in the corners to be filled with a solid color. This is useful in cases which are not supported by the Android implementation of rounded corners: - Certain resize modes, such as 'contain' - Animated GIFs A typical way to use this prop is with images displayed on a solid background and setting the overlayColor to the same color as the background. For details of how this works under the hood, see http://frescolib.org/docs/rounded-corners-and-circles.html

ScrollView

Name	Required	Type	Platforms	Description
...Flexbox
...ShadowPropTypesIOS
...Transforms
backfaceVisibility	false	oneOf visible, hidden
backgroundColor	false	ColorPropType
borderBottomColor	false	ColorPropType
borderBottomLeftRadius	false	number
borderBottomRightRadius	false	number
borderBottomWidth	false	number
borderColor	false	ColorPropType
borderLeftColor	false	ColorPropType
borderLeftWidth	false	number
borderRadius	false	number
borderRightColor	false	ColorPropType
borderRightWidth	false	number
borderStyle	false	oneOf solid, dotted, dashed
borderTopColor	false	ColorPropType
borderTopLeftRadius	false	number
borderTopRightRadius	false	number
borderTopWidth	false	number
borderWidth	false	number
opacity	false	number
overflow	false	oneOf visible, hidden
elevation	false	number	android	(Android-only) Sets the elevation of a view, using Android's underlying elevation API. This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.

Text

Name	Required	Type	Platforms	Description
...View
color	false	ColorPropType
fontFamily	false	string
fontSize	false	number
fontStyle	false	oneOf normal, italic
fontVariant	false	arrayOf(oneOfsmall-caps, oldstyle-nums, lining-nums, tabular-nums, proportional-nums)	ios
textTransform	false	oneOf none, uppercase, lowercase, capitalize
fontWeight	false	oneOf normal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900		Specifies font weight. The values 'normal' and 'bold' are supported for most fonts. Not all fonts have a variant for each of the numeric values, in that case the closest one is chosen.
includeFontPadding	false	bool	android	Set to false to remove extra font padding intended to make space for certain ascenders / descenders. With some fonts, this padding can make text look slightly misaligned when centered vertically. For best results also set textAlignVertical to center. Default is true.
lineHeight	false	number
textAlign	false	oneOf auto, left, right, center, justify		Specifies text alignment. The value 'justify' is only supported on iOS and fallbacks to left on Android.
textDecorationLine	false	oneOf none, underline, line-through
textShadowColor	false	ColorPropType
textShadowOffset	false	ReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} )
textShadowRadius	false	number
textAlignVertical	false	oneOf auto, top, bottom, center	android
letterSpacing	false	number	ios
textDecorationColor	false	ColorPropType	ios
textDecorationStyle	false	oneOf solid, double, dotted, dashed	ios
writingDirection	false	oneOf auto, ltr, rtl	ios

View

Name	Required	Type	Platforms	Description
...Flexbox
...ShadowPropTypesIOS
...Transforms
backfaceVisibility	false	oneOf visible, hidden
backgroundColor	false	ColorPropType
borderBottomColor	false	ColorPropType
borderBottomEndRadius	false	number
borderBottomStartRadius	false	number
borderBottomLeftRadius	false	number
borderBottomRightRadius	false	number
borderBottomWidth	false	number
borderColor	false	ColorPropType
borderEndColor	false	ColorPropType
borderStartColor	false	ColorPropType
borderLeftColor	false	ColorPropType
borderLeftWidth	false	number
borderRadius	false	number
borderRightColor	false	ColorPropType
borderRightWidth	false	number
borderStyle	false	oneOf solid, dotted, dashed
borderTopColor	false	ColorPropType
borderTopEndRadius	false	number
borderTopStartRadius	false	number
borderTopLeftRadius	false	number
borderTopRightRadius	false	number
borderTopWidth	false	number
borderWidth	false	number
opacity	false	number
overflow	false	oneOf visible, hidden
elevation	false	number	android	(Android-only) Sets the elevation of a view, using Android's underlying elevation API. This adds a drop shadow to the item and affects z-order for overlapping views. Only supported on Android 5.0+, has no effect on earlier versions.

TextInput

Name	Required	Type	Platforms	Description
autoFocus	false	bool		If true, focuses the input on componentDidMount. The default value is false.
keyboardType	false	oneOf default, email-address, numeric, phone-pad, // iOS-only ascii-capable, numbers-and-punctuation, url, number-pad, name-phone-pad, decimal-pad, twitter, web-search		Determines which keyboard to open
maxLength	number		Limits the maximum number of characters that can be entered
onChangeText	false	callback func		Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler.

Appendix

Types

number

ReactPropTypes.number

string

ReactPropTypes.string

bool

ReactPropTypes.bool

oneOf

ReactPropTypes.oneOf([values])

arrayOf

ReactPropTypes.arrayOf(value)