infinitered/ignite-bowser

Bowser is now re-integrated into Ignite CLI! Head to https://github.com/infinitered/ignite to check it out.

Why is this archived?

We really appreciate all the community support in the years since we first released ignite-bowser. Our focus has shifted to the latest version of Ignite, which includes the latest version of our boilerplate. Feel free to fork this library and continue on its legacy if you want.

NOTE: This repo has been renamed from ignite-ir-boilerplate-bowser to ignite-bowser. Although web traffic and git operations for the previous name will be redirected, we recommend you update any links and git urls for this repo.

Ignite Bowser - the hottest React Native boilerplate

Infinite Red's latest and greatest React Native boilerplate

Important note: Bowser is now re-integrated into Ignite CLI as of version 4.0.0! Head to https://github.com/infinitered/ignite to check it out. This version will continue to work on Ignite 3.x and be supported by the community.

Once you've installed React Native and the Ignite CLI, you can get started with this boilerplate.

This is the boilerplate that the Infinite Red team recommends and uses on a day-to-day basis. Prior art includes Ignite Andross.

Includes:

• React Native
• React Navigation 5
• MobX State Tree (Why MST?)
• TypeScript
• Reactotron (requires 2.x)
• And more!

To see it in action, check out the blog post by Robin Heinze here: Creating a Trivia App with Ignite Bowser.

You can also watch a live coding demo at React Live Amsterdam, where Jamon Holmgren codes an Ignite Bowser app in less than 30 minutes.

Quick Start

Prerequisites:

• For classic React Native: install the React Native CLI -- choose React Native CLI
• For Expo: install the Expo CLI -- choose Expo CLI
  • Note: Expo support is experimental.

First, install Ignite CLI globally:

npm install -g ignite-cli@3
# or
yarn global add ignite-cli@3

Note: Make sure you have CocoaPods installed because otherwise, React Native installation will fail.

Then spin up a new Bowser-powered React Native app:

ignite new MyApp -b bowser

