Merge branch 'master' into style-arrays

boilerplate.js

@@ -171,15 +171,29 @@ async function install (context) {
       spinner.text = `▸ setting up splash screen`
       spinner.start()
       spinner.text = `▸ setting up splash screen: configuring`
+      // Grab the patches
       const patchPath = `${process.cwd()}/patches/splash-screen/splash-screen.patch`
+      const iphoneXPatchPath = `${process.cwd()}/patches/splash-screen/iphonex-splash-screen.patch`
       const patch = filesystem.read(patchPath)
+      const iphoneXPatch = filesystem.read(iphoneXPatchPath)
+
+      // Change some android configs in the main patch
       const androidOldMainPathRegex = new RegExp('/android/app/src/main/java/com/SplashScreenPatch/MainActivity.java', 'g')
       const androidNewMainPath = `/android/app/src/main/java/com/${name.toLowerCase()}/MainActivity.java`
       const androidPatch = patch.replace(androidOldMainPathRegex, androidNewMainPath)
+
+      // Replace placeholder name with this projects actual name
       const patchForNewProject = androidPatch.replace(/SplashScreenPatch/g, name)
+      const iphoneXPatchForNewProject = iphoneXPatch.replace(/SplashScreenPatch/g, name)
       filesystem.write(patchPath, patchForNewProject)
-      spinner.text = `▸ setting up splash screen: cleaning`
+      filesystem.write(iphoneXPatchPath, iphoneXPatchForNewProject)
+
+      // Apply the patches
       await system.run(`git apply ${patchPath}`, { stdio: 'ignore' })
+      await system.run(`git apply ${iphoneXPatchPath}`, { stdio: 'ignore' })
+
+      // Cleanup
+      spinner.text = `▸ setting up splash screen: cleaning`
       filesystem.remove(`${process.cwd()}/patches/splash-screen`)
     }
     await patchSplashScreen()

boilerplate/README.md

