react-native-styling-cheat-sheet

by vhpoet

Most of the React Native styling material in one page

4.0K Stars 524 Forks Last release: Not found 36 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

React Native Styling Cheat Sheet

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

YAP

Contents

General

Components

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/prborder-bottomwidth.asp for more details. | | borderLeftWidth | number | 0 |
borderLeftWidth
works like
border-left-width
in CSS. See http://www.w3schools.com/cssref/prborder-bottomwidth.asp for more details. | | borderRightWidth | number | 0 |
borderRightWidth
works like
border-right-width
in CSS. See http://www.w3schools.com/cssref/prborder-rightwidth.asp for more details. | | borderTopWidth | number | 0 |
borderTopWidth
works like
border-top-width
in CSS. See http://www.w3schools.com/cssref/prborder-topwidth.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/prborder-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
bottom
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
dimwidth.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/prmargin-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/prmargin-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
dimmax-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
dimmax-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
dimmin-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
dimmin-width.asp for more details. | | padding | number, string | 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, string | 0 |
paddingBottom
works like
padding-bottom
in CSS. See http://www.w3schools.com/cssref/prpadding-bottom.asp for more details. | | paddingHorizontal | number, string | 0 | Setting
paddingHorizontal
is like setting both of
paddingLeft
and
paddingRight
. | | paddingLeft | number, string | 0 |
paddingLeft
works like
padding-left
in CSS. See http://www.w3schools.com/cssref/pr
padding-left.asp for more details. | | paddingRight | number, string | 0 |
paddingRight
works like
padding-right
in CSS. See http://www.w3schools.com/cssref/prpadding-right.asp for more details. | | paddingTop | number, string | 0 |
paddingTop
works like
padding-top
in CSS. See http://www.w3schools.com/cssref/pr
padding-top.asp for more details. | | paddingVertical | number, string | 0 | Setting
paddingVertical
is like setting both of
paddingTop
and
paddingBottom
. | | paddingEnd | number, string | 0 | When direction is
ltr
,
paddingEnd
is equivalent to
paddingRight
. When direction is
rtl
,
paddingEnd
is equivalent to
paddingLeft
. | | paddingStart | number, string | 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/prdimwidth.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 | Type | Platforms | Description | | ---- | ---- | --------- | ----------- | | ...Flexbox | | ...ShadowPropTypesIOS | | ...Transforms | | backfaceVisibility | oneOf

visible
,
hidden
| | | | backgroundColor |
ColorPropType
| | | | borderBottomLeftRadius | number | | | | borderBottomRightRadius | number | | | | borderColor |
ColorPropType
| | | | borderRadius | number | | | | borderTopLeftRadius | number | | | | borderTopRightRadius | number | | | | borderWidth | number | | | | opacity | number | | | | overflow | oneOf
visible
,
hidden
| | | | resizeMode | 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 |
ColorPropType
| | Changes the color of all the non-transparent pixels to the tintColor. | | overlayColor | 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 | Type | Platforms | Description | | ---- | ---- | --------- | ----------- | | ...Flexbox | | ...ShadowPropTypesIOS | | ...Transforms | | backfaceVisibility | oneOf

visible
,
hidden
| | | | backgroundColor |
ColorPropType
| | | | borderBottomColor |
ColorPropType
| | | | borderBottomLeftRadius | number | | | | borderBottomRightRadius | number | | | | borderBottomWidth | number | | | | borderColor |
ColorPropType
| | | | borderLeftColor |
ColorPropType
| | | | borderLeftWidth | number | | | | borderRadius | number | | | | borderRightColor |
ColorPropType
| | | | borderRightWidth | number | | | | borderStyle | oneOf
solid
,
dotted
,
dashed
| | | | borderTopColor |
ColorPropType
| | | | borderTopLeftRadius | number | | | | borderTopRightRadius | number | | | | borderTopWidth | number | | | | borderWidth | number | | | | opacity | number | | | | overflow | oneOf
visible
,
hidden
| | | | elevation | 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 | Type | Platforms | Description | | ---- | ---- | --------- | ----------- | | ...View | | color |

ColorPropType
| | | | fontFamily | string | | | | fontSize | number | | | | fontStyle | oneOf
normal
,
italic
| | | | fontVariant | arrayOf(oneOf
small-caps
,
oldstyle-nums
,
lining-nums
,
tabular-nums
,
proportional-nums
) | ios | | | textTransform | oneOf
none
,
uppercase
,
lowercase
,
capitalize
| | | | fontWeight | 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 | 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 | number | | | | textAlign | oneOf
auto
,
left
,
right
,
center
,
justify
| | Specifies text alignment. The value 'justify' is only supported on iOS and fallbacks to
left
on Android. | | textDecorationLine | oneOf
none
,
underline
,
line-through
| | | | textShadowColor |
ColorPropType
| | | | textShadowOffset |
ReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} )
| | | | textShadowRadius | number | | | | textAlignVertical | oneOf
auto
,
top
,
bottom
,
center
| android | | | letterSpacing | number | ios | | | textDecorationColor |
ColorPropType
| ios | | | textDecorationStyle | oneOf
solid
,
double
,
dotted
,
dashed
| ios | | | writingDirection | oneOf
auto
,
ltr
,
rtl
| ios | |

TextInput

| Name | Type | Platforms | Description | | ---- | ---- | --------- | ----------- | | autoFocus | bool | | If true, focuses the input on componentDidMount. The default value is false. | | keyboardType | 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 | callback func | | Callback that is called when the text input's text changes. Changed text is passed as an argument to the callback handler. |

View

| Name | Type | Platforms | Description | | ---- | ---- | --------- | ----------- | | ...Flexbox | | ...ShadowPropTypesIOS | | ...Transforms | | backfaceVisibility | oneOf

visible
,
hidden
| | | | backgroundColor |
ColorPropType
| | | | borderBottomColor |
ColorPropType
| | | | borderBottomEndRadius | number | | | | borderBottomStartRadius | number | | | | borderBottomLeftRadius | number | | | | borderBottomRightRadius | number | | | | borderBottomWidth | number | | | | borderColor |
ColorPropType
| | | | borderEndColor |
ColorPropType
| | | | borderStartColor |
ColorPropType
| | | | borderLeftColor |
ColorPropType
| | | | borderLeftWidth | number | | | | borderRadius | number | | | | borderRightColor |
ColorPropType
| | | | borderRightWidth | number | | | | borderStyle | oneOf
solid
,
dotted
,
dashed
| | | | borderTopColor |
ColorPropType
| | | | borderTopEndRadius | number | | | | borderTopStartRadius | number | | | | borderTopLeftRadius | number | | | | borderTopRightRadius | number | | | | borderTopWidth | number | | | | borderWidth | number | | | | opacity | number | | | | overflow | oneOf
visible
,
hidden
| | | | elevation | 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. |

Appendix

Types

number

ReactPropTypes.number

string

ReactPropTypes.string

bool

ReactPropTypes.bool

oneOf

ReactPropTypes.oneOf([values])

arrayOf

ReactPropTypes.arrayOf(value)

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.