Fix storybook renders & TextInput autofocus issue

boilerplate/src/i18n/en.json

@@ -17,5 +17,9 @@
     "title": "What’s In This Stack?",
     "tagLine": "Congratulations, you’ve got a very advanced React Native app template here.  Take advantage of this boilerplate!",
     "reactotron": "Demo Reactotron"
+  },
+  "storybook": {
+    "placeholder": "Placeholder",
+    "field": "Field"
   }
 }

boilerplate/src/theme/color.ts

@@ -48,4 +48,17 @@ export const color = {
    * Error messages and icons.
    */
   error: palette.angry,
+
+  /**
+   * Storybook background for Text stories, or any stories where 
+   * the text color is color.text, which is white by default, and does not show
+   * in Stories against the default white background
+  */
+  storybookDarkBg: palette.black,
+
+  /**
+   * Storybook text color for stories that display Text components against the
+   * white background
+  */
+   storybookTextColor: palette.black,
 }

boilerplate/src/views/shared/form-row/form-row.story.tsx

@@ -3,6 +3,11 @@ import { storiesOf } from "@storybook/react-native"
 import { StoryScreen, Story, UseCase } from "../../../../storybook/views"
 import { FormRow } from "./form-row"
 import { Text } from "../text"
+import { color } from "../../../theme/color"
+
+const TEXT_STYLE_OVERRIDE = {
+  color: color.storybookTextColor,
+}
 
 storiesOf("FormRow", module)
   .addDecorator(fn => <StoryScreen>{fn()}</StoryScreen>)
@@ -13,34 +18,34 @@ storiesOf("FormRow", module)
         usage="FormRow has many parts designed to fit together.  Here is what it looks like all assembled."
       >
         <FormRow preset="top">
-          <Text preset="fieldLabel">Hello! I am at the top</Text>
+          <Text preset="fieldLabel" style={TEXT_STYLE_OVERRIDE}>Hello! I am at the top</Text>
         </FormRow>
         <FormRow preset="middle">
-          <Text>
+          <Text style={TEXT_STYLE_OVERRIDE}>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi officia quo rerum
             impedit asperiores hic ex quae, quam dolores vel odit doloribus, tempore atque deserunt
             possimus incidunt, obcaecati numquam officiis.
           </Text>
         </FormRow>
         <FormRow preset="middle">
-          <Text preset="secondary">...one more thing</Text>
+          <Text preset="secondary" style={TEXT_STYLE_OVERRIDE}>...one more thing</Text>
         </FormRow>
         <FormRow preset="bottom">
-          <Text>🎉 Footers!</Text>
+          <Text style={TEXT_STYLE_OVERRIDE}>🎉 Footers!</Text>
         </FormRow>
       </UseCase>
       <UseCase text="Alternatives" usage="Less commonly used presets.">
         <FormRow preset="clear">
-          <Text>
+          <Text style={TEXT_STYLE_OVERRIDE}>
             My borders are still there, but they are clear. This causes the text to still align
             properly due to the box model of flexbox.
           </Text>
         </FormRow>
         <FormRow preset="soloRound">
-          <Text>I'm round</Text>
+          <Text style={TEXT_STYLE_OVERRIDE}>I'm round</Text>
         </FormRow>
         <FormRow preset="soloStraight" style={{ marginTop: 10, backgroundColor: "#ffe" }}>
-          <Text>I'm square and have a custom style.</Text>
+          <Text style={TEXT_STYLE_OVERRIDE}>I'm square and have a custom style.</Text>
         </FormRow>
       </UseCase>
     </Story>
@@ -49,34 +54,34 @@ storiesOf("FormRow", module)
     <Story>
       <UseCase text="top" usage="The top of a form.">
         <FormRow preset="top">
-          <Text>Curved borders at the top.</Text>
-          <Text>Nothing below</Text>
+          <Text style={TEXT_STYLE_OVERRIDE}>Curved borders at the top.</Text>
+          <Text style={TEXT_STYLE_OVERRIDE}>Nothing below</Text>
         </FormRow>
       </UseCase>
       <UseCase text="middle" usage="A row in the middle of a form.">
         <FormRow preset="middle">
-          <Text>No curves and empty at the bottom.</Text>
+          <Text style={TEXT_STYLE_OVERRIDE}>No curves and empty at the bottom.</Text>
         </FormRow>
       </UseCase>
       <UseCase text="bottom" usage="The bottom of a form.">
         <FormRow preset="bottom">
-          <Text>Curved at the bottom</Text>
-          <Text>Line at the top.</Text>
+          <Text style={TEXT_STYLE_OVERRIDE}>Curved at the bottom</Text>
+          <Text style={TEXT_STYLE_OVERRIDE}>Line at the top.</Text>
         </FormRow>
       </UseCase>
       <UseCase text="soloRound" usage="A standalone curved form row.">
         <FormRow preset="soloRound">
-          <Text>Curves all around.</Text>
+          <Text style={TEXT_STYLE_OVERRIDE}>Curves all around.</Text>
         </FormRow>
       </UseCase>
       <UseCase text="soloStraight" usage="A standalone straight form row.">
         <FormRow preset="soloStraight">
-          <Text>Curves nowhere.</Text>
+          <Text style={TEXT_STYLE_OVERRIDE}>Curves nowhere.</Text>
         </FormRow>
       </UseCase>
       <UseCase text="clear" usage="Identical dimensions but transparent edges.">
         <FormRow preset="clear">
