Merge fd7dfa3743 into 88e5be6e4b

Merge pull request #391 from Philip-Walsh/master
fix spelling and whitespace in cheatsheets
2026-01-27 13:48:01 -08:00 · 2024-08-26 09:36:52 +03:30 · 2024-08-24 23:07:02 +02:00 · 2024-08-22 12:02:10 +01:00 · 2021-10-18 17:26:43 +03:30
10 changed files with 323 additions and 98 deletions
--- a/README.md
+++ b/README.md
@@ -74,6 +74,7 @@ Feel free to take a look. You might learn new things. They have been designed to
 #### Frameworks

 - [React.js](frontend/react.js)
+- [React-native-styling](frontend/react-native-styling.md)
 - [Vue.js](frontend/vue.js)
 - [Tailwind.css](frontend/tailwind.css)
 - [Ember.js](frontend/ember.js)
--- a/frontend/react-native-styling.md
+++ b/frontend/react-native-styling.md
@@ -0,0 +1,224 @@
+# React Native Styling Cheat Sheet
+
+Most of the React Native styling material in one page. Imported from the [official docs](http://facebook.github.io/react-native/docs/getting-started.html).
+
+![YAP](https://media.giphy.com/media/B5a9bkLouElOM/giphy.gif)
+
+## Contents
+
+### General
+- [Flexbox](#flexbox)
+- [ShadowPropTypesIOS](#shadow-prop-types-ios)
+- [Transforms](#transforms)
+
+### Components
+- [Image](#image)
+- [ScrollView](#scrollview)
+- [Text](#text)
+- [TextInput](#textinput)
+- [View](#view)
+
+## Flexbox
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| 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. |
+| 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. |
+| 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. |
+| 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. |
+| 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. |
+| 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. |
+| 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. |
+| 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. |
+| borderEndWidth | [number](#number) | 0 | When direction is ltr, `borderEndWidth` is equivalent to `borderRightWidth`. When direction is rtl, `borderEndWidth` is equivalent to `borderLeftWidth`. |
+| borderStartWidth | [number](#number) | 0 | When direction is ltr, `borderStartWidth` is equivalent to `borderLeftWidth`. When direction is rtl, `borderStartWidth` is equivalent to `borderRightWidth`. |
+| borderWidth | [number](#number) | 0 | `borderWidth` works like `border-width` in CSS. See http://www.w3schools.com/cssref/pr_border-width.asp for more details. |
+| 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. |
+| 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. |
+| 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'. |
+| 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. |
+| 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. |
+| 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. |
+| 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. |
+| flexBasis | [number](#number) | 0 | |
+| flexGrow | [number](#number) | 0 | |
+| flexShrink | [number](#number) | 0 | |
+| 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. |
+| 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. |
+| 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. |
+| 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. |
+| margin | [number](#number) | 0 | Setting `margin` has the same effect as setting each of `marginTop`, `marginLeft`, `marginBottom`, and `marginRight`. |
+| marginBottom | [number](#number) | 0 | `marginBottom` works like `margin-bottom` in CSS. See http://www.w3schools.com/cssref/pr_margin-bottom.asp for more details. |
+| marginHorizontal | [number](#number) | 0 | Setting `marginHorizontal` has the same effect as setting both `marginLeft` and `marginRight`. |
+| marginLeft | [number](#number) | 0 | `marginLeft` works like `margin-left` in CSS. See http://www.w3schools.com/cssref/pr_margin-left.asp for more details. |
+| marginRight | [number](#number) | 0 | `marginRight` works like `margin-right` in CSS. See http://www.w3schools.com/cssref/pr_margin-right.asp for more details. |
+| marginTop | [number](#number) | 0 | `marginTop` works like `margin-top` in CSS. See http://www.w3schools.com/cssref/pr_margin-top.asp for more details. |
+| marginVertical | [number](#number) | 0 | Setting `marginVertical` has the same effect as setting both `marginTop` and `marginBottom`. |
+| marginEnd | [number](#number) | 0 | When direction is `ltr`, `marginEnd` is equivalent to `marginRight`. When direction is `rtl`, `marginEnd` is equivalent to `marginLeft`.|
+| marginStart | [number](#number) | 0 | When direction is `ltr`, `marginStart` is equivalent to `marginLeft`. When direction is `rtl`, `marginStart` is equivalent to `marginRight`. |
+| 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. |
+| 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. |
+| 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. |
+| 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. |
+| 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. |
+| 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. |
+| paddingHorizontal | [number](#number), [string](#string) | 0 | Setting `paddingHorizontal` is like setting both of `paddingLeft` and `paddingRight`. |
+| 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. |
+| 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. |
+| 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. |
+| paddingVertical | [number](#number), [string](#string) | 0 | Setting `paddingVertical` is like setting both of `paddingTop` and `paddingBottom`. |
+| paddingEnd | [number](#number), [string](#string) | 0 | When direction is `ltr`, `paddingEnd` is equivalent to `paddingRight`. When direction is `rtl`, `paddingEnd` is equivalent to `paddingLeft`. |
+| paddingStart | [number](#number), [string](#string) | 0 | When direction is `ltr`, `paddingStart` is equivalent to `paddingLeft`. When direction is `rtl`, `paddingStart` is equivalent to `paddingRight`. |
+| 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. |
+| 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. |
+| 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. |
+| 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. |
+| 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. |
+
+* 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](#number) | Sets the drop shadow opacity (multiplied by the color's alpha component) |
+| shadowRadius | [number](#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](#flexbox) |
+| ...[ShadowPropTypesIOS](#shadow-prop-types-ios) |
+| ...[Transforms](#transforms) |
+| backfaceVisibility | [oneOf](#oneof) `visible`, `hidden` | | |
+| backgroundColor | `ColorPropType` | | |
+| borderBottomLeftRadius | [number](#number) | | |
+| borderBottomRightRadius | [number](#typee-number) | | |
+| borderColor | `ColorPropType` | | |
+| borderRadius | [number](#number) | | |
+| borderTopLeftRadius | [number](#number) | | |
+| borderTopRightRadius | [number](#number) | | |
+| borderWidth | [number](#number) | | |
+| opacity | [number](#number) | | |
+| overflow | [oneOf](#oneof) `visible`, `hidden` | | |
+| 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 |
+| tintColor | `ColorPropType` | | Changes the color of all the non-transparent pixels to the tintColor. |
+| 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 |
+
+## ScrollView
+| Name | Type | Platforms | Description |
+| ---- | ---- | --------- | ----------- |
+| ...[Flexbox](#flexbox) |
+| ...[ShadowPropTypesIOS](#shadow-prop-types-ios) |
+| ...[Transforms](#transforms) |
+| backfaceVisibility | [oneOf](#oneof) `visible`, `hidden` | | |
+| backgroundColor | `ColorPropType` | | |
+| borderBottomColor | `ColorPropType` | | |
+| borderBottomLeftRadius | [number](#number) | | |
+| borderBottomRightRadius | [number](#number) | | |
+| borderBottomWidth | [number](#number) | | |
+| borderColor | `ColorPropType` | | |
+| borderLeftColor | `ColorPropType` | | |
+| borderLeftWidth | [number](#number) | | |
+| borderRadius | [number](#number) | | |
+| borderRightColor | `ColorPropType` | | |
+| borderRightWidth | [number](#number) | | |
+| borderStyle | [oneOf](#oneof) `solid`, `dotted`, `dashed` | | |
+| borderTopColor | `ColorPropType` | | |
+| borderTopLeftRadius | [number](#number) | | |
+| borderTopRightRadius | [number](#number) | | |
+| borderTopWidth | [number](#number) | | |
+| borderWidth | [number](#number) | | |
+| opacity | [number](#number) | | |
+| overflow | [oneOf](#oneof) `visible`, `hidden` | | |
+| 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. |
+
+## Text
+| Name | Type | Platforms | Description |
+| ---- | ---- | --------- | ----------- |
+| ...[View](#view) |
+| color | `ColorPropType` | | |
+| fontFamily | [string](#string) | | |
+| fontSize | [number](#number) | | |
+| fontStyle | [oneOf](#oneof) `normal`, `italic` | | |
+| fontVariant | [arrayOf](#arrayof)([oneOf](#oneof)`small-caps`, `oldstyle-nums`, `lining-nums`, `tabular-nums`, `proportional-nums`) | ios | |
+| textTransform | [oneOf](#oneof) `none`, `uppercase`, `lowercase`, `capitalize` | | |
+| 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. |
+| 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.|
+| lineHeight | [number](#number) | | |
+| 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. |
+| textDecorationLine | [oneOf](#oneof) `none`, `underline`, `line-through` | | |
+| textShadowColor | `ColorPropType` | | |
+| textShadowOffset | `ReactPropTypes.shape( {width: ReactPropTypes.number, height: ReactPropTypes.number} )` | | |
+| textShadowRadius | [number](#number) | | |
+| textAlignVertical | [oneOf](#oneof) `auto`, `top`, `bottom`, `center` | android | |
+| letterSpacing | [number](#number) | ios | |
+| textDecorationColor | `ColorPropType` | ios | |
+| textDecorationStyle | [oneOf](#oneof) `solid`, `double`, `dotted`, `dashed` | ios | |
+| writingDirection | [oneOf](#oneof) `auto`, `ltr`, `rtl` | ios | |
+
+## TextInput
+| Name | Type | Platforms | Description |
+| ---- | ---- | --------- | ----------- |
+| autoFocus | [bool](#bool) | | If true, focuses the input on componentDidMount. The default value is false. |
+| 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 |
+| maxLength | [number](#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](#flexbox) |
+| ...[ShadowPropTypesIOS](#shadow-prop-types-ios) |
+| ...[Transforms](#transforms) |
+| backfaceVisibility | [oneOf](#oneof) `visible`, `hidden` | | |
+| backgroundColor | `ColorPropType` | | |
+| borderBottomColor | `ColorPropType` | | |
+| borderBottomEndRadius | [number](#number) | | |
+| borderBottomStartRadius | [number](#number) | | |
+| borderBottomLeftRadius | [number](#number) | | |
+| borderBottomRightRadius | [number](#number) | | |
+| borderBottomWidth | [number](#number) | | |
+| borderColor | `ColorPropType` | | |
+| borderEndColor | `ColorPropType` | | |
+| borderStartColor | `ColorPropType` | | |
+| borderLeftColor | `ColorPropType` | | |
+| borderLeftWidth | [number](#number) | | |
+| borderRadius | [number](#number) | | |
+| borderRightColor | `ColorPropType` | | |
+| borderRightWidth | [number](#number) | | |
+| borderStyle | [oneOf](#oneof) `solid`, `dotted`, `dashed` | | |
+| borderTopColor | `ColorPropType` | | |
+| borderTopEndRadius | [number](#number) | | |
+| borderTopStartRadius | [number](#number) | | |
+| borderTopLeftRadius | [number](#number) | | |
+| borderTopRightRadius | [number](#number) | | |
+| borderTopWidth | [number](#number) | | |
+| borderWidth | [number](#number) | | |
+| opacity | [number](#number) | | |
+| overflow | [oneOf](#oneof) `visible`, `hidden` | | |
+| 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. |
+
+## Appendix
+### Types
+#### [number](#number)
+ReactPropTypes.number
+
+#### [string](#string)
+ReactPropTypes.string
+
+#### [bool](#bool)
+ReactPropTypes.bool
+
+#### [oneOf](#oneof)
+ReactPropTypes.oneOf([values])
+
+#### [arrayOf](#arrayof)
+ReactPropTypes.arrayOf(value)
--- a/languages/C#.txt
+++ b/languages/C#.txt
@@ -3,7 +3,7 @@ CHEATSHEET C#
 1. Data Types

    Primitive   Size            Example
-    
+
    String      2 bytes/char    s = "reference";
    bool                        b = true;
    char        2 bytes         ch = 'a';
@@ -16,20 +16,20 @@ CHEATSHEET C#
    decimal     16 bytes        val = 70.0M;

 2. Arrays
-    
+
    2.1 Declaration

    //Initiliazed using a list defined with curly braces
    int[] nameArray = {100, 101, 102};
-    
+
    //Define an empty array
    int[] nameArray = new int[3]; // 3 rows and 2 columns
-    
+
    //To access a specific item in the array
    int[] nameArray = new int[10];
    int firstNumber = nameArray[0];
    nameArray[1] = 20;
-    
+
    //Multidimensional arrays
    int [,] matrix = new int [2,2]
    matrix[0,0] = 1;
@@ -40,26 +40,26 @@ CHEATSHEET C#
    int[,] predefinedMatrix = new int[2,2] { { 1, 2 }, { 3, 4 } };

    2.2 Array Operations
-    
+
    //Sort ascending
    Array.Sort(nameArray);
-    
+
    //Sort begins at element 6 and sorts 20 elements
    Array.Sort(nameArray,6,20);
-    
+
    //Use 1 array as a key & sort 2 arrays
    string[] values = {"Juan", "Victor", "Elena"};
    string[] keys = {"Jimenez", "Martin", "Ortiz"};
    Array.Sort(keys, values);
-    
+
    //Clear elements in array (array, first element, # elements)
    Array.Clear(nameArray, 0, nameArray.Length);
-    
+
    //Copy elements from one array to another
    Array.Copy(scr, target, numOfElements);

 3. String Operations
-    
+
    //To concatenate between strings, use the plus operator:
    string firstName = "Erin";
    string lastName = "Roger";
@@ -68,27 +68,27 @@ CHEATSHEET C#
    //To add one string to another, use the += operator:
    string secondLastName = "Green";
    string fullName += secondLastName;
-    
+
    //ToString function
    //It converts an object to its string representation so that it is suitable for display
    Object.ToString();
-    
+
    //String formatting
    //Each additional argument to the function can be referred to in the string using the brackets operator with the index number.
    String.Format(String format, Object arg0);
-     format - A composite format string that includes one or more format items 
+     format - A composite format string that includes one or more format items
     arg0 - The first or only object to format

    //Substring
    //Returns a part of the string, beginning from the index specified as the argument. Substring also accepts a maximum length for the substring
    String.Substring(beginAt);
    String.Substring(beginAt, maximum);
-    
+
    //Replace
    string newStr = oldStr.Replace("old","new");

    //IndexOf
-    //Finds the first ocurrence of a string in a larger string
+    //Finds the first occurrence of a string in a larger string
    //Returns -1 if the string is not found
    String.IndexOf(val, start, num)
    val - string to search for
@@ -102,7 +102,7 @@ CHEATSHEET C#
    String.Split(Char[]);

    //ToCharArray
-    //Places selected characteres in a string in a char array
+    //Places selected characters in a string in a char array
    String str = "AaBbCcDd";
    //create array of 8 vowels
    var chars = str.ToCharArray();
@@ -132,11 +132,11 @@ CHEATSHEET C#
    DateTime nextYear = DateTime.AddYears(1);

 6. TimeSpan
-    
+
    6.1 TimeSpan Constructor
-        
-    TimpeSpan(hour, minute, sec)
-    
+
+    TimeSpan(hour, minute, sec)
+
    TimeSpan timeS = new TimeSpan(10, 14, 50);
    TimeSpan timeS_Hours = TimeSpan.FromDays(3640);

@@ -144,8 +144,8 @@ CHEATSHEET C#

    Format item syntax: {index[,alignment][:format string]}
    index - Specifies element in list of values to which format is applied
-    aligment - Indicates minimun width (in characters) to display value
-    format string - Contains the code which specififes the format of the displayed value
+    alignment - Indicates minimum width (in characters) to display value
+    format string - Contains the code which specifies the format of the displayed value

    7.1 Numeric

@@ -168,7 +168,7 @@ CHEATSHEET C#
    csc -define:DEBUG -optimize -out:File2.exe *.cs -> Compiles all the C# files in the current directory with optimizations enabled and defines the DEBUG symbol. The output is File2.exe
    csc -target:library -out:File2.dll -warn:0 -nologo -debug *.cs -> Compiles all the C# files in the current directory producing a debug version of File2.dll. No logo and no warnings are displayed
    csc -target:library -out:Something.xyz *.cs -> Compiles all the C# files in the current directory to Something.xyz (a DLL)
-    
+
    8.1 Compiler Options Listed

    Option	                    Purpose
@@ -260,21 +260,21 @@ CHEATSHEET C#
 10. Loop

    10.1 While
-    
+
    while (condition) {body}
-    
+
    10.2 Do while

    do {body} while condition;
-    
+
    10.3 For

    for (initializer; termination condition; iteration;) {
            //statements
    }
-    
+
    10.4 For each
-    
+
    foreach (type identifier in collection)  {
        //statements
    }
@@ -293,7 +293,7 @@ CHEATSHEET C#
    [access modifier] className (parameters) [:initializer]

    initializer -base calls constructor in base class.
-                 this calls constuctor within class.
+                 this calls constructor within class.

    public class nameClass : Initializer {
        public className(dataType param1 , dataType param2, ...) : base(param1, param2)
@@ -313,8 +313,8 @@ CHEATSHEET C#
    abstract – must be implemented by subclass

    Passing parameters:
-        1. By default, parametres are passed by value
-        2. Passing by reference: ref, in and out modifers
+        1. By default, parameters are passed by value
+        2. Passing by reference: ref, in and out modifiers

    To pass a parameter by reference with the intent of changing the value, use the ref, or out keyword. To pass by reference with the intent of avoiding copying but not changing the value, use the in modifier

@@ -331,9 +331,9 @@ CHEATSHEET C#
 12. Struct

    12.1 Defining a structure
-    
+
    [attribute][modifier] struct name [:interfaces] { struct-body }
-    
+
    12.2 Class vs Structure

       -> Classes are reference types and structs are value types
@@ -378,7 +378,7 @@ CHEATSHEET C#
    //To declare an event inside a class, first a delegate type for the event must be declared.

    public delegate string MyDelegate(string str);
-    
+
    //The event itself is declared by using the event keyword

    event MyDelegate MyEvent;
--- a/languages/C.txt
+++ b/languages/C.txt
@@ -31,11 +31,11 @@ Preprocessor directives:

 Create and execute a program

-In Linux systems: 
+In Linux systems:
    1. Open up a terminal
    2. Create the program: nano nameProgram.c
    3. Write the program and save it
-    4. gcc -o nameExecutable nameProgram.c 
+    4. gcc -o nameExecutable nameProgram.c

 32 Reserved words

@@ -106,8 +106,8 @@ Operators

  ( )	  grouping parenthesis, function call
  [ ]	  array indexing, also  [ ][ ]  etc.
-  ->   	selector, structure pointer  
-  .	    select structure element     
+  ->   	selector, structure pointer
+  .	    select structure element
  !	    relational not, complement, ! a  yields true or false
  ~    	bitwise not, ones complement, ~ a
  ++  	increment, pre or post to a variable
@@ -153,7 +153,7 @@ Operators


 Operator precedence
-                
+
 More precedence

 LR	( ) [ ] -> . x++ x--
@@ -203,7 +203,7 @@ Function definition

 type function_name(int a, float b, const char * ch,...) { function_body }

-/* only parameters passed by address can are modified*/ 
+/* only parameters passed by address can are modified*/

 /* in the calling function, local copy can be modified*/

--- a/languages/XML.md
+++ b/languages/XML.md
@@ -11,7 +11,7 @@ XML uses a DTD to describe the data.
   So the XML is a **Complement** to HTML.
 * HTML: is used to format and display the same data.

-   
+
 XML does not carry any information about how to be displayed. The same XML data can be used in many different presentation scenarios.
 Because of this, with XML, there is a full separation between data and presentation.

--- a/languages/bash.sh
+++ b/languages/bash.sh
@@ -46,7 +46,7 @@ CTRL+X then (   # start recording a keyboard macro
 CTRL+X then )   # finish recording keyboard macro
 CTRL+X then E   # recall last recorded keyboard macro
 CTRL+X then CTRL+E   # invoke text editor (specified by $EDITOR) on current command line then execute resultes as shell commands
-CTRL+A then D  # logout from screen but don't kill it, if any command exist, it will continue 
+CTRL+A then D  # logout from screen but don't kill it, if any command exist, it will continue

 BACKSPACE  # deletes one character backward
 DELETE     # deletes one character under cursor
@@ -94,7 +94,7 @@ cat <filename>                # displays file raw content (will not be interpret
 cat -n <filename>             # shows number of lines
 nl <file.sh>                  # shows number of lines in file
 cat filename1 > filename2     # Copy filename1 to filename2
-cat filename1 >> filename2    # merge two files texts together 
+cat filename1 >> filename2    # merge two files texts together
 any_command > <filename>      # '>' is used to perform redirections, it will set any_command's stdout to file instead of "real stdout" (generally /dev/stdout)
 more <filename>               # shows the first part of a file (move with space and type q to quit)
 head <filename>               # outputs the first lines of file (default: 10 lines)
@@ -203,14 +203,14 @@ echo $$                      # prints process ID of the current shell
 echo $!                      # prints process ID of the most recently invoked background job
 echo $?                      # displays the exit status of the last command
 read <varname>               # reads a string from the input and assigns it to a variable
-read -p "prompt" <varname>   # same as above but outputs a prompt to ask user for value 
+read -p "prompt" <varname>   # same as above but outputs a prompt to ask user for value
 column -t <filename>         # display info in pretty columns (often used with pipe)
 let <varname> = <equation>   # performs mathematical calculation using operators like +, -, *, /, %
 export VARNAME=value         # defines an environment variable (will be available in subprocesses)
 export -f  <funcname>        # Exports function 'funcname'
 export var1="var1 value"     # Export and assign in the same statement
-export <varname>             # Copy Bash variable 
-declare -x <varname>         # Copy Bash variable 
+export <varname>             # Copy Bash variable
+declare -x <varname>         # Copy Bash variable

 array[0]=valA                # how to define an array
 array[1]=valB
@@ -507,9 +507,9 @@ function returntrap {
 trap returntrap RETURN  # is executed each time a shell function or a script executed with the . or source commands finishes executing

 ##############################################################################
-# COLORS AND BACKGROUNDS 
+# COLORS AND BACKGROUNDS
 ##############################################################################
-# note: \e or \x1B also work instead of \033 
+# note: \e or \x1B also work instead of \033
 # Reset
 Color_Off='\033[0m' # Text Reset

@@ -524,14 +524,14 @@ Cyan='\033[0;36m'   # Cyan
 White='\033[0;97m'  # White

 # Additional colors
-LGrey='\033[0;37m'  # Ligth Gray
+LGrey='\033[0;37m'  # Light Gray
 DGrey='\033[0;90m'  # Dark Gray
-LRed='\033[0;91m'   # Ligth Red
-LGreen='\033[0;92m' # Ligth Green
-LYellow='\033[0;93m'# Ligth Yellow
-LBlue='\033[0;94m'  # Ligth Blue
+LRed='\033[0;91m'   # Light Red
+LGreen='\033[0;92m' # Light Green
+LYellow='\033[0;93m'# Light Yellow
+LBlue='\033[0;94m'  # Light Blue
 LPurple='\033[0;95m'# Light Purple
-LCyan='\033[0;96m'  # Ligth Cyan
+LCyan='\033[0;96m'  # Light Cyan


 # Bold
@@ -566,6 +566,6 @@ On_White='\033[47m' # White

 # Example of usage
 echo -e "${Green}This is GREEN text${Color_Off} and normal text"
-echo -e "${Red}${On_White}This is Red test on White background${Color_Off}" 
+echo -e "${Red}${On_White}This is Red test on White background${Color_Off}"
 # option -e is mandatory, it enable interpretation of backslash escapes
 printf "${Red} This is red \n"
--- a/languages/golang.md
+++ b/languages/golang.md
@@ -397,8 +397,8 @@ d, t := doubleAndTriple(5)
 _, t := doubleAndTriple(3)
 // t = 9

-// Functions can defer commands. Defered commands are
-// runned in a stack order after the execution and
+// Functions can defer commands. Deferred commands are
+// ran in a stack order after the execution and
 // returning of a function
 var aux = 0

@@ -488,7 +488,7 @@ person3.Age // 0

 ## Maps

-Maps are data structures that holds values assigneds to a key.
+Maps are data structures that holds values assigned to a key.

 ```go
 // Declaring a map
@@ -508,7 +508,7 @@ newYork // "EUA"
 // Delete
 delete(cities, "NY")

-// Check if a key is setted
+// Check if a key is set
 value, ok := cities["NY"]
 ok // false
 value // ""
@@ -600,7 +600,7 @@ Go doesn't support `throw`, `try`, `catch` and other common error handling struc
 ```go
 import "errors"

-// Function that contain a logic that can cause a possible exception flow 
+// Function that contain a logic that can cause a possible exception flow
 func firstLetter(text string) (string, error) {
    if len(text) < 1 {
        return nil, errors.New("Parameter text is empty")
@@ -632,7 +632,7 @@ func Sum(x, y int) int {
 }

 // main_test.go
-import ( 
+import (
    "testing"
    "reflect"
 )
@@ -676,7 +676,7 @@ func main() {
    blocking2: 0
    blocking2: 1
    blocking2: 2
-    done 
+    done
 */

 // Go routines are a function (either declared previously or anonymous) called with the keyword go
--- a/languages/java.md
+++ b/languages/java.md
@@ -204,7 +204,7 @@ a \|= b; //a is the variable name; b is the variable name; this expression is an
  }
 ```
 **Example:**
-```java  
+```java
  for (int i = 0; i <= n; i++) {
     System.out.println(i);
  }
@@ -254,10 +254,10 @@ for(dataType item : array) {

 **Example:**
 ```java
-    int i=1;  
-    do{  
-      System.out.println(i);  
-      i++;  
+    int i=1;
+    do{
+      System.out.println(i);
+      i++;
    }while(i<=10);
 ```

@@ -308,7 +308,7 @@ for(dataType item : array) {
  //Declare a variable, object name
  String s;

-  //Invoke a contructor to create an object
+  //Invoke a constructor to create an object
  s = new String ("Hello World");

  //Invoke an instance method that operates on the object's value
@@ -361,13 +361,13 @@ class MyClass {
        // four methods
        public void setCadence(int newValue) {
            cadence = newValue;
-        }   
+        }
        public void setGear(int newValue) {
            gear = newValue;
-        }   
+        }
        public void applyBrake(int decrement) {
            speed -= decrement;
-        }  
+        }
        public void speedUp(int increment) {
            speed += increment;
        }
@@ -531,13 +531,13 @@ class MyClass extends MySuperClass implements YourInterface {


 ```java
-    interface print{  
-        void printPaper();  
-    }  
-    public class A4 implements print{  
+    interface print{
+        void printPaper();
+    }
+    public class A4 implements print{
        public void printPaper(){
          System.out.println("A4 Page Printed. ");
-        }  
+        }
    }
 ```

--- a/languages/php.php
+++ b/languages/php.php
@@ -1,8 +1,8 @@
 <?php

 // Exit the file, string inside get's echo'ed
-die("This file is not ment to be ran. ¯\_(ツ)_/¯");
-exit("This file is not ment to be ran. ¯\_(ツ)_/¯");
+die("This file is not meant to be ran. ¯\_(ツ)_/¯");
+exit("This file is not meant to be ran. ¯\_(ツ)_/¯");

 /**
 * Printing
@@ -17,7 +17,7 @@ var_dump($arr); // Print anything, with type hints for any value and sizes
 $string = 'Awesome cheatsheets';

 str_contains($string, 'cheat'); // Find if the string contains the specified string (PHP >= 8.0)
-str_replace('Awesome', 'Bonjour', $string); // Replace all occurence
+str_replace('Awesome', 'Bonjour', $string); // Replace all occurrence
 strcmp($string, 'Awesome cheatsheets'); // Compare two strings
 strpos($string, 'a', 0); // Get position in the string
 str_split($string, 2); // Split the string
@@ -189,7 +189,7 @@ $argc; // Number of arguments passed into terminal
 $myObject?->getName()?->startWith('A');

 /**
- * Class 
+ * Class
 * http://php.net/manual/en/language.oop5.basic.php
 */
 class NormalClass extends AbstractClassName implements InterfaceName
@@ -200,7 +200,7 @@ class NormalClass extends AbstractClassName implements InterfaceName
    // --> PROPERTY TYPES <--

    /**
-     * Public property, everyone can access this property. 
+     * Public property, everyone can access this property.
     * @var Type
     */
    public $property;
@@ -251,7 +251,7 @@ class NormalClass extends AbstractClassName implements InterfaceName
    protected function protectedFunction(Type $var = null): Type
    {
    }
-    
+
    /**
     * Static function, doesn't need an instance to be executed.
     * @param Type
@@ -541,7 +541,7 @@ u   Pattern is treated as UTF-8
 \w  Any "word" character (a-z 0-9 _)
 \W  Any non "word" character
 \s  Whitespace (space, tab CRLF)
-\S  Any non whitepsace character
+\S  Any non whitespace character
 \d  Digits (0-9)
 \D  Any non digit character
 .   (Period) - Any character except newline
--- a/languages/python.md
+++ b/languages/python.md
@@ -44,7 +44,7 @@
 - As of python3.8 there are 35 keywords

 | Keyword | Description  | Category |
-|---------- | ---------- | --------- | 
+|---------- | ---------- | --------- |
 | True      | Boolean value for not False or 1 | Value Keyword|
 | False     | Boolean Value for not True or 0 | Value Keyword |
 | None      | No Value | Value keyword |
@@ -58,7 +58,7 @@
 | else | this block will be executed if condition is false | conditional |
 | for | used for looping | iteration |
 | while | used for looping | iteration |
-| break | get out of loop | iteration | 
+| break | get out of loop | iteration |
 | continue | skip for specific condition | iteration |
 | def | make user defined function | structure |
 | class | make user defined classes | structure |
@@ -71,8 +71,8 @@
 | import | import libraries/modules/packages | import |
 | from | import specific function/classes from modules/packages | import |
 | try | this block will be tried to get executed | exception handling |
-| except | is any exception/error has occured it'll be executed | exception handling |
-| finally | It'll be executed no matter exception occurs or not | exception handling | 
+| except | is any exception/error has occurred it'll be executed | exception handling |
+| finally | It'll be executed no matter exception occurs or not | exception handling |
 | raise | throws any specific error/exception | exception handling |
 | assert | throws an AssertionError if condition is false | exception handling |
 | async | used to define asynchronous functions/co-routines | asynchronous programming |
@@ -135,7 +135,7 @@
 - Lists are created using square brackets:

 ```python
-thislist = ["apple", "banana", "cherry"] 
+thislist = ["apple", "banana", "cherry"]
 ```

 - List items are ordered, changeable, and allow duplicate values.
@@ -157,14 +157,14 @@ thislist = list(("apple", "banana", "cherry"))  # note the double round-brackets
 - pop() function removes the last value in the given list by default.

  ```python
-  thislist = ["apple", "banana", "cherry"] 
-  
+  thislist = ["apple", "banana", "cherry"]
+
  print(thislist.pop())  # cherry
-  print(thislist.pop(0))  #apple 
-  
+  print(thislist.pop(0))  #apple
+
  ```

-  
+

 ### Tuple

@@ -291,14 +291,14 @@ thisdict = {
    "model": "Mustang",
    "year": 1964
  }
-  
+
  x = car.pop("model")
-  
+
  print(x)# Mustang
  print(car)#{'brand': 'Ford', 'year': 1964}
  ```

-  
+

 ### Conditional branching

@@ -378,5 +378,5 @@ function_name()
 ```

 * We need not to specify the return type of the function.
-* Functions by default return `None` 
+* Functions by default return `None`
 * We can return any datatype.
Author	SHA1	Message	Date
mohammad hassani	c2ee155cef	Merge `fd7dfa3743` into `88e5be6e4b`	2024-08-26 09:36:52 +03:30
Julien Le Coupanec	88e5be6e4b	Merge pull request #391 from Philip-Walsh/master fix spelling and whitespace in cheatsheets	2024-08-24 23:07:02 +02:00
Philip-Walsh	2f9037b24e	fix spelling and whitespace in cheatsheets	2024-08-22 12:02:10 +01:00
mohammad hassani	fd7dfa3743	add react-native-styling cheat-sheet	2021-10-18 17:26:43 +03:30