Minor changes and fixes to docs

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:
 

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>
 

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={{

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}>