aerian-studios / ignite-typescript-boilerplate

Create React Native apps with TypeScript and Ignite

Ignite TypeScript Boilerplate for React Native

The easiest way to develop React Native apps in TypeScript.

Get up and running with TypeScript React Native development in minutes. A batteries-included, opinionated starter project, and code generators for your components, reducers, sagas and more. Originally based on a port of the Ignite IR Boilerplate to TypeScript.

Currently includes:

• React Native 0.51.0 (but you can change this if you want to experiment)
• React Navigation
• Redux
• Redux Sagas
• And more!

Quick Start

When you've installed the Ignite CLI, (tl;dr: npm install -g ignite-cli) you can get started with this boilerplate like this:

ignite new MyLatestCreation --b ignite-typescript-boilerplate

You can also change the React Native version, just keep in mind, we may not have tested this just yet.

ignite new MyLatestCreation --b ignite-typescript-boilerplate --react-native-version 0.46.0-rc.2

By default we'll ask you some questions during install as to which features you'd like. If you just want them all, you can skip the questions:

ignite new MyLatestCreation --b ignite-typescript-boilerplate --max

If you want very few of these extras:

ignite new MyLatestCreation --b ignite-typescript-boilerplate --min

Using TypeScript with React Native

Thanks to the beauty of react-native-typescript-transformer, we can seamlessly use TypeScript in our React Native project. Source maps and hot reloading all work just like you would expect.

Coding style

We use tslint to enforce coding style, with rules based on Palantir's tslint-react, and a few changes to accommodate some Ignite quirks. If you install a plugin, your editor can probably automatically fix problems. In VS Code, set "tslint.autoFixOnSave": true in your workspace settings. You can run the linter from the command line. npm run lint runs the linter, while npm run fixcode tries to autofix problems.

Boilerplate walkthrough

Your App folder is where most of the goodies are found in an Ignite app. Let's walk through them in more detail. Start with Containers/App.tsx (described below) and work your way down the walkthrough in order.

Components

React components go here. We generate these as stateless functional components by default, as recommended by the React team.

Containers

Containers are Redux-connected components, and are mostly full screens.

• App.tsx - your main application. We create a Redux store and configure it here
• RootContainer.tsx - main view of your application. Contains your status bar and navigation component
• LaunchScreen.tsx - this is the first screen shown in your application. It's loaded into the Navigation component

Navigation

Your primary and other navigation components reside here.

• AppNavigation.tsx - loads in your initial screen and creates your menu(s) in a StackNavigation
• Styles - styling for the navigation

Storybook

Storybook has been setup to show off components in the different states. Storybook is a great way to develop and test components outside of use in your app. Simply run yarn run storybook to get started. All stories are contained in the *.story.tsx files along side the components.

Themes

Styling themes used throughout your app styles.

• ApplicationStyles.ts - app-wide styles
• Colors.ts - defined colors for your app
• Fonts.ts - defined fonts for your app
• Images.ts - loads and caches images used in your app
• Metrics.ts - useful measurements of things like navBarHeight

Config

Initialize and configure things here.

• AppConfig.ts - simple React Native configuration here
• DebugConfig.js - define how you want your debug environment to act. This is a .js file because that's what Ignite expects to find.
• ReactotronConfig.ts - configures Reactotron in your project (Note: this will be extracted into a plugin in the future)

Fixtures

Contains json files that mimic API responses for quicker development. These are used by the Services/FixtureApi.ts object to mock API responses.

Redux, Sagas

Contains a preconfigured Redux and Redux-Sagas setup. Review each file carefully to see how Redux interacts with your application. You will find these in the Reducers and Sagas folders. We use typesafe-actions to get lovely type checking of our reducers and actions. Take a look at Lib/ReduxHelpers.ts for some extra functions that we use to make them more Ignite-y.

Services

Contains your API service and other important utilities for your application.

• Api.tsx - main API service, giving you an interface to communicate with your back end
• ExamplesRegistry.tsx - lets you view component and Ignite plugin examples in your app
• FixtureApi.tsx - mocks your API service, making it faster to develop early on in your app