-          <Text>Curves nowhere.</Text>
+          <Text style={TEXT_STYLE_OVERRIDE}>Curves nowhere.</Text>
         </FormRow>
       </UseCase>
     </Story>

boilerplate/src/views/shared/header/header.story.tsx

@@ -1,30 +1,43 @@
 import * as React from "react"
+import { View } from "react-native"
 import { storiesOf } from "@storybook/react-native"
 import { StoryScreen, Story, UseCase } from "../../../../storybook/views"
 import { Header } from "./header"
+import { color } from "../../../theme/color"
+
+const VIEWSTYLE = {
+  flex: 1,
+  backgroundColor: color.storybookDarkBg,
+}
 
 storiesOf("Header", module)
   .addDecorator(fn => <StoryScreen>{fn()}</StoryScreen>)
   .add("Behavior", () => (
     <Story>
       <UseCase noPad text="default" usage="The default usage">
-        <Header
-          headerTx="secondExampleScreen.howTo"
-        />
+        <View style={VIEWSTYLE}>
+          <Header
+            headerTx="secondExampleScreen.howTo"
+          />
+        </View>
       </UseCase>
       <UseCase noPad text="leftIcon" usage="A left nav icon">
-        <Header
-          headerTx="secondExampleScreen.howTo"
-          leftIcon="back"
-          onLeftPress={() => window.alert("left nav")}
-        />
+        <View style={VIEWSTYLE}>
+          <Header
+            headerTx="secondExampleScreen.howTo"
+            leftIcon="back"
+            onLeftPress={() => window.alert("left nav")}
+          />
+        </View>
       </UseCase>
       <UseCase noPad text="rightIcon" usage="A right nav icon">
-        <Header
-          headerTx="secondExampleScreen.howTo"
-          rightIcon="bullet"
-          onRightPress={() => window.alert("right nav")}
-        />
+        <View style={VIEWSTYLE}>
+          <Header
+            headerTx="secondExampleScreen.howTo"
+            rightIcon="bullet"
+            onRightPress={() => window.alert("right nav")}
+          />
+        </View>
       </UseCase>
     </Story>
   ))

boilerplate/src/views/shared/text/text.story.tsx

@@ -1,27 +1,40 @@
 import * as React from "react"
+import { View } from "react-native"
 import { storiesOf } from "@storybook/react-native"
 import { StoryScreen, Story, UseCase } from "../../../../storybook/views"
+import { color } from "../../../theme/color"
 import { Text } from "./text"
 
+const VIEWSTYLE = {
+  flex: 1,
+  backgroundColor: color.storybookDarkBg,
+}
+
 storiesOf("Text", module)
   .addDecorator(fn => <StoryScreen>{fn()}</StoryScreen>)
   .add("Style Presets", () => (
     <Story>
       <UseCase text="default" usage="Used for normal body text.">
-        <Text>Hello!</Text>
-        <Text style={{ paddingTop: 10 }}>
-          Check out{"\n"}
-          my{"\n"}
-          line height
-        </Text>
-        <Text style={{ paddingTop: 10 }}>The quick brown fox jumped over the slow lazy dog.</Text>
-        <Text>$123,456,789.00</Text>
+        <View style={VIEWSTYLE}>
+          <Text>Hello!</Text>
+          <Text style={{ paddingTop: 10 }}>
+            Check out{"\n"}
+            my{"\n"}
+            line height
+          </Text>
+          <Text style={{ paddingTop: 10 }}>The quick brown fox jumped over the slow lazy dog.</Text>
+          <Text>$123,456,789.00</Text>
+        </View>
       </UseCase>
       <UseCase text="bold" usage="Used for bolded body text.">
-        <Text preset="bold">Osnap! I'm puffy.</Text>
+        <View style={VIEWSTYLE}>
+          <Text preset="bold">Osnap! I'm puffy.</Text>
+        </View>
       </UseCase>
       <UseCase text="header" usage="Used for major section headers.">
-        <Text preset="header">Behold!</Text>
+        <View style={VIEWSTYLE}>
+          <Text preset="header">Behold!</Text>
+        </View>
       </UseCase>
     </Story>
   ))
@@ -31,23 +44,31 @@ storiesOf("Text", module)
         text="text"
         usage="Used when you want to pass a value but don't want to open a child."
       >
-        <Text text="Heyo!" />
+        <View style={VIEWSTYLE}>
+          <Text text="Heyo!" />
+        </View>
       </UseCase>
       <UseCase text="tx" usage="Used for looking up i18n keys.">
-        <Text tx="common.ok" />
-        <Text tx="omglol" />
+        <View style={VIEWSTYLE}>
+          <Text tx="common.ok" />
+          <Text tx="omglol" />
+        </View>
       </UseCase>
       <UseCase
         text="children"
         usage="Used like you would normally use a React Native <Text> component."
       >
-        <Text>Passing strings as children.</Text>
+        <View style={VIEWSTYLE}>
+          <Text>Passing strings as children.</Text>
+        </View>
       </UseCase>
       <UseCase text="nested children" usage="You can embed them and change styles too.">
-        <Text>
-          {" "}
-          Hello <Text preset="bold">bolded</Text> World.
-        </Text>
+        <View style={VIEWSTYLE}>
+          <Text>
+            {" "}
+            Hello <Text preset="bold">bolded</Text> World.
+          </Text>
+        </View>
       </UseCase>
     </Story>
   ))