Add support for <Box display="none">

readme.md

@@ -567,6 +567,14 @@ See [justify-content](https://css-tricks.com/almanac/properties/f/justify-conten
 // [  X   Y  ]
 ```
 
+##### Visibility
+
+###### display
+
+Type: `string`<br>
+Allowed values: `flex` and `none`<br>
+Default: `flex`
+
 #### `<Color>`
 
 The `<Color>` component is a simple wrapper around [the `chalk` API](https://github.com/chalk/chalk#api).

src/render-node-to-output.ts

@@ -1,3 +1,4 @@
+import Yoga from 'yoga-layout-prebuilt';
 import widestLine from 'widest-line';
 import {wrapText} from './wrap-text';
 import {getMaxWidth} from './get-max-width';
@@ -96,6 +97,10 @@ export const renderNodeToOutput = (
 	const {yogaNode} = node;
 
 	if (yogaNode) {
+		if (yogaNode.getDisplay() === Yoga.DISPLAY_NONE) {
+			return;
+		}
+
 		// Left and top positions in Yoga are relative to their parent node
 		const x = offsetX + yogaNode.getComputedLeft();
 		const y = offsetY + yogaNode.getComputedTop();

test/display.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import test from 'ava';
+import {renderToString} from './helpers/render-to-string';
+import {Box} from '../src';
+
+test('display flex', t => {
+	const output = renderToString(<Box display="flex">X</Box>);
+	t.is(output, 'X');
+});
+
+test('display none', t => {
+	const output = renderToString(
+		<Box flexDirection="column">
+			<Box display="none">Kitty!</Box>
+			<Box>Doggo</Box>
+		</Box>
+	);
+
+	t.is(output, 'Doggo');
+});