# NonaTemplate <!-- omit in toc -->

React Native Application

## Table of Contents <!-- omit in toc -->

<!-- TOC -->

- [Project Structure & Conventions](#project-structure--conventions)
- [Setting Up The Project](#setting-up-the-project)
  - [Local Environment Setup](#local-environment-setup)
  - [Available Commands](#available-commands)
- [Quick Start (iOS)](#quick-start-ios)
  - [Start Storybook](#start-storybook)
  - [Restart With Cache Clear](#restart-with-cache-clear)
  - [Complete Reset](#complete-reset)
  - [Reload](#reload)
- [Contributing](#contributing)
- [Run The Application](#run-the-application)
  - [iOS](#ios)
  - [Android](#android)
- [Testing](#testing)
- [Storybook](#storybook)
- [Screenshot Generation (iOS)](#screenshot-generation-ios)
- [Additional Docs](#additional-docs)
<!-- /TOC -->

## Project Structure & Conventions

Please read through the [Project Structure & Conventions](docs/project-structure-conventions.md) guidelines before doing anything else.

**[⬆ back to top](#table-of-contents)**

## Setting Up The Project

### Local Environment Setup

Please make sure you have the following environment variables exported in your shell of choice.
All the available keys are stored in Lastpass under the item NonaTemplate-Local Environment Variables in the shared Lastpass folder.

```bash
# Sentry
export SENTRY_AUTH_TOKEN=*****
```

A note on the APP*STORE* environment variables is that they are stored under NonaTemplate - App Store Connect API Key, and that APP_STORE_CONNECT_API_KEY_B64 is the base 64 encoded version of the API key. You can get this value by downloading the key file and then running
`cat KeyFileName | base64`. For more information on setting this up please see the [playbook](https://www.npmjs.com/package/@nona-creative/react-native-ci-utils) that is part of @nona-creative/react-native-ci-utils.

### Available Commands

To see a list of available commands run:

```bash
npm run help
```

**[⬆ back to top](#table-of-contents)**

## Quick Start (iOS)

1. go through all the iOS Prerequisites in [Prerequisites](docs/prerequisites.md)
2. `npm i` install NPM dependencies
3. `npm run env:development` initialize environment for local
4. install ios certificates with `npm run ios:certificates` (you will need to have set up [certificates using faslane match](https://www.npmjs.com/package/@nona-creative/react-native-ci-utils) to be able to run this command).
5. iOS Setup:
   1. `npx pod-install`
6. `npm run start` start bundler
7. `npm run ios` start app

If you run into issues, see the additional docs below **[bottom of page](#Additional-Docs)**

### Start Storybook

- Follow the quick start steps 1-6 for iOS above if you haven't completed them.
- Start the storybook server using `npm run storybook:server`
- Start storybook by running `npm run storybook`
- Reload the project if storybook is not showing
  - On iOs this can be achieved by reloading the simulator by typing `command + r`
- You can switch back to the application by stopping the process that you ran with `npm run storybook` via `ctrl-c`, running `npm run start` and then reloading the application in the simulator via `command + r`

### Restart With Cache Clear

1. `npm run start:reset` restart bundler with cache reset
2. `npm run ios` start app

### Complete Reset

1. `npm run reset` completely reset the project (excluding envs)
2. `npm run start` start bundler
3. `npm run ios` start app

### Reload

You can reload the application or the Javascript part of the application in the simulator on iOS/Android in the following ways:

- iOs: `cmd+r`
- Android: `rr`

  **[⬆ back to top](#table-of-contents)**

## Contributing

Before contributing **please read through everything in [Contributing](docs/contributing.md)**.

**[⬆ back to top](#table-of-contents)**

## Run The Application

### iOS

```bash
npm run ios
```

This will automatically start the bundler in terminal,
to start the bundler in a window of your choice,
you can run (before running the above command):

```bash
npm run start
```

Sometimes you will need to clear cache before when restarting the bundler,
to do so run:

```bash
npm run start:reset
```

**[⬆ back to top](#table-of-contents)**

### Android

```bash
npm run android
```

Or you can start the bundler in a window of your choice (before running the above command):

```bash
npm run start
```

**[⬆ back to top](#table-of-contents)**

## Testing

```bash
npm run test
npm run test:watch
```

**[⬆ back to top](#table-of-contents)**

## Storybook

We use [StoryBook](https://storybook.js.org/) throughout this project to develop our UI components in isolation and create a coherent and organised UI.

Please read the [documention on storybook](docs/storybook.md) before contributing any code.

**[⬆ back to top](#table-of-contents)**

## Screenshot Generation (iOS)

We use Fastlane's [Snapshot](https://docs.fastlane.tools/actions/snapshot/) to generate screenshots for iOS. You can generate them with the command `npm run ios:screenshots`. Note that this command **will reset your environment file to development values** after running it.

Please read the [documention on storybook](docs/storybook.md) before contributing any code.

**[⬆ back to top](#table-of-contents)**

## Additional Docs

- [Contributing](docs/contributing.md)
- [Prerequisites](docs/prerequisites.md)
- [Debugging](docs/debugging.md)
- [iOS certificates](docs/ios-certificates.md)
- [Gotchas](docs/gotchas.md)
- [Misc](docs/misc.md)
- [Node Version](docs/node-version.md)
- [Force Updates](docs/force-updates.md)

**[⬆ back to top](#table-of-contents)**