@@ -127,6 +127,14 @@ This directory will hold your Jest configs and mocks, as well as your [storyshot
 **ignite**
 The `ignite` directory stores all things Ignite, including CLI and boilerplate items. Here you will find generators, plugins and examples to help you get started with React Native.
 
+## Running Storybook
+From the command line in your generated app's root directory, enter `yarn run storybook`
+This starts up the storybook server.
+
+In `src/app/main.tsx`, change `SHOW_STORYBOOK` to `true` and reload the app.
+
+For Visual Studio Code users, there is a handy extension that makes it easy to load Storybook use cases into a running emulator via tapping on items in the editor sidebar. Install the `React Native Storybook` extension by `Orta`, hit `cmd + shift + P` and select "Reconnect Storybook to VSCode". Expand the STORYBOOK section in the sidebar to see all use cases for components that have `.story.tsx` files in their directories.
+
 ## Previous Boilerplates
 
 * [2017 aka Andross](https://github.com/infinitered/ignite-ir-boilerplate-andross)

boilerplate/package.json.ejs

@@ -29,9 +29,9 @@
     "react-native-i18n": "2.0.12",
     "react-native-keychain": "3.0.0-rc.3",
     "react-native-splash-screen": "3.0.6",
-    "react-navigation": "2.0.4",
-    "reactotron-mst": "2.0.0-beta.2",
-    "reactotron-react-native": "2.0.0-beta.2",
+    "react-navigation": "2.3.1",
+    "reactotron-mst": "2.1.0",
+    "reactotron-react-native": "2.1.0",
     "validate.js": "0.12.0"
   },
   "devDependencies": {
@@ -41,7 +41,7 @@
     "@types/ramda": "0.25.28",
     "@types/react": "16.0.40",
     "@types/react-native": "0.55.12",
-    "@types/react-navigation": "1.5.2",
+    "@types/react-navigation": "2.0.6",
     "@types/react-test-renderer": "16.0.1",
     "@types/validate.js": "0.11.0",
     "babel-plugin-transform-inline-environment-variables": "0.4.1",
@@ -61,7 +61,13 @@
     "typescript": "2.8.3"
   },
   "jest": {
-    "preset": "jest-preset-ignite"
+    "preset": "jest-preset-ignite",
+    "testPathIgnorePatterns": [
+      "/node_modules"
+    ],
+    "globals": {
+      "__TEST__": true
+    }
   },
   "rnpm": {
     "assets": [

boilerplate/src/app/setup-root-store.ts

@@ -23,10 +23,13 @@ export async function setupRootStore() {
     // load data from storage
     data = (await storage.load(ROOT_STATE_STORAGE_KEY)) || {}
     rootStore = RootStoreModel.create(data, env)
-  } catch {
+  } catch(e) {
     // if there's any problems loading, then let's at least fallback to an empty state
     // instead of crashing.
     rootStore = RootStoreModel.create({}, env)
+
+    // but please inform us what happened
+    __DEV__ && console.tron.error(e.message, null)
   }
 
   // reactotron logging

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/navigation/navigation-events.ts

@@ -9,7 +9,7 @@ import { EventType, NavigationEventCallback } from "react-navigation"
  */
 export const NavigationEvents = types.model("NavigationEvents").volatile(self => {
   // who is currently subscribed to react-navigation events
-  const subs = new Set()
+  const subs = new Set<NavigationEventCallback>()
 
   /**
    * Fires after we change our state.  You call this from the dispatch
@@ -52,5 +52,5 @@ export const NavigationEvents = types.model("NavigationEvents").volatile(self =>
     }
   }
 
-  return { addListener, fireSubscribers }
+  return { addListener, fireSubscribers, subs}
 })

boilerplate/src/navigation/navigation-store.ts

@@ -30,6 +30,14 @@ export const NavigationStoreModel = NavigationEvents.named("NavigationStore")
     state: types.optional(types.frozen, DEFAULT_STATE),
   })
   .actions(self => ({
+
+    /**
+     * Return all subscribers 
+     */
+    actionSubscribers(){
+      return self.subs
+    },
+
     /**
      * Fires when navigation happens.
      *

boilerplate/src/navigation/stateful-navigator.tsx

@@ -1,5 +1,7 @@
 import * as React from "react"
 import { inject, observer } from "mobx-react"
+// @ts-ignore: until they update @type/react-navigation
+import { getNavigation, NavigationScreenProp, NavigationState } from "react-navigation"
 import { RootNavigator } from "./root-navigator"
 import { NavigationStore } from "./navigation-store"
 
@@ -10,17 +12,26 @@ interface StatefulNavigatorProps {
 @inject("navigationStore")
 @observer
 export class StatefulNavigator extends React.Component<StatefulNavigatorProps, {}> {
+  currentNavProp: NavigationScreenProp<NavigationState>
+
+  getCurrentNavigation = () => {
+    return this.currentNavProp
+  }
+
   render() {
     // grab our state & dispatch from our navigation store
-    const { state, dispatch, addListener } = this.props.navigationStore
+    const { state, dispatch, actionSubscribers } = this.props.navigationStore
 
     // create a custom navigation implementation
-    const navigation = {
-      dispatch,
+    this.currentNavProp = getNavigation(
+      RootNavigator.router,
       state,
-      addListener,
-    }
+      dispatch,
+      actionSubscribers(),
+      {},
+      this.getCurrentNavigation,
+    )
 
-    return <RootNavigator navigation={navigation} />
+    return <RootNavigator navigation={this.currentNavProp} />
   }
 }

boilerplate/src/services/api/api-config.ts

@@ -19,6 +19,6 @@ export interface ApiConfig {
  * The default configuration for the app.
  */
 export const DEFAULT_API_CONFIG: ApiConfig = {
-  url: env.API || "https://api.github.com",
+  url: env.API || "https://jsonplaceholder.typicode.com",
   timeout: 10000,
 }

boilerplate/src/services/api/api.ts

@@ -39,17 +39,48 @@ export class Api {
       baseURL: this.config.url,
       timeout: this.config.timeout,
       headers: {
-        Accept: "application/vnd.github.v3+json",
+        Accept: "application/json",
       },
     })
   }
 
   /**
-   * Gets a list of repos.
+   * Gets a list of users.
    */
-  async getRepo(repo: string): Promise<Types.GetRepoResult> {
+  async getUsers(): Promise<Types.GetUsersResult> {
     // make the api call
-    const response: ApiResponse<any> = await this.apisauce.get(`/repos/${repo}`)
+    const response: ApiResponse<any> = await this.apisauce.get(`/users`)
+
+    // the typical ways to die when calling an api
+    if (!response.ok) {
+      const problem = getGeneralApiProblem(response)
+      if (problem) return problem
+    }
+
+    const convertUser = raw => {
+      return {
+        id: raw.id,
+        name: raw.name,
+      }
+    }
+
+    // transform the data into the format we are expecting
+    try {
+      const rawUsers = response.data
+      const resultUsers: Types.User[] = rawUsers.map(convertUser)
+      return { kind: "ok", users: resultUsers }
+    } catch {
+      return { kind: "bad-data" }
+    }
+  }
+
+  /**
+   * Gets a single user by ID
+   */
+
+  async getUser(id: string): Promise<Types.GetUserResult> {
+    // make the api call
+    const response: ApiResponse<any> = await this.apisauce.get(`/users/${id}`)
 
     // the typical ways to die when calling an api
     if (!response.ok) {
@@ -59,12 +90,11 @@ export class Api {
 
     // transform the data into the format we are expecting
     try {
-      const resultRepo: Types.Repo = {
+      const resultUser: Types.User = {
         id: response.data.id,
         name: response.data.name,
-        owner: response.data.owner.login,
       }
-      return { kind: "ok", repo: resultRepo }
+      return { kind: "ok", user: resultUser }
     } catch {
       return { kind: "bad-data" }
     }

boilerplate/src/services/api/api.types.ts

@@ -1,9 +1,9 @@
 import { GeneralApiProblem } from "./api-problem"
 
-export interface Repo {
+export interface User {
   id: number
   name: string
-  owner: string
 }
 
-export type GetRepoResult = { kind: "ok"; repo: Repo } | GeneralApiProblem
+export type GetUsersResult = { kind: "ok"; users: User[] } | GeneralApiProblem
+export type GetUserResult = { kind: "ok"; user: User } | GeneralApiProblem

boilerplate/src/services/reactotron/reactotron.ts

@@ -57,7 +57,6 @@ export class Reactotron {
     this.config = {
       host: "localhost",
       useAsyncStorage: true,
-      clearOnLoad: true,
       ...config,
       state: {
         initial: false,

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/example/second-example-screen/second-example-screen.tsx

@@ -109,7 +109,7 @@ export class SecondExampleScreen extends React.Component<SecondExampleScreenProp
     // Don't do API like this, use store's API
     const demo = new Api()
     demo.setup()
-    demo.getRepo("infinitered/ignite")
+    demo.getUser("1")
     // Let's do some async storage stuff
     await save("Cool Name", "Boaty McBoatface")
   }
@@ -138,7 +138,7 @@ export class SecondExampleScreen extends React.Component<SecondExampleScreenProp
                 textStyle={DEMO_TEXT}
                 tx="secondExampleScreen.reactotron"
                 onPress={this.demoReactotron}
-                />
+              />
             </View>
             <Image source={logoIgnite} style={IGNITE} />
             <View style={LOVE_WRAPPER}>