Minor improvements to docs text formatting

docs/storybook/1-components/ScrollView/ScrollViewDocs.js

@@ -26,7 +26,7 @@ const sections = [
       <DocItem
         name="horizontal"
         typeInfo="?boolean = false"
-        description="When `true`, the scroll view's children are arranged horizontally in a row instead of vertically in a column."
+        description="When true, the scroll view's children are arranged horizontally in a row instead of vertically in a column."
         example={{
           render: () => <HorizontalExample />
         }}
@@ -41,9 +41,15 @@ const sections = [
           </AppText>,
           <TextList
             items={[
-              '`none` (the default), drags do not dismiss the keyboard.',
-              '`on-drag`, the keyboard is dismissed when a drag begins.',
-              '`interactive` (not supported on web; same as `none`)'
+              <AppText>
+                <Code>none</Code> (the default): drags do not dismiss the keyboard.
+              </AppText>,
+              <AppText>
+                <Code>on-drag</Code>: the keyboard is dismissed when a drag begins.
+              </AppText>,
+              <AppText>
+                <Code>interactive</Code> (not supported on web; same as <Code>none</Code>)
+              </AppText>
             ]}
           />
         ]}
@@ -54,8 +60,8 @@ const sections = [
         typeInfo="?function"
         description={
           <AppText>
-            Called when scrollable content view of the <Code>ScrollView</Code>
-            changes. It's implemented using the <Code>onLayout</Code> handler
+            Called when scrollable content view of the <Code>ScrollView</Code> changes.
+            It's implemented using the <Code>onLayout</Code> handler
             attached to the content container which this <Code>ScrollView</Code> renders.
           </AppText>
         }
@@ -97,8 +103,7 @@ const sections = [
             time interval in ms). A lower number yields better accuracy for code that is
             tracking the scroll position, but can lead to scroll performance problems. The
             default value is <Code>0</Code>, which means the scroll event will be sent only once
-            each
-            time the view is scrolled.
+            each time the view is scrolled.
           </AppText>
         }
       />
@@ -126,8 +131,7 @@ const sections = [
           <AppText>
             Returns a reference to the underlying scroll responder, which supports
             operations like <Code>scrollTo</Code>. All <Code>ScrollView</Code>-like components
-            should implement
-            this method so that they can be composed while providing access to the
+            should implement this method so that they can be composed while providing access to the
             underlying scroll responder's methods.
           </AppText>
         }