cd into your new app and run react-native run-ios or react-native run-android (note: in Android, you'll need an Android emulator running or an Android phone attached).

You should see an app that looks like the screenshot above!

Next step -- follow this tutorial to learn how to create a trivia app with Ignite Bowser: https://shift.infinite.red/creating-a-trivia-app-with-ignite-bowser-part-1-1987cc6e93a1

Generators

The true gem of Ignite Bowser. Generators help you scaffold your app very quickly, be it for a proof-of-concept, a demo, or a production app. Generators are there to save you time, keep your code consistent, and help you with the basic structure of your app.

ignite generate

Will give you information on what generators are present.

Component generator

This is the generator you will be using most often. There are two flavors:

• Wrapped with mobx-react-lite's observer function - you need this if you pass any mobx-state-tree objects as props to the component, and the component will dereference properties of those objects.
• Plain, not wrapped with observer. If you're only passing plain values or non-MST objects, this is fine.

ignite generate component awesome-component

• Creates the component/function
• Creates a style file
• Creates a storybook test
• Will make the required additions to configuration files.

You can also bypass the choice by providing which component type you want to create:

ignite generate component awesome-component --function-component

Or

ignite generate component awesome-component --stateless-function

Screen generator

Generates a "hooks enabled" screen.

ignite generate screen awesome-screen

• Creates the screen

Model generator

Creates a Mobx-State-Tree model.

ignite generate model awesome-model

• Creates the model
• Creates a unit test file
• Will make the required additions to configuration files.

Advanced

The built-in generators aren't enough? Fret not, you can create your own generators that suit your project/company. These generators can live with the default ignite-bowser generators.

Please refer to the documentation on how to create your own generators.

Explanation of folder structure

The Ignite Bowser boilerplate project's structure will look similar to this:

ignite-project
├── app
│   ├── components
│   ├── i18n
│   ├── models
│   ├── navigation
│   ├── screens
│   ├── services
│   ├── theme
│   ├── utils
│   ├── app.tsx
│   ├── environment-variables.ts
|   ├── assets/fonts/
├── storybook
│   ├── views
│   ├── index.ts
│   ├── storybook-registry.ts
│   ├── storybook.ts
├── test
│   ├── __snapshots__
│   ├── storyshots.test.ts.snap
│   ├── mock-i18n.ts
│   ├── mock-reactotron.ts
│   ├── setup.ts
│   ├── storyshots.test.ts
├── README.md
├── android
├── ignite
│   ├── ignite.json
│   └── plugins
├── index.js
├── ios
└── package.json

./app directory

Included in an Ignite boilerplate project is the app directory. This is a directory you would normally have to create when using vanilla React Native.

The inside of the app directory looks similar to the following:

app
│── components
│── i18n
├── models
├── navigation
├── screens
├── services
├── theme
├── utils
├── app.tsx

components This is where your React dumb components will live. Each component will have a directory containing the .tsx file, along with a story file, and optionally .presets and .props files for larger components. The app will come with some commonly used components like Button.

i18n This is where your translations will live if you are using react-native-i18n.

models This is where your app's models will live. Each model has a directory that will contain the mobx-state-tree model file, test file, and any other supporting files like actions, types, etc. There's also an extensions directory with useful shared extensions that you can include in your models like .extend(withRootStore) or .extend(withEnvironment) to access the root store or environment, respectively.

navigation This is where your react-navigation navigators will live.

For a walkthrough about how React Navigation v5 works, check out Harris Robin's post: Getting Started with the New React Navigation v5 and Ignite Bowser v5.

screens This is where your screen components will live. A screen is a React component that will take up the entire screen and be part of the navigation hierarchy. Each screen will have a directory containing the .tsx file, along with any assets or other helper files.

services Any services that interface with the outside world will live here (think REST APIs, Push Notifications, etc.).

theme Here lives the theme for your application, including spacing, colors, and typography. For help with adding custom fonts to your application, check out the readme in ./assets/fonts/.

utils This is a great place to put miscellaneous helpers and utilities. Things like date helpers, formatters, etc. are often found here. However, it should only be used for things that are truly shared across your application. If a helper or utility is only used by a specific component or model, consider co-locating your helper with that component or model.

app.tsx This is the entry point to your app. This is where you will find the main App component, which renders the rest of the application. This is also where you will specify whether you want to run the app in storybook mode.

./ignite directory

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.

./storybook directory

This is where your stories will be registered and where the Storybook configs will live.

./test directory

This directory will hold your Jest configs and mocks, as well as your storyshots test file. This is a file that contains the snapshots of all your component storybooks.

About The Stack

Why this stack?

If you've used Ignite Andross (the first Ignite stack), you know we formerly used Redux for state management, as does much of the community. However, we encountered some pain points with Redux so we went in search of a different solution to meet our needs and landed on mobx-state-tree. We find that it’s a great middle-ground between completely structured (like redux) and completely freestyle (like mobx). It brings more than just state-management to the table as well (such as dependency injection, serialization, and lifecycle events).

Some Highlights of MST

MST is...

• Intuitive
  • With concepts like props and actions, it feels familiar for React developers
  • Updating your data means calling functions on objects, rather than dispatching actions.
  • Feels similar to relational databases, with concepts like identifiers (primary keys), references (foreign keys), and views (calculated fields)
• Streamlined
  • No more actionTypes, actionCreators, or reducers
  • You don't have to declare your usage intentions with mapStateToProps; they are inferred
  • Side-effects are built-in; no need for 3rd party libraries like redux-saga, redux-observable, or redux-thunk
  • Immutability is built-in - no need for immutable.js or seamless-immutable
  • types.compose and model.extend allow for easy code-sharing of common patterns
• More than state management
  • Lifecycle hooks like afterCreate, preProcessSnapshot, and beforeDestroy let you have control over your data at various points in its lifecycle
  • Dependency injection with getEnv allows you to reference your environment (like API or other services)
• Performant
  • Round-trip store writes are much faster
  • Computed values (views) are only calculated when needed
  • mobx-react-lite makes React "MobX-aware" and only re-renders when absolutely necessary
• Customizable
  • MST ships with pre-built middlewares, including one which allows for Redux interoperability. These middlewares can also serve as examples to create your own!

Downsides

We also recognize no state management solution is perfect. MST has some known downfalls:

• Integration with TypeScript is clunky at times. MST's own typing system is sometimes at odds with what TypeScript wants
• mobx and mobx-state-tree both seem to have "magic" or "sorcery" that makes issues less straightforward to debug because you don't always have a clear picture of what's happening (but using Reactotron, which has mobx-state-tree support built-in, helps a lot). The MobX docs can also help illumitate some of the magic.
• The user base is small, so finding help on GitHub or Stack overflow is less convenient (however, the Infinite Red Slack Community, as well as the MobX State Tree Spectrum channel are both very helpful)
• Fatal errors are sometimes too-easily triggered, and error messages can be verbose and hard to grok
• The API has a large surface area and, the docs tend to be technical and unfriendly

Learning MobX State Tree

MobX and MobX State Tree can be a lot to learn if you're coming from Redux, so here are a few of our favorite resources to learn the basics:

• Be sure to check out the official Getting Started guide for MobX State Tree.

• There is also a free egghead.io course.

• For a great explanation and walkthrough of the basics, check out State Management with MobX State Tree by React Native Training.

• And for more in-depth reading, the official documentation is a great resource.

• The official docs for MobX are another important resource since MST is built on MobX.

• For help from real people in the community, make sure to check out the Infinite Red Community Slack as well as the MobX State Tree spectrum channel.

• To see example codebases using Bowser (and MST), check out these repositories:

• https://github.com/jamonholmgren/PlayerPopularity (simple implementation)

• https://github.com/jamonholmgren/TrailBlazers (simple implementation with hooks)

• https://github.com/infinitered/ChainReactApp2019 (more in-depth implementation)

Upgrade

To keep your React Native app updated:

• React Native Upgrade Helper great web-based tool
• rn-diff-purge

To keep your Ignite Bowser based app updated:

• ignite-bowser-diff-purge To help you see the diffs between versions

TypeScript

In addition to redux --> mobx-state-tree, we've also transitioned to using TypeScript vs plain JavaScript. We find that TypeScript streamlines the developer experience by catching errors before you hit refresh on that simulator and prevents costly bugs by enforcing type safety.

In Bowser, TypeScript is fully set up, so if you know TS, all you need to do is start coding!

Resources

If you are new to TypeScript, here are some of our favorite resources:

• TypeScript in 5 minutes for a quick read
• TypeScript in 50 minutes for a longer watch
• Execute Program -- TypeScript course -- free course by Gary Bernhardt
• TypeScript and VSCode for awesome developer tools
• Official Docs

Previous Boilerplates

• 2017 aka Andross
• 2016 aka Ignite 1.0

Contribute

Contribute to Ignite Bowser - Getting up and running for your first pull request

Bowser is now re-integrated into Ignite CLI as of version 4.0.0! Head to https://github.com/infinitered/ignite to check it out. This version will continue to work on Ignite 3.x and be supported by the community.

ignite-bowser's Issues

Hot reloading on storybook is not working

• Hot reloading on storybook is not working (It works fine on the app)

NavigationStore Deserialization Safety Commission (NDSC)

If you apply this to your NavigationStore it ensures that react-navigation is ok with the data it is about to receive.

  /**
   * When we are assigned a new snapshot.
   */
  .preProcessSnapshot(snapshot => {
    // only if we have a valid .state to check
    if (!snapshot || !Boolean(snapshot.state)) return snapshot

    try {
      // will react-navigation be ok?
      RootNavigator.router.getPathAndParamsForState(snapshot.state)
      // snapshot is valid, let's go.
      return snapshot
    } catch (e) {
      // fallback to initial state
      return { ...snapshot, state: DEFAULT_STATE }
    }
  })

Caveat: this is from a project that's on mobx-state-tree@2 and an older react-navigation.

@kevinvangelder was asking about this in our Slack and mentioned it might be a good fit for including in bowser.

This scenario can happen when you change your react-navigation structure and try to throw the old serialized version of it into. (ie. you just did an upgrade and changed some keys around).

Instead of crashing, this will reset back to a DEFAULT_STATE. Here's an example of what DEFAULT_STATE might look like at the top of the NavigationStore.

/**
 * The initial state of `react-navigation` as defined in the root navigator.
 */
const INITIAL_STATE = getStateForAction(NavigationActions.init(), null)

/**
 * Control the starting state by showing the login navigator.
 */
const DEFAULT_STATE = getStateForAction(
  NavigationActions.navigate({ routeName: "loginNavigator" }),
  INITIAL_STATE,
)

Let's work this in somehow, but in the meantime, leaving this here until we do.

Provide way to clear Navigation Store

Changing keys in the navigation causes a redbox error because the NavigationStore expects the old key to be present.

Addon Storyshots failing from npm install in fresh install

Hi!

I'm getting this error. It solves when I removed the line about storyshots.

npm ERR! prepareGitDep 1> 
npm ERR! prepareGitDep > [email protected] postinstall /home/ismael/.npm/_cacache/tmp/git-clone-0459d72a/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
npm ERR! prepareGitDep > node lib/post_install.js
npm ERR! prepareGitDep 
npm ERR! prepareGitDep 
npm ERR! prepareGitDep > @storybook/[email protected] prepare /home/ismael/.npm/_cacache/tmp/git-clone-0459d72a
npm ERR! prepareGitDep > node ../../scripts/prepare.js
npm ERR! prepareGitDep 
npm ERR! prepareGitDep 
npm ERR! prepareGitDep 2> npm WARN install Usage of the `--dev` option is deprecated. Use `--only=dev` instead.
npm ERR! prepareGitDep npm WARN deprecated [email protected]: This method has been renamed to "flat" - please use `array.prototype.flat` instead
npm ERR! prepareGitDep npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm ERR! prepareGitDep npm WARN deprecated [email protected]: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.
npm ERR! prepareGitDep module.js:540
npm ERR! prepareGitDep     throw err;
npm ERR! prepareGitDep     ^
npm ERR! prepareGitDep 
npm ERR! prepareGitDep Error: Cannot find module '/home/ismael/.npm/_cacache/scripts/prepare.js'
npm ERR! prepareGitDep     at Function.Module._resolveFilename (module.js:538:15)
npm ERR! prepareGitDep     at Function.Module._load (module.js:468:25)
npm ERR! prepareGitDep     at Function.Module.runMain (module.js:684:10)
npm ERR! prepareGitDep     at startup (bootstrap_node.js:187:16)
npm ERR! prepareGitDep     at bootstrap_node.js:608:3
npm ERR! prepareGitDep npm ERR! code ELIFECYCLE
npm ERR! prepareGitDep npm ERR! errno 1
npm ERR! prepareGitDep npm ERR! @storybook/[email protected] prepare: `node ../../scripts/prepare.js`
npm ERR! prepareGitDep npm ERR! Exit status 1
npm ERR! prepareGitDep npm ERR! 
npm ERR! prepareGitDep npm ERR! Failed at the @storybook/[email protected] prepare script.
npm ERR! prepareGitDep npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! prepareGitDep 
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR!     /home/ismael/.npm/_logs/2018-08-30T15_51_33_877Z-debug.log
npm ERR! prepareGitDep 
npm ERR! code ENOPACKAGEJSON
npm ERR! package.json Non-registry package missing package.json: @storybook/addon-storyshots@github:infinitered/addon-storyshots.
npm ERR! package.json npm can't find a package.json file in your current directory.

Thanks!!

Add command line argument for "No domain"

When using the model generator, the user is given the option to choose a domain for their model. This lists all of the existing folders under src/models.

This pattern is great if the user is grouping their models into application "domains" corresponding to logical business logic categories (ex: users, posts, newsfeed, etc.).

However, if the user isn't strictly following the "domain" pattern, each time they generate a model, they have to scroll through to find the "Create New" option.

It would be nice to offer a command line argument for --no-domain, which simply creates the new model in its own directory, and skips the domain selection process altogether.

Configure Reactotron in Storybook

Pretty simple, just add three lines to the Storybook.tsx file:

+ import { Reactotron } from "../src/services/reactotron"
...
// RN hot module must be in a class for HMR
export class StorybookUIRoot extends React.Component {
  render() {
    SplashScreen.hide()
+    const reactotron = new Reactotron()
+    reactotron.setup()
    return <StorybookUI />
  }
}

Unless @skellock or @GantMan can think of a good reason not to do this?

How to upgrade and should i ?

First of all, Should i upgrade ? i am a man who always upgrade projects. Yet it looks like nobody cares about upgrading React Native itself on ignite. 0.55.4 is 7 month old tech and between latest realease there has 1232 commits. Yet i dont know if it is already enough one ?

Stuck on Splash Screen when running 'react-native run-ios'

Create a new app with:
ignite new MyApp

Run with:
react-native run-ios

App launches but is stuck on the splash screen:

Update gitignore to exclude `ios/Pods`

The boilerplate gitignore could use some improvements. Ignoring Pods is the biggest one but there are probably some other artifacts we're currently missing.

Allow Style Arrays in HOCs

For example, in text.props.ts change style?: TextStyle to style?: TextStyle | TextStyle[]

Multiple errors on the code generated by generate screen command

---

What's going on?
Multiple errors on the code generated by the CLI.

ignite generate screen login

Executing above command generate following,
ignite-project > src > views > account > login
-----------------------------------------------├── index.ts
-----------------------------------------------├── login-screen.tsx

Generated Files

index.ts

export * from "./login"

Error: Cannot find module './login'

Fix: Correct path

export * from "./login-screen"

login-screen.tsx

import * as React from "react"
import { Text } from "../../shared/text"
import { NavigationScreenProps } from "react-navigation"
import { Screen } from "../../shared/screen"

export interface Login extends NavigationScreenProps<{}> {
}

// @inject("mobxstuff")
@observer
export class Login extends React.Component<RegisterScreenProps, {}> {
  render () {
    return (
      <Screen preset="fixedCenter">
        <Text preset="header" tx="Login.header" />
      </Screen>
    )
  }
}

`
Errors:

1. Cannot find name 'observer'

Fix: include missed import

import { observer } from "mobx-react";

2. Cannot find name 'RegisterScreenProps'

Fix: Rename interface Login to LoginScreenProps and replace 'RegisterScreenProps' with the same.

Modified files

root-navigator.ts

import { StackNavigator } from "react-navigation"
import Login from "../views/account/login/login-screen"
import { ExampleNavigator } from "./example-navigator"

export const RootNavigator = StackNavigator(
  {
    LoginNavigator: { screen: Login },
    exampleStack: { screen: ExampleNavigator },
  },
  {
    headerMode: "none",
    navigationOptions: { gesturesEnabled: false },
  },
)

Error:

Module 'path\to\login-screen' has no default export.

Fix: replace

import Login from "../views/account/login/login-screen"

with

import { Login} from "../views/account/login/login-screen"

---

Steps to reproduce

$ ignite new PizzaApp
  ( Choose `Bowser (alpha)` when prompted )
$ cd PizzaApp
(create a folder named account under views)
$ ignite generate screen login
( Choose `account` domain when prompted. )

---

ignite doctor results:
System
platform win32

arch x64

cpu 8 cores
Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
directory C:\Abhith\Workspaces\Piggy\React Native\Code\v6\piggy-react-native

JavaScript
node 9.4.0 C:\Program Files\nodejs\node.EXE
npm 5.6.0 C:\Program Files\nodejs\npm.CMD
yarn 1.5.1 C:\Users\abhit\AppData\Roaming\npm\yarn.CMD

React Native
react-native-cli 2.0.1
app rn version 0.55.1

Ignite
ignite 2.1.0 C:\Users\abhit\AppData\Roaming\npm\ignite.CMD

Android
java - C:\Program Files (x86)\Common Files\Oracle\Java\javapath\java.EXE
android home - undefined

React Navigation 2.x breaks while using createSwitchNavigator or SwitchNavigator

Reproduction steps:

change createStackNavigator to SwitchNavigator

Some novice feedback

Hi there

First of all thanks for the boilerplate! It looks like it's shaping up nicely :)

I'm fairly new to RN (and didn't code in a while), so I thought some feedback on how the boilerplate looks through the eyes of a novice may be helpful. So here we go:

• The stores, store models and the level of indirections with type export are really confusing to me. For now, I just decided to ignore them until further notice.
• I don't understand why we have stores, then services, and then the environment class. That feels a bit like a mixup to me. (I did just do MobX in my last project and had a vanilla root store that exposed all the other stores - I can look at that code and understand it very quickly, yours is a different beast :).
• Navigation with the store and the classes in the navigation folder is similar and feels somewhat overengineered (or YAGNI) to me. I used to just have a NavigationStore where I had everything related to navigation and it did the job just fine.
• Colors: I don't understand why both colors and palette are exposed (and used!). The semantic color constant seems to be the right (and exclusive way to go).
• Spacing: I don't understand why you would go for something like spaceing[3] all over the code when you could do spacing.medium which is readable and self-documenting. You even have that in the comments of the class.

I'm looking forward to see how this develops. Cheers!

Add feedback for screen generator naming

It's not obvious that -screen suffix is optional when using the screen generator. If the user includes screen in their command (e.g. ignite generate screen home-screen), we should helpfully let them know that they don't need it next time.

$ ignite g screen HomeScreen
Generating HomeScreen
(Note: you can just do `ignite g screen Home` -- we'll add the Screen to the end)

Splash Screens

This new boilerplate is nice and is going better and better, I think one of the biggest missing items is SplashScreen for both Android and iOS, as splashes are almost the same, it could be very nice to have them at start.

Swap out Github example API for https://jsonplaceholder.typicode.com/

Github has a really great, robust REST API.

However, it doesn't feel like it makes the most ideal example API for Ignite.

• repos aren't super relatable as a data type, compared to, say, users
• It has some custom configuration, like it's custom Content-Type: application/vnd.github.v3+json which can be confusing if you're trying to transform our example into your own API service .

I'm proposing switching the sample API to https://jsonplaceholder.typicode.com/, which is designed to be a sample, and supports straight REST endpoints for data types like users, todos, posts and other familiar example concepts.

SplashScreen needs to be hidden when running StoryBook UI

Hello, me again.

As a follow on from #48, I noticed that when you run storybook the splash screen wasn't hiding - and therefore there weren't any stories.

I quick-and-dirty-fixed-it ™️ by doing this to storybook.tsx:

import React from 'react'
import { getStorybookUI, configure } from "@storybook/react-native"
import SplashScreen from 'react-native-splash-screen' <= added this

configure(() => {
  require("./storybook-registry")
})

const StorybookUI = getStorybookUI({ port: 9001, host: localhost, onDeviceUI: true })

// RN hot module must be in a class for HMR
export class StorybookUIRoot extends React.Component {
  render() {
    SplashScreen.hide() <= and this
    return <StorybookUI />
  }
}

Thought I'd just log it so you were aware.

Cannot find entry file index.js in any of the roots

Hi,

I'm getting an exception on react-native run-android
while the index.js exists in the root of the project

Metro Bundler ready.

Loading dependency graph, done.
error: bundling failed: NotFoundError: Cannot find entry file index.js in any of the roots: ["c:\\Workspace\\Mobile\\PizzaApp"]
    at DependencyGraph.getAbsolutePath (c:\Workspace\Mobile\PizzaApp\node_modules\metro\src\node-haste\DependencyGraph.js:317:11)
    at c:\Workspace\Mobile\PizzaApp\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:280:416
    at Generator.next (<anonymous>)
    at step (c:\Workspace\Mobile\PizzaApp\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:11:445)
    at c:\Workspace\Mobile\PizzaApp\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:11:605
    at process._tickCallback (internal/process/next_tick.js:68:7)
 BUNDLE  [android, dev] ./index.js ░░░░░░░░░░░░░░░░ 0.0% (0/1), failed.

Steps to reproduce

1. ignite new PizzaApp ( choose bowser )
2. cd to dir & npm install

......
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN [email protected] requires a peer of eslint@^3.17.0 || ^4.0.0 but none is installed. You must install peer dependencies yourself.
npm WARN [email protected] requires a peer of jest@^22.4.2 but none is installed. You must install peer dependencies yourself.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

added 506 packages from 564 contributors, removed 136 packages, updated 1673 packages and audited 49549 packages in 192.102s
found 3 vulnerabilities (2 low, 1 high)
  run `npm audit fix` to fix them, or `npm audit` for details

npm audit

  High            Denial of Service                                        
                                                                           
  Package         ws                                                       
                                                                           
  Patched in      >= 1.1.5 <2.0.0 || >=3.3.1                               
                                                                           
  Dependency of   react-native                                             
                                                                           
  Path            react-native > react-devtools-core > ws                  
                                                                           
  More info       https://nodesecurity.io/advisories/550                   
                                                                           
                                                                           
  Low             Prototype Pollution                                      
                                                                           
  Package         lodash                                                   
                                                                           
  Patched in      >=4.17.5                                                 
                                                                           
  Dependency of   react-native                                             
                                                                           
  Path            react-native > plist > xmlbuilder > lodash               
                                                                           
  More info       https://nodesecurity.io/advisories/577                   
                                                                           
                                                                           
  Low             Prototype Pollution                                      
                                                                           
  Package         lodash                                                   
                                                                           
  Patched in      >=4.17.5                                                 
                                                                           
  Dependency of   solidarity                                               
                                                                           
  Path            solidarity > gluegun > cli-table2 > lodash               
                                                                           
  More info       https://nodesecurity.io/advisories/577                   
                                                                           
found 3 vulnerabilities (2 low, 1 high) in 49549 scanned packages          
  3 vulnerabilities require manual review. See the full report for details.

Please advise,
Thanks

`ignite new` Error: Template not found

When running ignite new AppName with the 'Bowser' template, the following error messages appears.

🍹 Short and sweet:

Error: template not found /templates/examples/Styles/RowExample.js.ejs
Error: template not found /templates/examples/Styles/RowExampleStyle.js.ejs
Error: template not found /templates/examples/GridExample.js.ejs
Error: template not found /templates/examples/Styles/GridExampleStyle.js.ejs
Error: template not found /templates/examples/SectionExample.js.ejs
Error: template not found /templates/examples/Styles/SectionExampleStyle.js.ejs

🥃 Long and dry:

 igniting app CatGameApp
(node:2454) ExperimentalWarning: The fs.promises API is experimental
? Which boilerplate would you like to use? Bowser (alpha) (React Navigation, MobX State Tree, & TypeScript)
⠋ adding ignite-ir-boilerplate-bowser(node:2457) ExperimentalWarning: The fs.promises API is experimental
✔ using the Infinite Red boilerplate v3 (code name 'Bowser')
✔ added React Native 0.55.1 in 15.11s
⠋ adding ignite-ir-boilerplate-bowser(node:2482) ExperimentalWarning: The fs.promises API is experimental
✔ added ignite-ir-boilerplate-bowser in 24.7s
(node:2482) UnhandledPromiseRejectionWarning: Error: template not found /Users/aj/Projects/CatGameApp/CatGameApp/node_modules/ignite-ir-boilerplate-bowser/templates/examples/RowExample.js.ejs
    at Object.generate (/usr/local/lib/node_modules/ignite-cli/node_modules/gluegun/src/core-extensions/template-extension.js:51:13)
    at fileName (/usr/local/lib/node_modules/ignite-cli/src/extensions/ignite/addPluginScreenExamples.js:57:20)
    at _map (/usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/internal/_map.js:6:19)
    at map (/usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/map.js:57:14)
    at /usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/internal/_dispatchable.js:39:15
    at f2 (/usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/internal/_curry2.js:25:16)
    at Object.addPluginScreenExamples (/usr/local/lib/node_modules/ignite-cli/src/extensions/ignite/addPluginScreenExamples.js:45:7)
    at Object.add (/Users/aj/Projects/CatGameApp/CatGameApp/node_modules/ignite-ir-boilerplate-bowser/screenExamples.js:26:24)
    at Object.add (/Users/aj/Projects/CatGameApp/CatGameApp/node_modules/ignite-ir-boilerplate-bowser/plugin.js:9:24)
    at Command.module.exports [as run] (/usr/local/lib/node_modules/ignite-cli/src/commands/add.js:139:28)
(node:2482) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 1)
(node:2482) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated. In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.
(node:2482) UnhandledPromiseRejectionWarning: Error: template not found /Users/aj/Projects/CatGameApp/CatGameApp/node_modules/ignite-ir-boilerplate-bowser/templates/examples/Styles/RowExampleStyle.js.ejs
    at Object.generate (/usr/local/lib/node_modules/ignite-cli/node_modules/gluegun/src/core-extensions/template-extension.js:51:13)
    at fileName (/usr/local/lib/node_modules/ignite-cli/src/extensions/ignite/addPluginScreenExamples.js:57:20)
    at _map (/usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/internal/_map.js:6:19)
    at map (/usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/map.js:57:14)
    at /usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/internal/_dispatchable.js:39:15
    at f2 (/usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/internal/_curry2.js:25:16)
    at Object.addPluginScreenExamples (/usr/local/lib/node_modules/ignite-cli/src/extensions/ignite/addPluginScreenExamples.js:45:7)
    at Object.add (/Users/aj/Projects/CatGameApp/CatGameApp/node_modules/ignite-ir-boilerplate-bowser/screenExamples.js:26:24)
    at Object.add (/Users/aj/Projects/CatGameApp/CatGameApp/node_modules/ignite-ir-boilerplate-bowser/plugin.js:9:24)
    at Command.module.exports [as run] (/usr/local/lib/node_modules/ignite-cli/src/commands/add.js:139:28)
(node:2482) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 2)
(node:2482) UnhandledPromiseRejectionWarning: Error: template not found /Users/aj/Projects/CatGameApp/CatGameApp/node_modules/ignite-ir-boilerplate-bowser/templates/examples/GridExample.js.ejs
    at Object.generate (/usr/local/lib/node_modules/ignite-cli/node_modules/gluegun/src/core-extensions/template-extension.js:51:13)
    at fileName (/usr/local/lib/node_modules/ignite-cli/src/extensions/ignite/addPluginScreenExamples.js:57:20)
    at _map (/usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/internal/_map.js:6:19)
    at map (/usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/map.js:57:14)
    at /usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/internal/_dispatchable.js:39:15
    at f2 (/usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/internal/_curry2.js:25:16)
    at Object.addPluginScreenExamples (/usr/local/lib/node_modules/ignite-cli/src/extensions/ignite/addPluginScreenExamples.js:45:7)
    at Object.add (/Users/aj/Projects/CatGameApp/CatGameApp/node_modules/ignite-ir-boilerplate-bowser/screenExamples.js:26:24)
    at Object.add (/Users/aj/Projects/CatGameApp/CatGameApp/node_modules/ignite-ir-boilerplate-bowser/plugin.js:9:24)
    at Command.module.exports [as run] (/usr/local/lib/node_modules/ignite-cli/src/commands/add.js:139:28)
(node:2482) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 3)
(node:2482) UnhandledPromiseRejectionWarning: Error: template not found /Users/aj/Projects/CatGameApp/CatGameApp/node_modules/ignite-ir-boilerplate-bowser/templates/examples/Styles/GridExampleStyle.js.ejs
    at Object.generate (/usr/local/lib/node_modules/ignite-cli/node_modules/gluegun/src/core-extensions/template-extension.js:51:13)
    at fileName (/usr/local/lib/node_modules/ignite-cli/src/extensions/ignite/addPluginScreenExamples.js:57:20)
    at _map (/usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/internal/_map.js:6:19)
    at map (/usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/map.js:57:14)
    at /usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/internal/_dispatchable.js:39:15
    at f2 (/usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/internal/_curry2.js:25:16)
    at Object.addPluginScreenExamples (/usr/local/lib/node_modules/ignite-cli/src/extensions/ignite/addPluginScreenExamples.js:45:7)
    at Object.add (/Users/aj/Projects/CatGameApp/CatGameApp/node_modules/ignite-ir-boilerplate-bowser/screenExamples.js:26:24)
    at Object.add (/Users/aj/Projects/CatGameApp/CatGameApp/node_modules/ignite-ir-boilerplate-bowser/plugin.js:9:24)
    at Command.module.exports [as run] (/usr/local/lib/node_modules/ignite-cli/src/commands/add.js:139:28)
(node:2482) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 4)
(node:2482) UnhandledPromiseRejectionWarning: Error: template not found /Users/aj/Projects/CatGameApp/CatGameApp/node_modules/ignite-ir-boilerplate-bowser/templates/examples/SectionExample.js.ejs
    at Object.generate (/usr/local/lib/node_modules/ignite-cli/node_modules/gluegun/src/core-extensions/template-extension.js:51:13)
    at fileName (/usr/local/lib/node_modules/ignite-cli/src/extensions/ignite/addPluginScreenExamples.js:57:20)
    at _map (/usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/internal/_map.js:6:19)
    at map (/usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/map.js:57:14)
    at /usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/internal/_dispatchable.js:39:15
    at f2 (/usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/internal/_curry2.js:25:16)
    at Object.addPluginScreenExamples (/usr/local/lib/node_modules/ignite-cli/src/extensions/ignite/addPluginScreenExamples.js:45:7)
    at Object.add (/Users/aj/Projects/CatGameApp/CatGameApp/node_modules/ignite-ir-boilerplate-bowser/screenExamples.js:26:24)
    at Object.add (/Users/aj/Projects/CatGameApp/CatGameApp/node_modules/ignite-ir-boilerplate-bowser/plugin.js:9:24)
    at Command.module.exports [as run] (/usr/local/lib/node_modules/ignite-cli/src/commands/add.js:139:28)
(node:2482) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 5)
(node:2482) UnhandledPromiseRejectionWarning: Error: template not found /Users/aj/Projects/CatGameApp/CatGameApp/node_modules/ignite-ir-boilerplate-bowser/templates/examples/Styles/SectionExampleStyle.js.ejs
    at Object.generate (/usr/local/lib/node_modules/ignite-cli/node_modules/gluegun/src/core-extensions/template-extension.js:51:13)
    at fileName (/usr/local/lib/node_modules/ignite-cli/src/extensions/ignite/addPluginScreenExamples.js:57:20)
    at _map (/usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/internal/_map.js:6:19)
    at map (/usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/map.js:57:14)
    at /usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/internal/_dispatchable.js:39:15
    at f2 (/usr/local/lib/node_modules/ignite-cli/node_modules/ramda/src/internal/_curry2.js:25:16)
    at Object.addPluginScreenExamples (/usr/local/lib/node_modules/ignite-cli/src/extensions/ignite/addPluginScreenExamples.js:45:7)
    at Object.add (/Users/aj/Projects/CatGameApp/CatGameApp/node_modules/ignite-ir-boilerplate-bowser/screenExamples.js:26:24)
    at Object.add (/Users/aj/Projects/CatGameApp/CatGameApp/node_modules/ignite-ir-boilerplate-bowser/plugin.js:9:24)
    at Command.module.exports [as run] (/usr/local/lib/node_modules/ignite-cli/src/commands/add.js:139:28)
(node:2482) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was not handled with .catch(). (rejection id: 6)
✔ configured git
✔ ignited CatGameApp in 41.59s

    Ignite CLI ignited CatGameApp in 41.59s

    To get started:

      cd CatGameApp
      react-native run-ios
      react-native run-android
      ignite --help

    Need additional help? Join our Slack community at http://community.infinite.red.

    Now get cooking! 🍽

Any plan for release date?

Guys we're going to create a new project and I'm absolutely willing to use your boilerplate, but it's at alpha/beta/unknown phase and you know it's a little bit risky to use it at an enterprise project, Do you have any idea about your first stable release?

Update react-native version to latest (0.57.5)

Hey there! Ignite CLI seems to be having a problem, eh?

Welllllll, it just might be. First, search the issues to make sure it's not already
here, and if not head over to http://community.infinite.red to
get some help. If you've identified that it's really an Ignite CLI issue, then:

• Explain what's going on and preferably how to replicate the issue (bonus points for a repro app)
• Run ignite doctor and paste the result below, including the lines with 3 backticks
• Delete these instructions! We don't want to look at them. ;)

---

What's going on?

---

Steps to reproduce

---

ignite doctor results:

Incorporate SafeAreaView into the boilerplate's shared Screen component

In order to better support iPhoneX, we should incorporate SafeAreaView directly into the shared Screen component that we include with the boilerplate.

Sample app is not full screen on iPhone X

As you can see the height of app is not properly for iPhone X

Splash screen patch not working on linux

Reported by @juddey (#48 (comment))

---

Hello,

excuse me jumping on this PR and all that.... I've cloned bowser locally, checked out this branch and run ignite new.

When I name the projects with only lowercase in the name, I can build the project, however when I CamelCase the project name it fails. Heres a picture:

It could be a red herring due to my setup but thought I'd let you know anyway. I'm on ubuntu 16.04 if that makes any difference. ☮️

Add a comment to model template with postProcessSnapshot

Since we moved away from Redux, we no longer have redux persist, so we have a new way of omitting model attributes from async storage and we should make sure users know about it.

Add a comment the model template template with code for using postProcessSnapshot to omit model attributes.

/**
* Un-comment the following to omit model attributes from your snapshots (and from async storage). 
* Useful for sensitive data like passwords, or transitive state like whether a modal is open.

* Note that you'll need to import `omit` from ramda, which is already included in the project!
*  .actions(self => ({
*   postProcessSnapshot: omit(["foo", "bar"]),
* }))
*/

puppeteer is now a dependency

storyshots now has a dependency on puppeteer.

Let's investigate how to shed this.

That's a monster of a dependency we don't want until we're ready.

Storybook UI host set as "localhost" potentially incorrect

Hello again,

Because of the vagaries of android development (and perhaps just because™️) I needed to adjust the following config line in storybook.tsx:

export const StorybookUI = getStorybookUI({ port: 9001, host: "localhost", onDeviceUI: true })

changed to:

export const StorybookUI = getStorybookUI({ port: 9001, host: "10.0.2.2", onDeviceUI: true })

Not sure if this should be here just a note for future googlers or if something more needs to be done.

Fix CI

Seems like semaphore is drunk.

Likely needs to have the node environment upgraded? (I'm guessing)

Also, I've had a few projects that get stale caches. Not quite sure of the fix other than prefixing a task to rm -rf node_modules. 🤷‍♂️

Proposal: combine stores and models under one folder

Problem

Projects with significant numbers of models/stores gets quite cluttered.

Solution

Models and stores can both live in one folder instead of having separate folders. Shared models could live in a shared folder.

Windows - Android SDK version mismatch

Error (somewhat paraphrased): "failed to finalize session package new target sdk 22 doesn't support runtime permissions but the old target sdk 26 does"

(This is in Windows 10)

To fix this, go into the android/app/build.gradle file and change the targetSdkVersion to 23 or greater.

We should fix this in the boilerplate.

Add withRootStore and withEnvironment extensions, and documentation

withRootStore and withEnvironment extensions are useful on store type models for accessing other stores, and the service layer.

We should include them in the boilerplate.

This task should include documenting how to add and use the extensions on your models.

SplashScreen in emulator frozen

What I followed,

-> npm i -g ingite-cli
-> ignite new appname
-> cd appname
-> react-native run-android

This launches my app in the emulator but shows the splashscreen and just stays that way. Can't even launch dev tools in this screen.

How to overwrite the example theme

I am trying to develop based off this Bowser boilerplate, but whenever I try to edit or remove the example file structure, I get an error.

How to reproduce the issue

e.g. Trying to replace the firstExample and secondExample screens
Whenever I try to remove these and add my own screens in example-navigator.ts, I get the error: Error: There is no route defined for key firstExample. Must be one of: .........

e.g. When trying to change the default font, if I remove the default Montserrat font files, I get an error

What I think is going on

The only remaining references to these example files, (i.e. the example screens and the font) are within the node_modules/ignite-ir-boilerplate-bowser/boilerplate/src directory

Could these files be causing it? And if so what should I do?

Many thanks!

Generalize Domain Handling

Right now each generator handles domains itself but they're all doing essentially the same thing. We should move this code somewhere where it can be shared.

SplashScreen Issue for CamelCase project names on Linux

Promised to log this if it happens again.... and its happened again:

In the android/app/src... directory path the project name is lowercase.

Also raised in: #52 (comment)

cc: @leonskim

Add `focus()` forwarding function to TextField HoC

TextInput has a focus function, but calling it on the HoC throws a redbox error. We should add a forwarding function to the default template.

Remove "extras" from generated component

When a user runs the component generator, the resulting component is currently a copy of the shared Button component.

Most generated components won't be as complex as that, so I think we should strip down the generator.

• View wrapping a Text component.
• Props in the .tsx file
• No presets

The shared Button component will still exist in the boilerplate as an example for the occasions where a user needs to make something more complex.

Proposal: MobX State Tree Extensions - withStatus

Problem

Many models have similar or identical status boilerplate.

Solution

Move duplicated model code into withStatus extension.

Example

Extension:

import { IStateTreeNode } from "mobx-state-tree"

/**
 * Adds a status field to the model for tracking api access.
 */
export const withStatus = (self: IStateTreeNode) => {
  let status: "idle" | "pending" | "done" | "error" = "idle"

  return {
    views: {
      /**
       * Gets the api status.
       */
      get status() {
        return status
      },
    },
    actions: {
      /**
       * Set the api status to something new.
       *
       * @param value The new status
       */
      setStatus(value: "idle" | "pending" | "done" | "error") {
        status = value
      },
    },
  }
}

Model:

import { types, flow } from "mobx-state-tree"
import { withStatus } from "../extensions"

export const NameStoreModel = types
  .model("NameStore")
  .props({
    ...
  })
.extend(withStatus)

npm install error with bower

Hi !
Just to be clear, I uninstalled node and npm and installed it again using homebrew.
thats my input from ignite doctor:

System
platform darwin
arch x64
cpu 8 cores Intel(R) Core(TM) i7-4770HQ CPU @ 2.20GHz
directory /Users/elirang/BitTech

JavaScript
node 11.1.0 /usr/local/bin/node
npm 6.4.1 /usr/local/bin/npm
yarn 1.10.1 /usr/local/bin/yarn

React Native
react-native-cli 2.0.1
app rn version 0.55.4

Ignite
ignite 2.1.2 /usr/local/bin/ignite

Android
java 1.8.0_101 /usr/bin/java
android home - /Users/elirang/Library/Android/sdk

iOS
xcode 9.4.1

the issue is that when i'm trying to run npm install i'm getting the following error:

npm ERR! prepareGitDep 1>
npm ERR! prepareGitDep > [email protected] install /Users/elirang/.npm/_cacache/tmp/git-clone-b6766365/node_modules/fsevents
npm ERR! prepareGitDep > node install
npm ERR! prepareGitDep
npm ERR! prepareGitDep [fsevents] Success: "/Users/elirang/.npm/_cacache/tmp/git-clone-b6766365/node_modules/fsevents/lib/binding/Release/node-v59-darwin-x64/fse.node" is installed via remote
npm ERR! prepareGitDep
npm ERR! prepareGitDep > [email protected] postinstall /Users/elirang/.npm/_cacache/tmp/git-clone-b6766365/node_modules/webpack/node_modules/uglifyjs-webpack-plugin
npm ERR! prepareGitDep > node lib/post_install.js
npm ERR! prepareGitDep
npm ERR! prepareGitDep
npm ERR! prepareGitDep > @storybook/[email protected] prepare /Users/elirang/.npm/_cacache/tmp/git-clone-b6766365
npm ERR! prepareGitDep > node ../../scripts/prepare.js
npm ERR! prepareGitDep
npm ERR! prepareGitDep
npm ERR! prepareGitDep 2> npm WARN install Usage of the --dev option is deprecated. Use --only=dev instead.
npm ERR! prepareGitDep npm WARN deprecated [email protected]: This method has been renamed to "flat" - please use array.prototype.flat instead
npm ERR! prepareGitDep module.js:545
npm ERR! prepareGitDep throw err;
npm ERR! prepareGitDep ^
npm ERR! prepareGitDep
npm ERR! prepareGitDep Error: Cannot find module '/Users/elirang/.npm/_cacache/scripts/prepare.js'
npm ERR! prepareGitDep at Function.Module._resolveFilename (module.js:543:15)
npm ERR! prepareGitDep at Function.Module._load (module.js:470:25)
npm ERR! prepareGitDep at Function.Module.runMain (module.js:690:10)
npm ERR! prepareGitDep at startup (bootstrap_node.js:194:16)
npm ERR! prepareGitDep at bootstrap_node.js:666:3
npm ERR! prepareGitDep npm ERR! code ELIFECYCLE
npm ERR! prepareGitDep npm ERR! errno 1
npm ERR! prepareGitDep npm ERR! @storybook/[email protected] prepare: node ../../scripts/prepare.js
npm ERR! prepareGitDep npm ERR! Exit status 1
npm ERR! prepareGitDep npm ERR!
npm ERR! prepareGitDep npm ERR! Failed at the @storybook/[email protected] prepare script.
npm ERR! prepareGitDep npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! prepareGitDep
npm ERR! prepareGitDep npm ERR! A complete log of this run can be found in:
npm ERR! prepareGitDep npm ERR! /Users/elirang/.npm/_logs/2018-11-06T11_09_53_844Z-debug.log
npm ERR! prepareGitDep
npm ERR! code ENOPACKAGEJSON
npm ERR! package.json Non-registry package missing package.json: @storybook/addon-storyshots@github:infinitered/addon-storyshots.
npm ERR! package.json npm can't find a package.json file in your current directory.

the workaround for me is just to use yarn instead of npm :)
I don't know how it happens even after i reinstalled both node and npm..

in addition, if i'm trying to install certain package using npm it also doesn't work.. it deletes many existing packages ..

"Screen" is duplicated in prop interface if user incudes `-screen` suffix

If a user runs the command: ignite generate screen foo-screen, the resulting component has the following props:

export interface FooScreenScreenProps extends NavigationScreenProps<{}> {
}

which have "Screen" duplicated in the props type interface.

The duplication also happens in the class definition:

export class FooScreen extends React.Component<FooScreenScreenProps, {}> {

We just need to remove the hard-coded "Screen" in the screen template.

So this line becomes:

export interface <%= props.pascalName %>Props extends NavigationScreenProps<{}> {

and this line becomes:

export class <%= props.pascalName %> extends React.Component<<%= props.pascalName %>Props, {}> {

error: bundling failed: TypeError: Cannot read property 'bindings' of null

After I installed a new project with the new version of React, I just got this error with the first run??!!

and this error in App.js

Add storybook instructions to default README.md

The README that comes with a generated project should have instructions on running stories:

1. Run yarn storybook
2. Change SHOW_STORYBOOK to true in src/app/main.tsx
3. Reload the app!

Bonus points for info about the VSCode Storybook plugin by "Orta"

• Install plugin
• Open command palette in VSCode (cmd + shift + P) and run "Reconnect Storybook to VS Code"
• Choose story from Storybook pane in left menu (under Outline)

Error: Command failed: sed -i '' while creating new project

Latest release gives me this error:

❯ ignite new growkeep
-----------------------------------------------
  (                  )   (
  )\ )   (        ( /(   )\ )    *   )
 (()/(   )\ )     )\()) (()/(  ` )  /(   (
  /(_)) (()/(    ((_)\   /(_))  ( )(_))  )\
 (_))    /(_))_   _((_) (_))   (_(_())  ((_)
 |_ _|  (_)) __| | \| | |_ _|  |_   _|  | __|
  | |     | (_ | | .` |  | |     | |    | _|
 |___|     \___| |_|\_| |___|    |_|    |___|
-----------------------------------------------

An unfair headstart for your React Native apps.
https://infinite.red/ignite

-----------------------------------------------

🔥 igniting app growkeep
? Which boilerplate would you like to use? Bowser (alpha) (React Navigation, MobX State Tree, & TypeScript)
✔ using the Infinite Red boilerplate v3 (code name 'Bowser')
✔ added React Native 0.55.4 in 143.4s
⠦ ▸ setting up splash screen: configuringan error occured while installing ignite-ir-boilerplate-bowser boilerplate.
Error: Command failed: sed -i '' 's/SplashScreenPatch/growkeep/g' /mnt/c/Users/nate0/Projects/growkeep/growkeep/patches/splash-screen/splash-screen.patch
sed: can't read s/SplashScreenPatch/growkeep/g: No such file or directory

⠙ ▸ setting up splash screen: configuring

Hangs there indefinitely.

Stucking on "Setting up splash screen" at initializing new project on Windows

First of all thanks for applying my request to add Splash, but a quick look at the issues shows it made a lot of problems. There is another one, While I'm creating a new project using ignite new SampleApp, after adding ignite-ir-boilerplate-bowser it says:

- ? setting up splash screen an error occured while installing ignite-ir-boilerplate-bowser boilerplate. Error: Command Failed: sed -i 's/SplashScreenPatch/igniteApp/g' ***path to project*** 'sed' is not recognized as internal or external command...

I know its probably due to Linux commands and as windows sucks on it, I face this error. Also I know I can install sed for Windows, but guys please take care of us and try use commands that are globally available for all OS users! also using the new react-native v56 makes sense (due to updating android gradle plugins). Thanks for your absolute boiler plate that is a good source for learning typescript too.

RootStore is undefined on Android release version

The problem exists only on Release build.
In the render() function of root-component I'm rendering custom loading view when (!rootStore) in the same way as in original file in boilerplate (I mean (!rootStore) check. This view is not hiding, so the rootStore is always undefined. On Dev version everything is working fine. Do you have any idea, how to solve it?

Splash screen linking issue on android

On a fresh install of bowser (from master not the the release of npm), I'm getting an error when i try to run react-native run-android:

Scanning folders for symlinks in /Users/steve/src/sandbox/ignite/Test123/node_modules (26ms)
JS server already running.
Building and installing the app on the device (cd android && ./gradlew installDebug)...
Checking the license for package Android SDK Platform 27 in /Users/steve/Library/Android/sdk/licenses
License for package Android SDK Platform 27 accepted.
Preparing "Install Android SDK Platform 27".
"Install Android SDK Platform 27" ready.
Finishing "Install Android SDK Platform 27"
Installing Android SDK Platform 27 in /Users/steve/Library/Android/sdk/platforms/android-27
"Install Android SDK Platform 27" complete.

FAILURE: Build failed with an exception.

* Where:
Build file '/Users/steve/src/sandbox/ignite/Test123/node_modules/react-native-splash-screen/android/build.gradle' line: 22

* What went wrong:
A problem occurred evaluating project ':react-native-splash-screen'.
> Could not find method implementation() for arguments [directory 'libs'] on object of type org.gradle.api.internal.artifacts.dsl.dependencies.DefaultDependencyHandler.

Looks like the react-native-splash-screen component might not be linked correctly.

No maintain anymore?

It seems the repo is not maintaining anymore! Am I right? (or just skip replying, we'll find out you're not working on it anymore)

Drawer implementation

I'm brand new to react-native, so my knowledge of things like this is pretty small. However, a drawer is such a standard feature. As a kitchen sink boilerplate, the lack of a drawer example already implemented is a bit off putting.

Storybook does not show any stories

Creating this because I'm having the same issue reported here:
infinitered/ignite#1242

After creating a new project with the CLI using BOWER, running:
yarn run storybook
react-native run-ios

I dont see any stories available.

Add Translation Interpolation to Text HOC

i18N has support for interpolating values into translation strings, but our Text HOC does not support doing this. It would be cool if in addition to accepting a tx it would accept an array of values to interpolate as txInterpolationValues, or something.