{"id":3833,"url":"https://github.com/vhpoet/react-native-styling-cheat-sheet","last_synced_at":"2025-10-24T16:31:30.917Z","repository":{"id":41374482,"uuid":"65492963","full_name":"vhpoet/react-native-styling-cheat-sheet","owner":"vhpoet","description":"Most of the React Native styling material in one page","archived":false,"fork":false,"pushed_at":"2022-12-12T17:19:33.000Z","size":45,"stargazers_count":4918,"open_issues_count":1,"forks_count":617,"subscribers_count":135,"default_branch":"master","last_synced_at":"2025-01-29T15:52:07.905Z","etag":null,"topics":["cheatsheet","flexbox","react-native"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/vhpoet.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-08-11T18:37:53.000Z","updated_at":"2025-01-27T21:19:56.000Z","dependencies_parsed_at":"2023-01-27T22:45:47.635Z","dependency_job_id":null,"html_url":"https://github.com/vhpoet/react-native-styling-cheat-sheet","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vhpoet%2Freact-native-styling-cheat-sheet","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vhpoet%2Freact-native-styling-cheat-sheet/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vhpoet%2Freact-native-styling-cheat-sheet/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vhpoet%2Freact-native-styling-cheat-sheet/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vhpoet","download_url":"https://codeload.github.com/vhpoet/react-native-styling-cheat-sheet/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":237999753,"owners_count":19399937,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cheatsheet","flexbox","react-native"],"created_at":"2024-01-05T20:16:52.855Z","updated_at":"2025-10-24T16:31:25.607Z","avatar_url":"https://github.com/vhpoet.png","language":null,"funding_links":[],"categories":["Articles","Front-End Development","Index","Others","Stale","Cheatsheet"],"sub_categories":["Reference","Cheat Sheets","React Native \u0026 Expo","React Components"],"readme":"# React Native Styling Cheat Sheet\n\nMost of the React Native styling material in one page. Imported from the [official docs](http://facebook.github.io/react-native/docs/getting-started.html).\n\n![YAP](https://media.giphy.com/media/B5a9bkLouElOM/giphy.gif)\n\n## Contents\n\n### General\n- [Flexbox](#flexbox)\n- [ShadowPropTypesIOS](#shadow-prop-types-ios)\n- [Transforms](#transforms)\n\n### Components\n- [Image](#image)\n- [ScrollView](#scrollview)\n- [Text](#text)\n- [TextInput](#textinput)\n- [View](#view)\n\n## Flexbox\n| Name | Type | Default | Description |\n|------|------|---------|-------------|\n| alignContent | [oneOf](#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. |\n| alignItems | [oneOf](#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. |\n| alignSelf | [oneOf](#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. |\n| aspectRatio | [number](#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. |\n| borderBottomWidth | [number](#number) | 0 | `borderBottomWidth` works like `border-bottom-width` in CSS. See http://www.w3schools.com/cssref/pr_border-bottom_width.asp for more details. |\n| borderLeftWidth | [number](#number) | 0 | `borderLeftWidth` works like `border-left-width` in CSS. See http://www.w3schools.com/cssref/pr_border-bottom_width.asp for more details. |\n| borderRightWidth | [number](#number) | 0 | `borderRightWidth` works like `border-right-width` in CSS. See http://www.w3schools.com/cssref/pr_border-right_width.asp for more details. |\n| borderTopWidth | [number](#number) | 0 | `borderTopWidth` works like `border-top-width` in CSS. See http://www.w3schools.com/cssref/pr_border-top_width.asp for more details. |\n| borderEndWidth | [number](#number) | 0 | When direction is ltr, `borderEndWidth` is equivalent to `borderRightWidth`. When direction is rtl, `borderEndWidth` is equivalent to `borderLeftWidth`. |\n| borderStartWidth | [number](#number) | 0 | When direction is ltr, `borderStartWidth` is equivalent to `borderLeftWidth`. When direction is rtl, `borderStartWidth` is equivalent to `borderRightWidth`. |\n| borderWidth | [number](#number) | 0 | `borderWidth` works like `border-width` in CSS. See http://www.w3schools.com/cssref/pr_border-width.asp for more details. |\n| bottom | [number](#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. |\n| direction | [oneOf](#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. |\n| display | [oneOf](#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'. |\n| end | [number](#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. |\n| start | [number](#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. |\n| flex | [number](#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. |\n| flexDirection | [oneOf](#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. |\n| flexBasis | [number](#number) | 0 | |\n| flexGrow | [number](#number) | 0 | |\n| flexShrink | [number](#number) | 0 | |\n| flexWrap | [oneOf](#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. |\n| height | [number](#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. |\n| justifyContent | [oneOf](#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. |\n| left | [number](#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. |\n| margin | [number](#number) | 0 | Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. |\n| marginBottom | [number](#number) | 0 | `marginBottom` works like `margin-bottom` in CSS. See http://www.w3schools.com/cssref/pr_margin-bottom.asp for more details. |\n| marginHorizontal | [number](#number) | 0 | Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`. |\n| marginLeft | [number](#number) | 0 | `marginLeft` works like `margin-left` in CSS. See http://www.w3schools.com/cssref/pr_margin-left.asp for more details. |\n| marginRight | [number](#number) | 0 | `marginRight` works like `margin-right` in CSS. See http://www.w3schools.com/cssref/pr_margin-right.asp for more details. |\n| marginTop | [number](#number) | 0 | `marginTop` works like `margin-top` in CSS. See http://www.w3schools.com/cssref/pr_margin-top.asp for more details. |\n| marginVertical | [number](#number) | 0 | Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`. |\n| marginEnd | [number](#number) | 0 | When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.|\n| marginStart | [number](#number) | 0 | When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`. |\n| maxHeight | [number](#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. |\n| maxWidth | [number](#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. |\n| minHeight | [number](#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. |\n| minWidth | [number](#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. |\n| padding | [number](#number), [string](#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. |\n| paddingBottom | [number](#number), [string](#string) | 0 | `paddingBottom` works like `padding-bottom` in CSS. See http://www.w3schools.com/cssref/pr_padding-bottom.asp for more details. |\n| paddingHorizontal | [number](#number), [string](#string) | 0 | Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`. |\n| paddingLeft | [number](#number), [string](#string) | 0 | `paddingLeft` works like `padding-left` in CSS. See http://www.w3schools.com/cssref/pr_padding-left.asp for more details. |\n| paddingRight | [number](#number), [string](#string) | 0 | `paddingRight` works like `padding-right` in CSS. See http://www.w3schools.com/cssref/pr_padding-right.asp for more details. |\n| paddingTop | [number](#number), [string](#string) | 0 | `paddingTop` works like `padding-top` in CSS. See http://www.w3schools.com/cssref/pr_padding-top.asp for more details. |\n| paddingVertical | [number](#number), [string](#string) | 0 | Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`. |\n| paddingEnd | [number](#number), [string](#string) | 0 | When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`. |\n| paddingStart | [number](#number), [string](#string) | 0 | When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`. |\n| position | [oneOf](#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. |\n| right | [number](#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. |\n| top | [number](#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. |\n| width | [number](#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. |\n| zIndex | [number](#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. |\n\n* properties with default value `auto` marked with asterisk 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\n\n## Shadow Prop Types IOS\n| Name | Type | Description |\n| ---- | ---- | ----------- |\n| shadowColor | `customColorPropType` | Sets the drop shadow color |\n| shadowOffset | `customReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} )` | Sets the drop shadow offset |\n| shadowOpacity | [number](#number) | Sets the drop shadow opacity (multiplied by the color's alpha component) |\n| shadowRadius | [number](#number) | Sets the drop shadow blur radius |\n\n## Transforms\n| Name | Type |\n| ---- | ---- |\n| decomposedMatrix | `customDecomposedMatrixPropType` |\n| 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}) ]) )` |\n| transformMatrix | `customTransformMatrixPropType` |\n\n## Image\n| Name | Type | Platforms | Description |\n| ---- | ---- | --------- | ----------- |\n| ...[Flexbox](#flexbox) |\n| ...[ShadowPropTypesIOS](#shadow-prop-types-ios) |\n| ...[Transforms](#transforms) |\n| backfaceVisibility | [oneOf](#oneof) `visible`, `hidden` | | |\n| backgroundColor | `ColorPropType` | | |\n| borderBottomLeftRadius | [number](#number) | | |\n| borderBottomRightRadius | [number](#typee-number) | | |\n| borderColor | `ColorPropType` | | |\n| borderRadius | [number](#number) | | |\n| borderTopLeftRadius | [number](#number) | | |\n| borderTopRightRadius | [number](#number) | | |\n| borderWidth | [number](#number) | | |\n| opacity | [number](#number) | | |\n| overflow | [oneOf](#oneof) `visible`, `hidden` | | |\n| resizeMode | [oneOf](#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](https://facebook.github.io/react-native/docs/image.html#resizemode) for a guide on each |\n| tintColor | `ColorPropType` | | Changes the color of all the non-transparent pixels to the tintColor. |\n| overlayColor | [string](#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 |\n\n## ScrollView\n| Name | Type | Platforms | Description |\n| ---- | ---- | --------- | ----------- |\n| ...[Flexbox](#flexbox) |\n| ...[ShadowPropTypesIOS](#shadow-prop-types-ios) |\n| ...[Transforms](#transforms) |\n| backfaceVisibility | [oneOf](#oneof) `visible`, `hidden` | | |\n| backgroundColor | `ColorPropType` | | |\n| borderBottomColor | `ColorPropType` | | |\n| borderBottomLeftRadius | [number](#number) | | |\n| borderBottomRightRadius | [number](#number) | | |\n| borderBottomWidth | [number](#number) | | |\n| borderColor | `ColorPropType` | | |\n| borderLeftColor | `ColorPropType` | | |\n| borderLeftWidth | [number](#number) | | |\n| borderRadius | [number](#number) | | |\n| borderRightColor | `ColorPropType` | | |\n| borderRightWidth | [number](#number) | | |\n| borderStyle | [oneOf](#oneof) `solid`, `dotted`, `dashed` | | |\n| borderTopColor | `ColorPropType` | | |\n| borderTopLeftRadius | [number](#number) | | |\n| borderTopRightRadius | [number](#number) | | |\n| borderTopWidth | [number](#number) | | |\n| borderWidth | [number](#number) | | |\n| opacity | [number](#number) | | |\n| overflow | [oneOf](#oneof) `visible`, `hidden` | | |\n| elevation | [number](#number) | android | (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). 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. |\n\n## Text\n| Name | Type | Platforms | Description |\n| ---- | ---- | --------- | ----------- |\n| ...[View](#view) |\n| color | `ColorPropType` | | |\n| fontFamily | [string](#string) | | |\n| fontSize | [number](#number) | | |\n| fontStyle | [oneOf](#oneof) `normal`, `italic` | | |\n| fontVariant | [arrayOf](#arrayof)([oneOf](#oneof)`small-caps`, `oldstyle-nums`, `lining-nums`, `tabular-nums`, `proportional-nums`) | ios | |\n| textTransform | [oneOf](#oneof) `none`, `uppercase`, `lowercase`, `capitalize` | | |\n| fontWeight | [oneOf](#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. |\n| includeFontPadding | [bool](#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.|\n| lineHeight | [number](#number) | | |\n| textAlign | [oneOf](#oneof) `auto`, `left`, `right`, `center`, `justify` | | Specifies text alignment. The value 'justify' is only supported on iOS and fallbacks to `left` on Android. |\n| textDecorationLine | [oneOf](#oneof) `none`, `underline`, `line-through` | | |\n| textShadowColor | `ColorPropType` | | |\n| textShadowOffset | `ReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} )` | | |\n| textShadowRadius | [number](#number) | | |\n| textAlignVertical | [oneOf](#oneof) `auto`, `top`, `bottom`, `center` | android | |\n| letterSpacing | [number](#number) | ios | |\n| textDecorationColor | `ColorPropType` | ios | |\n| textDecorationStyle | [oneOf](#oneof) `solid`, `double`, `dotted`, `dashed` | ios | |\n| writingDirection | [oneOf](#oneof) `auto`, `ltr`, `rtl` | ios | |\n\n## TextInput\n| Name | Type | Platforms | Description |\n| ---- | ---- | --------- | ----------- |\n| autoFocus | [bool](#bool) | | If true, focuses the input on componentDidMount. The default value is false. |\n| keyboardType | [oneOf](#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 |\n| maxLength | [number](#number) | | Limits the maximum number of characters that can be entered |\n| 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. |\n\n## View\n| Name | Type | Platforms | Description |\n| ---- | ---- | --------- | ----------- |\n| ...[Flexbox](#flexbox) |\n| ...[ShadowPropTypesIOS](#shadow-prop-types-ios) |\n| ...[Transforms](#transforms) |\n| backfaceVisibility | [oneOf](#oneof) `visible`, `hidden` | | |\n| backgroundColor | `ColorPropType` | | |\n| borderBottomColor | `ColorPropType` | | |\n| borderBottomEndRadius | [number](#number) | | |\n| borderBottomStartRadius | [number](#number) | | |\n| borderBottomLeftRadius | [number](#number) | | |\n| borderBottomRightRadius | [number](#number) | | |\n| borderBottomWidth | [number](#number) | | |\n| borderColor | `ColorPropType` | | |\n| borderEndColor | `ColorPropType` | | |\n| borderStartColor | `ColorPropType` | | |\n| borderLeftColor | `ColorPropType` | | |\n| borderLeftWidth | [number](#number) | | |\n| borderRadius | [number](#number) | | |\n| borderRightColor | `ColorPropType` | | |\n| borderRightWidth | [number](#number) | | |\n| borderStyle | [oneOf](#oneof) `solid`, `dotted`, `dashed` | | |\n| borderTopColor | `ColorPropType` | | |\n| borderTopEndRadius | [number](#number) | | |\n| borderTopStartRadius | [number](#number) | | |\n| borderTopLeftRadius | [number](#number) | | |\n| borderTopRightRadius | [number](#number) | | |\n| borderTopWidth | [number](#number) | | |\n| borderWidth | [number](#number) | | |\n| opacity | [number](#number) | | |\n| overflow | [oneOf](#oneof) `visible`, `hidden` | | |\n| elevation | [number](#number) | android | (Android-only) Sets the elevation of a view, using Android's underlying [elevation API](https://developer.android.com/training/material/shadows-clipping.html#Elevation). 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. |\n\n## Appendix\n### Types\n#### [number](#number)\nReactPropTypes.number\n\n#### [string](#string)\nReactPropTypes.string\n\n#### [bool](#bool)\nReactPropTypes.bool\n\n#### [oneOf](#oneof)\nReactPropTypes.oneOf([values])\n\n#### [arrayOf](#arrayof)\nReactPropTypes.arrayOf(value)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvhpoet%2Freact-native-styling-cheat-sheet","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvhpoet%2Freact-native-styling-cheat-sheet","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvhpoet%2Freact-native-styling-cheat-sheet/lists"}