React Native Css Cheat Sheet



Compared to CSS, React Native’s styling options are pretty sparse right now. Measurement units are all in pixels, there are no gradient options, no animations and no media queries. Some of these may never become part of React Native’s styles — animations, for example, are supported separately. The CSS reference guide includes CSS syntax, the most important selectors, properties, sizes and units, and other useful CSS information in a short and informative format. We hope you will find the CSS cheat sheet a valuable resource. The Full React Native Layout Cheat Sheet by Dror Biran, As a newbie in React Native I found myself time after time going back to React Native layout docs, struggling to understand and master the React Native Flexbox is an algorithm to specify the layout of component's children. It provides a consistent layout on different screen sizes. 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. The style prop can be a plain old JavaScript object.

React Native Css Cheat Sheet Pdf

React Native Css Cheat Sheet

Most of the React Native styling material in one page. Imported from the official docs.

Font Awesome, the iconic font and CSS framework. Font Awesome 4 is so 2017. Upgrade to version 5 and get twice the icons. Toggle navigation Font.

Contents

General

Components

Flexbox

NameTypeDescription
alignItemsoneOfflex-start, flex-end, center, stretchalignItems 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.
alignSelfoneOfauto, flex-start, flex-end, center, stretchcontrols 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.
borderBottomWidthnumberborderBottomWidth works like border-bottom-width in CSS. See http://www.w3schools.com/cssref/pr_border-bottom_width.asp for more details.
borderLeftWidthnumberborderLeftWidth works like border-left-width in CSS. See http://www.w3schools.com/cssref/pr_border-bottom_width.asp for more details.
borderRightWidthnumberborderRightWidth works like border-right-width in CSS. See http://www.w3schools.com/cssref/pr_border-right_width.asp for more details.
borderTopWidthnumberborderTopWidth works like border-top-width in CSS. See http://www.w3schools.com/cssref/pr_border-top_width.asp for more details.
borderWidthnumberborderWidth works like border-width in CSS. See http://www.w3schools.com/cssref/pr_border-width.asp for more details.
bottomnumberbottom 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.
flexnumberIn 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.
flexDirectiononeOfrow, row-reverse, column, column-reverseflexDirection 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.
flexWraponeOfwrap, nowrapflexWrap 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.
heightnumberheight 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.
justifyContentoneOfflex-start, flex-end, center, space-between, space-aroundjustifyContent 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.
leftnumberleft 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.
marginnumberSetting margin has the same effect as setting each of marginTop, marginLeft, marginBottom, and marginRight.
marginBottomnumbermarginBottom works like margin-bottom in CSS. See http://www.w3schools.com/cssref/pr_margin-bottom.asp for more details.
marginHorizontalnumberSetting marginHorizontal has the same effect as setting both marginLeft and marginRight.
marginLeftnumbermarginLeft works like margin-left in CSS. See http://www.w3schools.com/cssref/pr_margin-left.asp for more details.
marginRightnumbermarginRight works like margin-right in CSS. See http://www.w3schools.com/cssref/pr_margin-right.asp for more details.
marginTopnumbermarginTop works like margin-top in CSS. See http://www.w3schools.com/cssref/pr_margin-top.asp for more details.
marginVerticalnumberSetting marginVertical has the same effect as setting both marginTop and marginBottom.
maxHeightnumbermaxHeight 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.
maxWidthnumbermaxWidth 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.
minHeightnumberminHeight 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.
minWidthnumberminWidth 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.
paddingnumberpadding 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.
paddingBottomnumberpaddingBottom works like padding-bottom in CSS. See http://www.w3schools.com/cssref/pr_padding-bottom.asp for more details.
paddingHorizontalnumberSetting paddingHorizontal is like setting both of paddingLeft and paddingRight.
paddingLeftnumberpaddingLeft works like padding-left in CSS. See http://www.w3schools.com/cssref/pr_padding-left.asp for more details.
paddingRightnumberpaddingRight works like padding-right in CSS. See http://www.w3schools.com/cssref/pr_padding-right.asp for more details.
paddingTopnumberpaddingTop works like padding-top in CSS. See http://www.w3schools.com/cssref/pr_padding-top.asp for more details.
paddingVerticalnumberSetting paddingVertical is like setting both of paddingTop and paddingBottom.
positiononeOfabsolute, relativeposition 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.
rightnumberright 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.
topnumbertop 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.
widthnumberwidth 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.
zIndexnumberzIndex 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.
Sheet

