Skip to content

Instantly share code, notes, and snippets.

@hoshi-takanori
Created May 24, 2017 00:13
Show Gist options
  • Save hoshi-takanori/4c405955a14cc89f8e396e8f69e8c49e to your computer and use it in GitHub Desktop.
Save hoshi-takanori/4c405955a14cc89f8e396e8f69e8c49e to your computer and use it in GitHub Desktop.
Layout Props
https://facebook.github.io/react-native/docs/layout-props.html#props
left?: number, string
right?: number, string
top?: number, string
bottom?: number, string
width?: number, string
maxWidth?: number, string
minWidth?: number, string
height?: number, string
maxHeight?: number, string
minHeight?: number, string
justifyContent?: enum('flex-start', 'flex-end', 'center', 'space-between', 'space-around')
alignContent?: enum('flex-start', 'flex-end', 'center', 'stretch', 'space-between', 'space-around')
alignItems?: enum('flex-start', 'flex-end', 'center', 'stretch', 'baseline')
alignSelf?: enum('auto', 'flex-start', 'flex-end', 'center', 'stretch', 'baseline')
aspectRatio?: number
borderWidth?: number
borderBottomWidth?: number
borderLeftWidth?: number
borderRightWidth?: number
borderTopWidth?: number
flex?: number
flexBasis?: number, string
flexDirection?: enum('row', 'row-reverse', 'column', 'column-reverse')
flexGrow?: number
flexShrink?: number
flexWrap?: enum('wrap', 'nowrap')
margin?: number, string
marginBottom?: number, string
marginHorizontal?: number, string
marginLeft?: number, string
marginRight?: number, string
marginTop?: number, string
marginVertical?: number, string
overflow?: enum('visible', 'hidden', 'scroll')
padding?: number, string
paddingBottom?: number, string
paddingHorizontal?: number, string
paddingLeft?: number, string
paddingRight?: number, string
paddingTop?: number, string
paddingVertical?: number, string
position?: enum('absolute', 'relative')
zIndex?: number
(ios) direction?: enum('inherit', 'ltr', 'rtl')
Shadow Props
https://facebook.github.io/react-native/docs/shadow-props.html#props
(ios) shadowColor?: color
(ios) shadowOffset?: {width: number, height: number}
(ios) shadowOpacity?: number
(ios) shadowRadius?: number #
Transforms
https://facebook.github.io/react-native/docs/transforms.html#props
decomposedMatrix?: DecomposedMatrixPropType
transform?: [{perspective: number}, {rotate: string}, {rotateX: string}, {rotateY: string}, {rotateZ: string}, {scale: number}, {scaleX: number}, {scaleY: number}, {translateX: number}, {translateY: number}, {skewX: string}, {skewY: string}]
transformMatrix?: TransformMatrixPropType
View
https://facebook.github.io/react-native/releases/0.43/docs/view.html#style
Layout Props...
Shadow Props...
Transforms...
backfaceVisibility enum(visible, hidden)
backgroundColor [object Object]
opacity number
borderStyle enum(solid, dotted, dashed)
borderColor [object Object]
borderLeftColor [object Object]
borderRightColor [object Object]
borderTopColor [object Object]
borderBottomColor [object Object]
borderWidth number
borderLeftWidth number
borderRightWidth number
borderTopWidth number
borderBottomWidth number
borderRadius number
borderTopLeftRadius number
borderTopRightRadius number
borderBottomLeftRadius number
borderBottomRightRadius number
(android) elevation number
Text
https://facebook.github.io/react-native/docs/text.html#style
View#style...
color color
fontFamily string
fontSize number
fontStyle enum('normal', 'italic')
fontWeight enum('normal', 'bold', '100', '200', '300', '400', '500', '600', '700', '800', '900')
lineHeight number
textAlign enum('auto', 'left', 'right', 'center', 'justify')
textDecorationLine enum('none', 'underline', 'line-through', 'underline line-through')
textShadowColor color
textShadowOffset {width: number, height: number}
textShadowRadius number
(android) includeFontPadding bool
(android) textAlignVertical enum('auto', 'top', 'bottom', 'center')
(ios) fontVariant [enum('small-caps', 'oldstyle-nums', 'lining-nums', 'tabular-nums', 'proportional-nums')]
(ios) letterSpacing number
(ios) textDecorationColor color
(ios) textDecorationStyle enum('solid', 'double', 'dotted', 'dashed')
(ios) writingDirection enum('auto', 'ltr', 'rtl')
Image
https://facebook.github.io/react-native/docs/image.html#style
Layout Props...
Shadow Props...
Transforms...
backfaceVisibility enum('visible', 'hidden')
backgroundColor color
opacity number
borderColor color
borderWidth number
borderRadius number
borderTopLeftRadius number
borderTopRightRadius number
borderBottomLeftRadius number
borderBottomRightRadius number
overflow enum('visible', 'hidden')
resizeMode Object.keys(ImageResizeMode)
tintColor color
(android) overlayColor string
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment