# Sunlight's Handoff # one-app / GO1 - Sunlight Mobile app This project was bootstrapped with [Create React Native App](https://github.com/react-community/create-react-native-app) and [React Context Manager Cli](https://github.com/talpor/react-context-manager-cli) to handle app state. ## Table of Contents - [Install](#install) - [Available Scripts](#available-scripts) - [yarn start](#yarn-start) - [yarn check](#yarn-check) - [yarn lint](#yarn-lint) - [yarn coverage](#yarn-coverage) - [yarn test](#yarn-test) - [yarn run ios](#yarn-run-ios) - [yarn run android](#yarn-run-android) - [Writing and Running Tests](#writing-and-running-tests) - [Environment Variables](#environment-variables) - [Sharing and Deployment](sharing-and-deployment) - [Built With](built-with) ## Install First time you need to install: Get project dependecies ``` yarn install or npm install ``` ### iOS only: Every time packages get updated you need to install: ``` yarn cd ios pod install ``` ### Android only: Create a file called oneApp.properties to configure your release settings ``` keystore=YOUR_KEYSTORE.keystore keystore.password=YOUR_PASSWORD keyAlias=YOUR_ALIAS keyPassword=YOUR_KEY_PASSWORD ``` Your keystore should be inside `android/app` directory To run the project ``` yarn ios OR yarn android ``` ## Available Scripts If Yarn was installed when the project was initialized, then dependencies will have been installed via Yarn, and you should probably use it to run these commands as well. Unlike dependency installation, command running syntax is identical for Yarn and NPM at the time of this writing. ### `yarn start` Runs your app in development mode. Once the package manager is running build and start the application in XCode Sometimes you may need to reset or clear the React Native packager's cache. To do so run: ``` yarn start:reset ``` #### `yarn test` Runs the [jest](https://github.com/facebook/jest) test runner on your tests. ### `yarn check` Runs the tslint rules validations. This can be configured at the tsconfig.json file. ### `yarn lint` Runs the linter rules for the code. This can be configured at the tslint.json file. It is recommended to integrate Prettier with your text editor to follow the code guidelines with ease. ### `yarn coverage` Shows the project's code coverage. This can be use as a quality metric, our recommedations it is to keep the coverage up to 80%. It generates a complete report inside the /coverage directory. #### `yarn run ios` Like `yarn start`, but also attempts to open your app in the iOS Simulator if you're on a Mac and have it installed. #### `yarn run android` Like `yarn start`, but also attempts to open your app on a connected Android device or emulator. Requires an installation of Android build tools (see [React Native docs](https://facebook.github.io/react-native/docs/getting-started.html) for detailed setup). We also recommend installing Genymotion as your Android emulator. Once you've finished setting up the native build environment, there are two options for making the right copy of `adb` available to Create React Native App: ##### Using Android Studio's `adb` 1. Make sure that you can run adb from your terminal. 2. Open Genymotion and navigate to `Settings -> ADB`. Select "Use custom Android SDK tools" and update with your [Android SDK directory](https://stackoverflow.com/questions/25176594/android-sdk-location). ##### Using Genymotion's `adb` 1. Find Genymotion's copy of adb. On macOS for example, this is normally `/Applications/Genymotion.app/Contents/MacOS/tools/`. 2. Add the Genymotion tools directory to your path (instructions for [Mac](http://osxdaily.com/2014/08/14/add-new-path-to-path-command-line/), [Linux](http://www.computerhope.com/issues/ch001647.htm), and [Windows](https://www.howtogeek.com/118594/how-to-edit-your-system-path-for-easy-command-line-access/)). 3. Make sure that you can run adb from your terminal. ## Writing and Running Tests This project is set up to use [jest](https://facebook.github.io/jest/) for tests. You can configure whatever testing strategy you like, but jest works out of the box. Create test files in directories called `__tests__` or with the `.test` extension to have the files loaded by jest. See the [the template project](https://github.com/react-community/create-react-native-app/blob/master/react-native-scripts/template/App.test.js) for an example test. The [jest documentation](https://facebook.github.io/jest/docs/en/getting-started.html) is also a wonderful resource, as is the [React Native testing tutorial](https://facebook.github.io/jest/docs/en/tutorial-react-native.html). ## Environment Variables You can configure some of Create React Native App's behavior using environment variables. You should create an .env to store the env variables: ``` STREAM_API_KEY=API_KEY STREAM_APP_ID=APP_ID STREAM_LOCATION=REGION API_URL=BACKEND_URL ONESIGNAL_APP_ID=ONESIGNAL_APP_ID ``` ## Sharing and Deployment Create React Native App does a lot of work to make app setup and development simple and straightforward, but it's very difficult to do the same for deploying to Apple's App Store or Google's Play Store without relying on a hosted service. Github is fully integrated with [CircleCI](https://circleci.com), which pulls every push made into git and builds it. Every build produces standalone `ipa` file and compressed bundle of E2E tests. Definition of CircleCI steps are in `./.circleci/config.yml`. Variables needed during build are stored directly in CircleCI project settings (you can't see values they hold, only their names). ## Coding style tests Coding style of TS is expressed by tslint. Tslint must be passed in order for build to succeed. Utility stuff is written in JS and its coding style is left to best effort of developer. ## Built With - Typescript - React - React Native - React Navigation - Moment - Jest - Tslint - Faker - Humps - [@talpor/react-context-manager](https://github.com/talpor/react-context-manager) - [@react-native-activity-feed](https://github.com/GetStream/react-native-activity-feed/tree/master/example) - [@react-native-auto-height-image](https://github.com/vivaxy/react-native-auto-height-image) - [@react-native-dotenv](https://github.com/zetachang/react-native-dotenv) - [react-native-webview](https://github.com/react-native-community/react-native-webview) - [@react-native-vector-icons](https://github.com/oblador/react-native-vector-icons) - [@react-native-community/async-storage](https://github.com/react-native-community/async-storage) -[@react-native-community/blur](https://github.com/react-native-community/react-native-blur) - [@react-native-community/masked-view](https://github.com/react-native-community/react-native-masked-view) - [@react-navigation](https://github.com/react-navigation/react-navigation) - [react-native-share](https://github.com/react-native-community/react-native-share) See `package.json` for complete list of dependencies. ## Note For errors during the installation verify that you validate this command first when the project is set up for the first time: ``` rm -rf node_modules/@talpor/react-context-manager/node_modules/react ``` This error will be fixed in the next releases of the library. ## Versioning Versioning is done according to [SemVer](http://semver.org/) scheme.