Lib

We recommend using this folder for modules that can be extracted into their own NPM packages at some point.

Images

Contains actual images (usually png) used in your application.

Transforms

Helpers for transforming data between API and your application and vice versa. An example is provided that you can look at to see how it works.

Tests

We create Jest tests alongside the components, reducers and sagas. Enable this by adding "tests": "jest" to ignite/ignite.json.

Code generation

Currently, the following code generation commands work properly:

• ignite generate component MyComponent - generates a stateless functional component.
• ignite generate container MyContainer - generates a Redux-connected React.Component, with state and view lifecycle.
• ignite generate screen MyScreen - generates a Redux-connected React.Component, with state, view lifecycle and react-navigation.
• ignite generate reducers MyNew - generates a set of Redux reducers.
• ignite generate saga MySaga - generates a Redux Saga
• ignite generate list MyList - generates a FlatList, formatted either as a grid or list.

Further reading

A comprehensive guide to best practice with TypeScript in React is the React Redux TypeScript Guide, which covers a lot more than just Redux. We have adopted a lot of the patterns from this. The typesafe-actions library that we use was created by @piotrwitek, the author of the guide.

Microsoft created TypeScript React Native Starter, which includes a walkthrough on switching projects to TypeScript.

React TypeScript Tutorial is React rather than React Native, but has useful guides.

This post is a good run-through of the react-native-typescript-transfomer, which allows us to skip the transpile step that we were using before. Thanks [@wormyy] for the heads-up on this.

Credits

Created by Matt Kane at Aerian Studios. Based on Ignite IR Boilerplate, by Infinite Red.

ignite-typescript-boilerplate's Issues

Adding to Ignite boilerplate

Just FYI, I'm adding this boilerplate to Ignite's boilerplate list. Great job!

infinitered/ignite#1223

Using react-native-typescript-transformer

Hi, thanks for good work.

What are your thoughts on implementing approach described in this blog post ?http://blog.novanet.no/easy-typescript-with-react-native/

I18n not initialized properly

Creating a project with react-native-i18n results in messages warning of missing translations wherever i18n is used. The issue is fixed by adding "import '../I18n/I18n' " to the AppConfig.ts (App/Config/AppConfig.ts)

I don't know if you can fix this in this boilerplate or if this has to be done for the plugin.. (Sorry, I'm just getting started here...)

Unable to run boilerplate code (on x64 Win10 platform)

Hi there,

First up, wanted to thank you for the work on this boiler plate project. This was exactly what I was looking for a new native project that I was starting. Perfect in all sense. But as I was trying to use it, ran into a few issues and so logging this item here.

I was trying to "ignite" a boilerplate app using this template here, but I'm unable to run the app in android simulator. I am getting the attached error.

After the boilderplate code is ready, when I go and check the code, I see some pieces are still missing. For example:

1. There is no ~/ignite/DevScreens folder in the boilerplate - where as the container components expect to find the ~/ignite/DevScreens/DevscreensButton module

I'm not sure if there is something I'm missing when creating the boilerplate project. I'm only saying NO to internationalization and animation questions. Everything else, I'm accepting to include in the project.

Any pointers on what could be going wrong?

Thanks,
Shani.

Fails to update AppNavigation.tsx

I ran the following command to generate a new list screen, but it failed to update the AppNavigation.tsx

$> ignite generate list Groups

? What kind of List would you like to generate? Grid
? How will your data be presented on this list? Single
✔︎ App/Containers/Groups/Groups.tsx
✔︎ App/Containers/Groups/GroupsStyle.ts
vvv -----[ DEBUG ]----- vvv
Error: 'import[\s\S]*from\s+"react-navigation";?' was not found in file /Users/domi/work/ws/react/XmasGnomeTS/App/Navigation/AppNavigation.tsx.
    at Object.insertInFile (/Users/domi/.config/yarn/global/node_modules/ignite-cli/src/extensions/patching.js:31:33)
    at Object.patchInFile (/Users/domi/.config/yarn/global/node_modules/ignite-cli/src/extensions/ignite/patchInFile.js:44:16)
    at Object.module.exports [as run] (/Users/domi/work/ws/react/XmasGnomeTS/node_modules/ignite-typescript-boilerplate/commands/list.js:120:12)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
