From 8756c20adef77a213c796a643883dec7e0e5dc43 Mon Sep 17 00:00:00 2001
From: Nicolas Gallagher <nicolasgallagher@gmail.com>
Date: Wed, 9 Aug 2017 09:44:36 -0700
Subject: [PATCH] Minor changes and fixes to docs

---
 README.md                                      | 18 ++++++------------
 .../TouchableWithoutFeedbackScreen.js          | 12 +++++++++++-
 docs/storybook/1-components/View/ViewScreen.js |  6 +++---
 docs/storybook/ui-explorer/DocItem.js          | 15 ++++++++++++++-
 4 files changed, 34 insertions(+), 17 deletions(-)

diff --git a/README.md b/README.md
index 3c7e9e38..7d9b5e69 100644
--- a/README.md
+++ b/README.md
@@ -3,7 +3,11 @@
 [![Build Status][travis-image]][travis-url]
 [![npm version][npm-image]][npm-url]
 
-[React Native][react-native-url] components and APIs for the Web.
+"React Native for Web" brings [React Native][react-native-url]'s
+building blocks and touch handling to the Web.
+
+* [UI Explorer and documentation](https://necolas.github.io/react-native-web/storybook/).
+* [React Native for Web: Playground](https://glitch.com/edit/#!/react-native-web-playground) using create-react-app.
 
 Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.
 
@@ -13,16 +17,6 @@ Browser support: Chrome, Firefox, Safari >= 7, IE 10, Edge.
 [travis-image]: https://travis-ci.org/necolas/react-native-web.svg?branch=master
 [travis-url]: https://travis-ci.org/necolas/react-native-web
 
-## Overview
-
-"React Native for Web" is a project to bring React Native's building blocks and
-touch handling to the Web.
-
-Browse the [UI Explorer](https://necolas.github.io/react-native-web/storybook/)
-to see React Native examples running on Web. Or remix the [React Native for
-Web: Playground](https://glitch.com/edit/#!/react-native-web-playground) on
-Glitch.
-
 ## Quick start
 
 NOTE: React Native for Web supports React/ReactDOM 15.4, 15.5, or 15.6.
@@ -38,7 +32,7 @@ Then read the [Getting Started](docs/guides/getting-started.md) guide.
 ## Documentation
 
 The [UI Explorer](https://necolas.github.io/react-native-web/storybook/)
-interactively documents all the APIs and Components.
+interactively documents all the supported APIs and Components.
 
 Guides:
 
diff --git a/docs/storybook/1-components/Touchable/TouchableWithoutFeedbackScreen.js b/docs/storybook/1-components/Touchable/TouchableWithoutFeedbackScreen.js
index 97200fa5..03e52bee 100644
--- a/docs/storybook/1-components/Touchable/TouchableWithoutFeedbackScreen.js
+++ b/docs/storybook/1-components/Touchable/TouchableWithoutFeedbackScreen.js
@@ -34,6 +34,7 @@ const TouchableWithoutFeedbackScreen = () =>
 
     <Section title="Props">
       <DocItem name="...View props" />
+
       <DocItem
         name="delayLongPress"
         typeInfo="?number"
@@ -43,6 +44,7 @@ const TouchableWithoutFeedbackScreen = () =>
           </AppText>
         }
       />
+
       <DocItem
         name="delayPressIn"
         typeInfo="?number"
@@ -52,6 +54,7 @@ const TouchableWithoutFeedbackScreen = () =>
           </AppText>
         }
       />
+
       <DocItem
         name="delayPressOut"
         typeInfo="?number"
@@ -61,6 +64,7 @@ const TouchableWithoutFeedbackScreen = () =>
           </AppText>
         }
       />
+
       <DocItem
         name="disabled"
         typeInfo="?boolean"
@@ -73,14 +77,19 @@ const TouchableWithoutFeedbackScreen = () =>
           render: () => <TouchableWithoutFeedbackDisabled />
         }}
       />
-      <DocItem name="onLongPress" typeInfo="?function" />,
+
+      <DocItem name="onLongPress" typeInfo="?function" />
+
       <DocItem
         name="onPress"
         typeInfo="?function"
         description="Called when the touch is released, but not if cancelled (e.g. by a scroll that steals the responder lock)."
       />
+
       <DocItem name="onPressIn" typeInfo="?function" />
+
       <DocItem name="onPressOut" typeInfo="?function" />
+
       <DocItem
         name="pressRetentionOffset"
         typeInfo="?{top: number, left: number, bottom: number, right: number}"
@@ -90,6 +99,7 @@ back and you'll see that the button is once again reactivated! Move it back and
 forth several times while the scroll view is disabled. Ensure you pass in a
 constant to reduce memory allocations.`}
       />
+
       <DocItem name="style" typeInfo="?style" />
     </Section>
 
diff --git a/docs/storybook/1-components/View/ViewScreen.js b/docs/storybook/1-components/View/ViewScreen.js
index 29935ae9..b16895af 100644
--- a/docs/storybook/1-components/View/ViewScreen.js
+++ b/docs/storybook/1-components/View/ViewScreen.js
@@ -233,9 +233,9 @@ const ViewScreen = () =>
           <AppText>
             Controls whether the View can be the target of touch events. The enhanced{' '}
             <Code>pointerEvents</Code> modes provided are not part of the CSS spec, therefore,{' '}
-            <Code>pointerEvents</Code> is excluded from <Code>style</Code>.
-            <Code>box-none</Code> preserves pointer events on the element's children;{' '}
-            <Code>box-only</Code> disables pointer events on the element's children.
+            <Code>pointerEvents</Code> is excluded from <Code>style</Code>. <Code>box-none</Code>{' '}
+            preserves pointer events on the element's children; <Code>box-only</Code> disables
+            pointer events on the element's children.
           </AppText>
         }
         example={{
diff --git a/docs/storybook/ui-explorer/DocItem.js b/docs/storybook/ui-explorer/DocItem.js
index f5ac0eaa..0b6e76c5 100644
--- a/docs/storybook/ui-explorer/DocItem.js
+++ b/docs/storybook/ui-explorer/DocItem.js
@@ -11,6 +11,19 @@ import { StyleSheet, Text, View } from 'react-native';
 
 const Divider = () => <View style={styles.verticalDivider} />;
 
+const createDescription = description => {
+  const nodeList = React.Children.toArray(description);
+  if (nodeList.length === 1) {
+    return (
+      <Text>
+        {nodeList}
+      </Text>
+    );
+  } else {
+    return insertBetween(() => <Divider key={Math.random()} />, nodeList);
+  }
+};
+
 const DocItem = ({ description, example = {}, name, typeInfo, label }) =>
   <View style={styles.example}>
     {name &&
@@ -19,7 +32,7 @@ const DocItem = ({ description, example = {}, name, typeInfo, label }) =>
       </AppText>}
     {description &&
       <View style={styles.description}>
-        {insertBetween(() => <Divider key={Math.random()} />, React.Children.toArray(description))}
+        {createDescription(description)}
       </View>}
     {(example.render || example.code) &&
       <View style={styles.renderBox}>