diff --git a/docs/layout-props.md b/docs/layout-props.md
index a1f03e3f5aa..657aa22df5a 100644
--- a/docs/layout-props.md
+++ b/docs/layout-props.md
@@ -3,6 +3,172 @@ id: layout-props
 title: Layout Props
 ---
 
+## Example
+
+The following example shows how different properties can affect or shape a React Native layout.
+You can try for example to add or remove squares from the UI while changing the values of the property `flexWrap`.
+Find more detailed examples about this properties in the [Layout with Flexbox](flexbox) docs page.
+
+```SnackPlayer name=LayoutProps%20Example
+import React, { useState } from 'react';
+import { Button, ScrollView, StyleSheet, Text, View } from 'react-native';
+import Constants from 'expo-constants';
+
+const App = () => {
+  const flexDirections = ['row', 'row-reverse', 'column', 'column-reverse'];
+  const justifyContents = [
+    'flex-start',
+    'flex-end',
+    'center',
+    'space-between',
+    'space-around',
+    'space-evenly',
+  ];
+  const alignItemsArr = [
+    'flex-start',
+    'flex-end',
+    'center',
+    'stretch',
+    'baseline',
+  ];
+  const wraps = ['nowrap', 'wrap', 'wrap-reverse'];
+  const directions = ['inherit', 'ltr', 'rtl'];
+  const [flexDirection, setFlexDirection] = useState(0);
+  const [justifyContent, setJustifyContent] = useState(0);
+  const [alignItems, setAlignItems] = useState(0);
+  const [direction, setDirection] = useState(0);
+  const [wrap, setWrap] = useState(0);
+
+  const hookedStyles = {
+    flexDirection: flexDirections[flexDirection],
+    justifyContent: justifyContents[justifyContent],
+    alignItems: alignItemsArr[alignItems],
+    direction: directions[direction],
+    flexWrap: wraps[wrap],
+  };
+
+  const changeSetting = (value, options, setterFunction) => {
+    if (value == options.length - 1) {
+      setterFunction(0);
+      return;
+    }
+    setterFunction(value + 1);
+  };
+
+  const Square = () => {
+    const sqStyle = {
+      width: 50,
+      height: 50,
+      backgroundColor: randomHexColor(),
+    };
+    return <View style={sqStyle} />;
+  };
+  const [squares, setSquares] = useState([Square(), Square(), Square()]);
+  return (
+    <>
+      <View style={{ paddingTop: Constants.statusBarHeight }} />
+      <View style={[styles.container, styles.playingSpace, hookedStyles]}>
+        {squares.map(elem => elem)}
+      </View>
+      <ScrollView style={[styles.container]}>
+        <View style={[styles.controlSpace]}>
+          <View style={styles.buttonView}>
+            <Button
+              title="Change Flex Direction"
+              onPress={() =>
+                changeSetting(flexDirection, flexDirections, setFlexDirection)
+              }
+            />
+            <Text style={styles.text}>{flexDirections[flexDirection]}</Text>
+          </View>
+          <View style={styles.buttonView}>
+            <Button
+              title="Change Justify Content"
+              onPress={() =>
+                changeSetting(
+                  justifyContent,
+                  justifyContents,
+                  setJustifyContent
+                )
+              }
+            />
+            <Text style={styles.text}>{justifyContents[justifyContent]}</Text>
+          </View>
+          <View style={styles.buttonView}>
+            <Button
+              title="Change Align Items"
+              onPress={() =>
+                changeSetting(alignItems, alignItemsArr, setAlignItems)
+              }
+            />
+            <Text style={styles.text}>{alignItemsArr[alignItems]}</Text>
+          </View>
+          <View style={styles.buttonView}>
+            <Button
+              title="Change Direction"
+              onPress={() => changeSetting(direction, directions, setDirection)}
+            />
+            <Text style={styles.text}>{directions[direction]}</Text>
+          </View>
+          <View style={styles.buttonView}>
+            <Button
+              title="Change Flex Wrap"
+              onPress={() => changeSetting(wrap, wraps, setWrap)}
+            />
+            <Text style={styles.text}>{wraps[wrap]}</Text>
+          </View>
+          <View style={styles.buttonView}>
+            <Button
+              title="Add Square"
+              onPress={() => setSquares([...squares, Square()])}
+            />
+          </View>
+          <View style={styles.buttonView}>
+            <Button
+              title="Delete Square"
+              onPress={() =>
+                setSquares(squares.filter((v, i) => i != squares.length - 1))
+              }
+            />
+          </View>
+        </View>
+      </ScrollView>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    height: '50%',
+  },
+  playingSpace: {
+    backgroundColor: 'white',
+    borderColor: 'blue',
+    borderWidth: 3,
+  },
+  controlSpace: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    backgroundColor: '#F5F5F5',
+  },
+  buttonView: {
+    width: '50%',
+    padding: 10,
+  },
+  text: { textAlign: 'center' },
+});
+
+const randomHexColor = () => {
+  return '#000000'.replace(/0/g, function() {
+    return (~~(Math.random() * 16)).toString(16);
+  });
+};
+
+export default App;
+```
+
+---
+
 # Reference
 
 ## Props
@@ -227,9 +393,9 @@ When `flex` is -1, the component is normally sized according to `width` and `hei
 
 `flexWrap` controls whether children can wrap around after they hit the end of a flex container. It works like `flex-wrap` in CSS (default: nowrap). See https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap for more details. Note it does not work anymore with `alignItems: stretch` (the default), so you may want to use `alignItems: flex-start` for example (breaking change details: https://github.com/facebook/react-native/releases/tag/v0.28.0).
 
-| Type                   | Required |
-| ---------------------- | -------- |
-| enum('wrap', 'nowrap') | No       |
+| Type                                   | Required |
+| -------------------------------------- | -------- |
+| enum('wrap', 'nowrap', 'wrap-reverse') | No       |
 
 ---