This is the boilerplate that Infinite Red uses as a way to test bleeding-edge changes to our React Native stack.
Currently includes:
- React Native 0.42.0 (but you can change this if you want to experiment)
- React Navigation
- Redux
- Redux Sagas
- And more!
When you've installed the Ignite CLI, you can get started with this boilerplate like this:
ignite new MyLatestCreation
You can also change the React Native version, just keep in mind, we may not have tested this just yet.
ignite new MyLatestCreation --react-native-version 0.44.2By 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 --maxIf you want very few of these extras:
ignite new MyLatestCreation --minYour App folder is where most of the goodies are found in an Ignite Next app. Let's walk through them in more detail. Start with Containers/App.js (described below) and work your way down the walkthrough in order.
Containers are (mostly) full screens, although they can be sections of screens or application containers.
App.js- your main application. We create a Redux store and configure it hereRootContainer.js- main view of your application. Contains your status bar and navigation componentLaunchScreen.js- this is the first screen shown in your application. It's loaded into the Navigation componentLoginScreen.js- an example login screen. Read the comments in there to learn more!Styles- styling for each of the above containers and screens
Your primary and other navigation components reside here.
AppNavigation.js- loads in your initial screen and creates your menu(s) in a StackNavigationStyles- styling for the navigation
React components go here...pretty self-explanatory. We won't go through each in detail -- open each file to read the comments and view the code.
Styling themes used throughout your app styles.
ApplicationStyles.js- app-wide stylesColors.js- defined colors for your appFonts.js- defined fonts for your appImages.js- loads and caches images used in your appMetrics.js- useful measurements of things like searchBarHeight
Initialize and configure things here.
AppConfig.js- simple React Native configuration hereDebugConfig.js- define how you want your debug environment to actReactotronConfig.js- configures Reactotron in your project (Note: this will be extracted into a plugin in the future)ReduxPersist.js- configures Redux Persist (Note: this will be extracted into a plugin in the future)
Contains json files that mimic API responses for quicker development. These are used by the Services/FixtureApi.js object to mock API responses.
Contains a preconfigured Redux and Redux-Sagas setup. Review each file carefully to see how Redux interacts with your application.
TODO: explain more about Redux & Redux Sagas here
Contains your API service and other important utilities for your application.
Api.js- main API service, giving you an interface to communicate with your back endExamplesRegistry.js- lets you view component and Ignite plugin examples in your appFixtureApi.js- mocks your API service, making it faster to develop early on in your appImmutablePersistenceTransform.js- part of the redux-persist implementation (will be removed)RehydrationServices.js- part of the redux-persist implementation (will be removed)
We recommend using this folder for modules that can be extracted into their own NPM packages at some point.
Contains actual images (usually png) used in your application.
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.
This folder (located as a sibling to App) contains sample Jest snapshot and unit tests for your application.
Previous Boilerplates
Ignite CLI and Ignite IR Next, as open source projects, are free to use and always will be. Infinite Red offers premium Ignite CLI support and general mobile app design/development services. Email us at hello@infinite.red to get in touch with us for more details.