diff --git a/docs/height-and-width.md b/docs/height-and-width.md
index 282b7af0197..88ae2a22c14 100644
--- a/docs/height-and-width.md
+++ b/docs/height-and-width.md
@@ -14,13 +14,19 @@ import React from 'react';
import { View } from 'react-native';
const FixedDimensionsBasics = () => {
- return (
-
-
-
-
-
- );
+ return (
+
+
+
+
+
+ );
};
export default FixedDimensionsBasics;
@@ -32,26 +38,55 @@ Setting dimensions this way is common for components that should always render a
Use `flex` in a component's style to have the component expand and shrink dynamically based on available space. Normally you will use `flex: 1`, which tells a component to fill all available space, shared evenly amongst other components with the same parent. The larger the `flex` given, the higher the ratio of space a component will take compared to its siblings.
-> A component can only expand to fill available space if its parent has dimensions greater than 0. If a parent does not have either a fixed `width` and `height` or `flex`, the parent will have dimensions of 0 and the `flex` children will not be visible.
+> A component can only expand to fill available space if its parent has dimensions greater than `0`. If a parent does not have either a fixed `width` and `height` or `flex`, the parent will have dimensions of `0` and the `flex` children will not be visible.
```SnackPlayer name=Flex%20Dimensions
import React from 'react';
import { View } from 'react-native';
const FlexDimensionsBasics = () => {
- return (
- // Try removing the `flex: 1` on the parent View.
- // The parent will not have dimensions, so the children can't expand.
- // What if you add `height: 300` instead of `flex: 1`?
-
-
-
-
-
- );
+ return (
+ // Try removing the `flex: 1` on the parent View.
+ // The parent will not have dimensions, so the children can't expand.
+ // What if you add `height: 300` instead of `flex: 1`?
+
+
+
+
+
+ );
};
export default FlexDimensionsBasics;
```
After you can control a component's size, the next step is to [learn how to lay it out on the screen](flexbox.md).
+
+## Percentage Dimensions
+
+If you want to fill a certain portion of the screen, but you _don't_ want to use the `flex` layout, you _can_ use **percentage values** in the component's style. Similar to flex dimensions, percentage dimensions require parent with a defined size.
+
+```SnackPlayer name=Percentage%20Dimensions
+import React from 'react';
+import { View } from 'react-native';
+
+const PercentageDimensionsBasics = () => {
+ // Try removing the `height: '100%'` on the parent View.
+ // The parent will not have dimensions, so the children can't expand.
+ return (
+
+
+
+
+
+ );
+};
+
+export default PercentageDimensionsBasics;
+```