GITHUB SNAPSHOT
vhpoet/react-native-styling-cheat-sheet
V
Stars
★ 5.0k
Forks
⑂ 595
Language
—
Topic
Mobile
License
—
Updated
3.7y ago
Contributors
—
Homepage
—
QUICK VERDICT
TopGit tracks vhpoet/react-native-styling-cheat-sheet on GitHub as part of the Mobile family. The project has 5.0k stars. Most of the React Native styling material in one page
Snapshot summary built from the project's own GitHub metadata — there's no written TopGit review yet. The page will update automatically when a full review is published.
WHY NO REVIEW YET
TopGit writes full reviews for the most-starred, most-requested repositories. This page is a snapshot until then — see the READ ME tab for the original README in full.
Snapshot
Stars★ 5.0k
Forks⑂ 595
Language—
TopicMobile
License—
Homepage—
Top contributors
Show top contributors
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
- TextInput
- 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 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_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, 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/pr_padding-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/pr_padding-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/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
automarked with asterisk do not actually haveautoas their default value, they just behave like if they would in css if they hadautoas their value.autois 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(oneOfsmall-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)
Related repositories
justjavac/free-programming-books-zh_CN
Free Programming Books (Chinese) is justjavac's GitHub index of free programming books, translated manuals, and course notes in Chinese, organized under headings like AI, Go, C/C++, and version control. It's a link list, not a curriculum - entries range from full book translations to single blog posts, some flagged `:worried:` for dead links, and contribution happens only through pull requests.
★ 118.4k
laurent22/joplin
Joplin is an open-source, privacy-focused note-taking application built with TypeScript that prioritizes offline access and user data ownership. It stores notes in Markdown format and supports end-to-end encrypted synchronization with Nextcloud, Dropbox, OneDrive, or Joplin Cloud, meaning your data stays under your control without vendor lock-in. The application handles large note collections organized into notebooks with full-text search across all platforms (Windows, macOS, Linux, Android, iOS), and includes a Web Clipper for Firefox and Chrome to capture web content directly. What sets Joplin apart is its extensibility through plugins and themes, plus the ability to import directly from Evernote including formatted content and metadata — a genuine migration path for users leaving proprietary ecosystems. The offline-first architecture ensures notes remain accessible without internet connectivity, which matters for users in regions with unreliable connections or those who simply prefer not to depend on cloud availability.
★ 56.0k
dkhamsing/open-source-ios-apps
A collaborative GitHub list linking to open-source apps across iOS, iPadOS, watchOS, tvOS, and visionOS, grouped into categories like Browser, Communication, and Clone, with each entry tagged by year and language.
★ 51.8k
expo/expo
Expo is a monorepo containing the SDK, Modules API, Expo Go app, CLI, Router, and docs for building universal native apps with React across Android, iOS, and the web. It pairs with EAS, a separate hosted platform, for building and shipping finished apps. The project is MIT-licensed and written primarily in TypeScript.
★ 51.7k
FREQUENTLY ASKED
Quick answers
Does vhpoet/react-native-styling-cheat-sheet have a project website?
No homepage URL was recorded for vhpoet/react-native-styling-cheat-sheet in TopGit's last sync. The README tab above frequently contains screenshots and demo links, or check the repository description on GitHub.
How active is development on vhpoet/react-native-styling-cheat-sheet?
The most recent commit recorded on vhpoet/react-native-styling-cheat-sheet was 3.7 years ago, based on the GitHub push timestamp. The repository has 595 forks — one of the better signals of community interest.
How many stars does vhpoet/react-native-styling-cheat-sheet have?
vhpoet/react-native-styling-cheat-sheet has 5.0k GitHub stars — refresh the page for the live number, or check github.com/vhpoet/react-native-styling-cheat-sheet. TopGit mirrors GitHub's count but does not claim minute-by-minute accuracy.
Is vhpoet/react-native-styling-cheat-sheet open source?
TopGit's metadata for vhpoet/react-native-styling-cheat-sheet does not record a license. Most public repositories on GitHub ARE open source, but the exact terms vary — verify by opening the LICENSE file directly.
What else is in the Mobile space?
vhpoet/react-native-styling-cheat-sheet is tracked by TopGit under the Mobile category, alongside 3 GitHub-tagged topics. Trending and Topics pages list peer repositories of comparable stars and language.
What topics is vhpoet/react-native-styling-cheat-sheet associated with?
GitHub's repository topics for vhpoet/react-native-styling-cheat-sheet: "cheatsheet", "flexbox", "react-native". TopGit's editorial category is Mobile.
Where do I read more about vhpoet/react-native-styling-cheat-sheet?
This TopGit page is a snapshot — the READ ME tab shows the project's own README content (links stripped, images preserved). The GitHub repository at github.com/vhpoet/react-native-styling-cheat-sheet is the definitive source.
Read full README in the tab above.
Is react-native-styling-cheat-sheet worth your time?
ChatGPT, Claude and Perplexity can all read this page. Ask one of them what it makes of react-native-styling-cheat-sheet.