^^^ -----[ DEBUG ]----- ^^^

AppNavigation.tsx currently looks like this:

import {StackNavigator} from 'react-navigation';
import GroupsScreen from '../Containers/GroupsScreen/GroupsScreen';
import SettingsScreen from '../Containers/SettingsScreen/SettingsScreen';
import LaunchScreen from '../Containers/LaunchScreen';

import styles from './Styles/NavigationStyles';

// Manifest of possible screens
const PrimaryNav = StackNavigator({
  GroupsScreen: {screen: GroupsScreen},
  SettingsScreen: {screen: SettingsScreen},
  LaunchScreen: {screen: LaunchScreen},
}, {
  // Default config for all screens
  headerMode: 'none',
  initialRouteName: 'LaunchScreen',
  navigationOptions: {
    headerStyle: styles.header,
  },
});

export default PrimaryNav;

unexpected token

hey guys, just wanted to test this boilerplate, and i got this error

`
➜ Documents # ignite new MyLatestCreation --b ignite-typescript-boilerplate

🔥 igniting app MyLatestCreation
✔ using the TypeScript boilerplate. You might want to make a cuppa while we get this ready. ☕️
✔ added React Native 0.49.3 in 34.3s
? Would you like Ignite Development Screens? Yes
? What vector icon library will you use? react-native-vector-icons
? What internationalization library will you use? react-native-i18n
? What animation library will you use? none
? What test library will you use? jest
✔︎ index.js
✔︎ README.md
✔︎ ignite/ignite.json
✔︎ .editorconfig
✔︎ .babelrc
✔︎ tsconfig.json
✔︎ tslint.json
✔︎ rn-cli.config.js
✔︎ Tests/Setup.tsx
✔︎ storybook/storybook.js
✔︎ .env.example
an error occured while installing ignite-typescript-boilerplate boilerplate.
SyntaxError: Unexpected token } in JSON at position 3513

`

Note sure this works anymore?

an error occured while installing ignite-typescript-boilerplate boilerplate.
TypeError: Cannot read property 'dependencies' of undefined
    at mergePackageJsons (/Users/Shared/Development/projects/@bradennapier/IdexMobileIgnite/node_modules/ignite-typescript-boilerplate/boilerplate.js:185:30)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Object.install (/Users/Shared/Development/projects/@bradennapier/IdexMobileIgnite/node_modules/ignite-typescript-boilerplate/boilerplate.js:201:3)
error installing boilerplate
❯ 

Missing listview-style.ejs

Using ignite-typescript-boilerplate@^0.1.5 I run the following and get an error:

ignite generate list MyList

? What kind of List would you like to generate? Row
? How will your data be presented on this list? Single
✔︎ App/Containers/MyList/MyList.tsx
vvv -----[ DEBUG ]----- vvv
Error: template not found /Users/aaron/Documents/Code/Set/IgniteTypescript/node_modules/ignite-typescript-boilerplate/templates/listview-style.ejs
    at Object.generate (/usr/local/lib/node_modules/ignite-cli/node_modules/gluegun/src/core-extensions/template-extension.js:51:13)
    at Object.copyBatch (/usr/local/lib/node_modules/ignite-cli/src/extensions/ignite/copyBatch.js:53:24)
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:160:7)

Looking at the files in templates, it's not clear to me what files I should expect to see there for list view related things.

Cannot read property 'includes' of undefined

hey guys, i ran it with --debug, here is part of the output. i didn't pick animatable and has chosen jest for testing.