@@ -159,10 +163,9 @@ storiesOf('Components', module).add('ScrollView', () =>
     description={
       <AppText>
         A scrollable <Code>View</Code> that provides itegration with the touch-locking responder
-        system. <Code>ScrollView</Code>'s
-        must have a bounded height: either set the height of the view directly (discouraged) or make
-        sure all parent views have
-        bounded height (e.g., transfer <Code>{'{ flex: 1}'}</Code> down the view stack).
+        system. <Code>ScrollView</Code>'s must have a bounded height: either set the height of the
+        view directly (discouraged) or make sure all parent views have bounded height (e.g.,
+        transfer <Code>{'{ flex: 1}'}</Code> down the view stack).
       </AppText>
     }
     sections={sections}

docs/storybook/2-apis/AppRegistry/AppRegistryDocs.js

@@ -18,12 +18,14 @@ const sections = [
       />,
 
       <DocItem
-        description={
-          <AppText>
-            Register multiple applications. <Code>AppConfig</Code> is of type
-            <Code>{'{ appKey: string; component: ComponentProvider; run?: Function }'}</Code>.
-          </AppText>
-        }
+        description={[
+          <AppText>Register multiple applications. <Code>AppConfig</Code> type is:</AppText>,
+          <Code>{`{
+  appKey: string;
+  component: ComponentProvider;
+  run?: function
+}`}</Code>
+        ]}
         name="static registerConfig"
         typeInfo="(config: Array<AppConfig>) => avoid"
       />,
@@ -60,9 +62,10 @@ const sections = [
       <DocItem
         description={
           <AppText>
-            Runs the application that was registered under <Code>appKey</Code>. The
+            Runs the application that was registered under <Code>appKey</Code>. The{' '}
             <Code>appParameters</Code> must include the <Code>rootTag</Code> into which the
-            application is rendered, and optionally any <Code>initialProps</Code>.
+            application is rendered, and optionally
+            any <Code>initialProps</Code>.
           </AppText>
         }
         example={{

docs/storybook/2-apis/Dimensions/DimensionsDocs.js

@@ -26,7 +26,6 @@ const sections = [
         typeInfo="(type: string, handler: function) => void"
         description={[
           <AppText>Add an event handler. Supported events:</AppText>,
-
           <TextList
             items={[
               <AppText>

docs/storybook/2-apis/NetInfo/NetInfoDocs.js

@@ -4,16 +4,32 @@
 
 import React from 'react';
 import { storiesOf } from '@kadira/storybook';
-import UIExplorer, { AppText, Code, DocItem } from '../../ui-explorer';
+import UIExplorer, { AppText, Code, DocItem, TextList } from '../../ui-explorer';
 
 const sections = [
   {
     title: 'Methods',
     entries: [
       <DocItem
-        description={
-          'Invokes the listener whenever network status changes. The listener receives one of the following connectivity types (from the DOM connection API): bluetooth, cellular, ethernet, mixed, none, other, unknown, wifi, wimax'
-        }
+        description={[
+          <AppText>
+            Invokes the listener whenever network status changes. The listener receives one of the
+            following connectivity types (from the DOM connection API):
+          </AppText>,
+          <TextList
+            items={[
+              'bluetooth',
+              'cellular',
+              'ethernet',
+              'mixed',
+              'none',
+              'other',
+              'unknown',
+              'wifi',
+              'wimax'
+            ]}
+          />
+        ]}
         example={{
           code: "NetInfo.addEventListener('change', (connectionType) => {})"
         }}

docs/storybook/ui-explorer/Code.js

@@ -11,6 +11,7 @@ export default Code;
 const styles = StyleSheet.create({
   code: {
     fontFamily: 'monospace, monospace',
-    lineHeight: '1.3125em'
+    lineHeight: '1.3125em',
+    whiteSpace: 'pre'
   }
 });

docs/storybook/ui-explorer/DocItem.js

@@ -5,16 +5,24 @@
  */
 
 import AppText from './AppText';
+import insertBetween from './insertBetween';
 import React from 'react';
 import { StyleSheet, Text, View } from 'react-native';
 
+const Divider = () => <View style={styles.verticalDivider} />;
+
 const DocItem = ({ description, example = {}, name, typeInfo, label }) =>
   <View style={styles.example}>
     {name &&
       <AppText style={styles.title}>
         <PropText label={label} name={name} typeInfo={typeInfo} />
       </AppText>}
-    {description && <AppText style={styles.description}>{description}</AppText>}
+    {description &&
+      <View style={styles.description}>
+        {Array.isArray(description)
+          ? insertBetween(<Divider />, description)
+          : <AppText>{description}</AppText>}
+      </View>}
     {(example.render || example.code) &&
       <View style={styles.renderBox}>
         <AppText style={styles.exampleText}>Example</AppText>
@@ -61,7 +69,6 @@ const styles = StyleSheet.create({
     color: '#025268'
   },
   description: {
-    fontSize: '1rem',
     marginTop: 'calc(0.5 * 1.3125rem)'
   },
   renderBox: {

docs/storybook/ui-explorer/TextList.js

@@ -15,9 +15,6 @@ const TextList = ({ items }) =>
   </View>;
 
 const styles = StyleSheet.create({
-  list: {
-    marginTop: '1rem'
-  },
   item: {
     position: 'relative',
     paddingLeft: 20,

docs/storybook/ui-explorer/UIExplorer.js

@@ -5,6 +5,7 @@
  */
 
 import AppText from './AppText';
+import insertBetween from './insertBetween';
 import React from 'react';
 import { StyleSheet, View } from 'react-native';
 
@@ -12,14 +13,6 @@ const Title = ({ children }) => <AppText style={styles.title}>{children}</AppTex
 const Description = ({ children }) => <AppText style={styles.description}>{children}</AppText>;
 const SectionTitle = ({ children }) => <AppText style={styles.sectionTitle}>{children}</AppText>;
 
-const insertBetween = (item, array) =>
-  array.reduce((acc, curr, i, { length }) => {
-    if (i && i < length) {
-      return [...acc, item, curr];
-    }
-    return [...acc, curr];
-  }, []);
-
 const Divider = () => <View style={styles.divider} />;
 
 const SourceLink = ({ uri }) =>

docs/storybook/ui-explorer/insertBetween.js

@@ -0,0 +1,9 @@
+const insertBetween = (item, array) =>
+  array.reduce((acc, curr, i, { length }) => {
+    if (i && i < length) {
+      return [...acc, item, curr];
+    }
+    return [...acc, curr];
+  }, []);
+
+export default insertBetween;