Mobile app codebase for money monitoring.
Android | IOS | Convention |
---|---|---|
- Make sure you have
nvm
, nodev8 and up
installed - Install
yarn
-npm install -g yarn
. - Install react-native and ignite-cli globally.
yarn global add react-native-cli ignite-cli
- Use a smart
.npmrc
. By default,npm
doesn’t save installed dependencies to package.json (and you should always track your dependencies!).
$ npm config set save=true
$ npm config set save-exact=true
$ cat ~/.npmrc
When adding new packages, always use yarn add --exact <package>
. To add a package as a devDependency, use yarn add --exact -D <package>
. This will ensure the package is always added to the yarn.lock
file.
Make sure you have nvm
, node v8 and up
, and yarn
installed before proceeding with the following steps. Also, ensure :
- Clone repo -
[email protected]:joshuaalpuerto/moneytored.git
- Create
.env
using.env-sample
as template. - Run
yarn
to install dependencies and clean the git repo.
More info you can check the react-native docs
$ react-native run-ios --simulator="iPhone 7 Plus"
Default simulator is
iPhone X
. List of possible simulators
If you got any issues running the simulator through command line. I suggest you open the project(
/ios/*.xcodeproj
) using xcode. Then run the simulator by pressing the play button.
Here or this even the react-native getting started guide are awesome docs on how you can configure your computer for android development. You should follow this steps before proceeding.
- We need to have a simulator to run our android application. We will be using here is genymotion. Choose the option with VirtualBox (if you don’t have VirtualBox already installed on your Windows PC).
- Adding a New Virtual Device in Genymotion. Install the SDK Platform with API Level
27
. - Once done you’ll see your devices listed under Virtual devices.
- Once you run the device on genymotion, You can verify through your cli using
adb devices
- Finally you can do
react-native run-android
Your 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 componentStyles
- styling for each of the above containers and screens
To generate a new Container or Screen you can use the following generator commands:
ignite g container New
- Will create aNew.js
and also aStyles/NewStyle.js
.ignite g list New
- The same as thecontainer
command, but it will give you a walkthrough to generate a ListView screen. Allowing you to even pickFlatList
or not, grid, and some other options.ignite g screen New
- Will create aNewScreen.js
and also aStyles/NewScreenStyle.js
. Important to mention that thescreen
generator will add theScreen
on the file/class name to make easier to identify.
Those commands will also add the new container to the navigations file.
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 navigationReduxNavigation.js
- This file contains the core navigation of your application. If you ever change your launch screen, make sure to change it also atif (nav.routes.length === 1 && (nav.routes[0].routeName === 'LaunchScreen')) {
, otherwise you may encounter navigation problems with the Android back button!
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.
To generate a new Component you can use the following generator commands:
ignite g component New
- Will create aNew.js
and also aStyles/NewStyle.js
.ignite g component path/New
- The same as above, but will use a relative pathignite g component --folder path
- An alternative toignite g component path/index
ignite g component --folder path new
- An alternative toignite g component relativePath/New
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 npm run storybook
to get started. All stores are contained in the *.story.js
files along side the components.
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 navBarHeight
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.
Here again we have generators to help you out. You just have to use one of the following:
ignite g redux Amazing
- Will generate and link the redux forAmazing
.ignite g saga Amazing
- The same as above, but for the Sagas
You can read more about Redux and Redux Sagas in these blog posts:
- Using redux-saga To Simplify Your Growing React Native Codebase
- A Tour of React Native — Part 2: Redux & Friends
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.