✔ added ignite-vector-icons in 15.96s
19:16:44 [ignite] running add command
19:16:44 [ignite] installing /Users/mcz/Documents/MySecondCreation/MySecondCreation/node_modules/ignite-i18n from source npm
⠧ adding ignite-i18n19:16:45 [ignite] ignite-i18n 1.1.1 on npm.
19:16:45 [ignite] yarn add ignite-i18n --dev
⠦ adding ignite-i18n19:16:51 [ignite] finished yarn command
19:16:51 [ignite] requiring ignite plugin from /Users/mcz/Documents/MySecondCreation/MySecondCreation/node_modules/ignite-i18n
19:16:51 [ignite] running add() on ignite plugin
⠋ ▸ installing [email protected] 19:16:51 [ignite] yarn add [email protected]
✖ Cannot read property 'includes' of undefined
✔ configured git
✔ ignited MySecondCreation in 142.24s

Ignite CLI ignited MySecondCreation in 142.24s

To get started:

No declaration file DevscreensButton

I'm quite new to TypeScript, but creating a new app with:

ignite new XmasGnomeTS --b ignite-typescript-boilerplate --max

and importing the project into WebStorm or Visual Studio Code will bring up this error for the file LaunchScreen.tsx:

Error:(3, 30) TS7016: Could not find a declaration file for module '../../../ignite/DevScreens/DevscreensButton'. '/Users/domi/work/ws/react/XmasGnomeTS/ignite/DevScreens/DevscreensButton.js' implicitly has an 'any' type.

Do you suggest to create a declaration file be or self?

Command failed: yarn add [email protected]

Running npm 4.6.1
node 8.9.1

Ran:
ignite new MyApp --b ignite-typescript-boilerplate

Got these two errors:

🔥 igniting app MyApp
⠋ using the TypeScript boilerplate. You might want to make a cuppa while we get ✔ using the TypeScript boilerplate. You might want to make a cuppa while we get this ready. ☕️
✔ added React Native 0.49.3 in 38.64s
? Would you like Ignite Development Screens? Yes
? What vector icon library will you use? react-native-vector-icons
? What internationalization library will you use? react-native-i18n
? What animation library will you use? react-native-animatable
? What test library will you use? ava
✔︎ index.js
✔︎ README.md
✔︎ ignite/ignite.json
✔︎ .editorconfig
✔︎ .babelrc
✔︎ tsconfig.json
✔︎ tslint.json
✔︎ rn-cli.config.js
✔︎ Tests/Setup.tsx
✔︎ storybook/storybook.js
✔︎ .env.example
✔ added ignite-typescript-boilerplate in 23.36s
✖ Command failed: yarn add [email protected]
error An unexpected error occurred: "/Users/davidrhodes/Library/Caches/Yarn/v1/npm-react-native-device-info-0.11.0-e96dd0e3f8a7d7e3022c1f441f51fa912fdc7444/.yarn-metadata.json: Unexpected token . in JSON at position 0".

✔ added ignite-vector-icons in 23.88s
✖ Cannot read property 'includes' of undefined
✔ added ignite-animatable in 21.06s
✔ configured git
✔ ignited Woofstr in 194.63s

Ignite CLI ignited MyApp in 194.63s

To get started:

  cd Woofstr
  react-native run-ios
  react-native run-android

To run in Android, make sure you've followed the latest react-native setup instructions at https://facebook.github.io/react-native/docs/getting-started.html before using ignite.
You won't be able to run react-native run-android successfully until you have.
ignite --help

Read the walkthrough at https://github.com/infinitered/ignite-ir-boilerplate/blob/master/readme.md#boilerplate-walkthrough

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

Now get cooking! 🍽

Thanks in advance; Your work on this boilerplate is appreciated.

console.error: uncaught at root

Hi,

Ran into an issue with this.

Looks like the App/Sagas/index.ts file was not updated to using the new Actions structure.

In App/Sagas/index.ts
Replace
takeLatest(StartupTypes.STARTUP, ...

With
takeLatest("startup", ...
etc

Or better, I have something like

export enum StartupActionTypes {
  STARTUP = "startup",
}

in App/Reducers/StartupReducers/index.tsx
and use StartupActionTypes.STARTUP in lieu of "startup" everywhere

Same for the GithubActionTypes.

Hope this helps anyone who has run into this issue.
Would you like a pull request?

p.s Thanks for the template! :)