Shadow Prop Types IOS

Stylesheet react native
NameTypeDescription
shadowColorcustomColorPropTypeSets the drop shadow color
shadowOffsetcustomReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} )Sets the drop shadow offset
shadowOpacitynumberSets the drop shadow opacity (multiplied by the color’s alpha component)
shadowRadiusnumberSets the drop shadow blur radius

Transforms

NameType
decomposedMatrixcustomDecomposedMatrixPropType
transformcustomReactPropTypes.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}) ]) )
transformMatrixcustomTransformMatrixPropType

Image

NameRequiredTypePlatformsDescription
…Flexbox
…ShadowPropTypesIOS
…Transforms
backfaceVisibilityfalseoneOfvisible, hidden
backgroundColorfalseColorPropType
borderBottomLeftRadiusfalsenumber
borderBottomRightRadiusfalsenumber
borderColorfalseColorPropType
borderRadiusfalsenumber
borderTopLeftRadiusfalsenumber
borderTopRightRadiusfalsenumber
borderWidthfalsenumber
opacityfalsenumber
overflowfalseoneOfvisible, hidden
resizeModefalseoneOfObject.keys(ImageResizeMode))
tintColorfalseColorPropTypeChanges the color of all the non-transparent pixels to the tintColor.
overlayColorfalsestringandroidWhen 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

NameRequiredTypePlatformsDescription
…Flexbox
…ShadowPropTypesIOS
…Transforms
backfaceVisibilityfalseoneOfvisible, hidden
backgroundColorfalseColorPropType
borderBottomColorfalseColorPropType
borderBottomLeftRadiusfalsenumber
borderBottomRightRadiusfalsenumber
borderBottomWidthfalsenumber
borderColorfalseColorPropType
borderLeftColorfalseColorPropType
borderLeftWidthfalsenumber
borderRadiusfalsenumber
borderRightColorfalseColorPropType
borderRightWidthfalsenumber
borderStylefalseoneOfsolid, dotted, dashed
borderTopColorfalseColorPropType
borderTopLeftRadiusfalsenumber
borderTopRightRadiusfalsenumber
borderTopWidthfalsenumber
borderWidthfalsenumber
opacityfalsenumber
overflowfalseoneOfvisible, hidden
elevationfalsenumberandroid(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

React Native Css Cheat SheetCheat
NameRequiredTypePlatformsDescription
…View
colorfalseColorPropType
fontFamilyfalsestring
fontSizefalsenumber
fontStylefalseoneOfnormal, italic
fontWeightfalseoneOfnormal, bold, 100, 200, 300, 400, 500, 600, 700, 800, 900Specifies 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.
lineHeightfalsenumber
textAlignfalseoneOfauto, left, right, center, justifySpecifies text alignment. The value ‘justify’ is only supported on iOS and fallbacks to left on Android.
textDecorationLinefalseoneOfnone, underline, line-through, underline, line-through
textShadowColorfalseColorPropType
textShadowOffsetfalseReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} )
textShadowRadiusfalsenumber
textAlignVerticalfalseoneOfauto, top, bottom, centerandroid
letterSpacingfalsenumberios
textDecorationColorfalseColorPropTypeios
textDecorationStylefalseoneOfsolid, double, dotted, dashedios
writingDirectionfalseoneOfauto, ltr, rtlios

View

NameRequiredTypePlatformsDescription
…Flexbox
…ShadowPropTypesIOS
…Transforms
backfaceVisibilityfalseoneOfvisible, hidden
backgroundColorfalseColorPropType
borderBottomColorfalseColorPropType
borderBottomLeftRadiusfalsenumber
borderBottomRightRadiusfalsenumber
borderBottomWidthfalsenumber
borderColorfalseColorPropType
borderLeftColorfalseColorPropType
borderLeftWidthfalsenumber
borderRadiusfalsenumber
borderRightColorfalseColorPropType
borderRightWidthfalsenumber
borderStylefalseoneOfsolid, dotted, dashed
borderTopColorfalseColorPropType
borderTopLeftRadiusfalsenumber
borderTopRightRadiusfalsenumber
borderTopWidthfalsenumber
borderWidthfalsenumber
opacityfalsenumber
overflowfalseoneOfvisible, hidden
elevationfalsenumberandroid(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.

Appendix

Types

ReactPropTypes.number

ReactPropTypes.string

React Native Css Cheat Sheet Printable

ReactPropTypes.oneOf([values])