Skip to content

chore: add local expo-cli for simulator.sh script #247

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
47 changes: 28 additions & 19 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,22 +4,13 @@
[![Maintainability](https://api.codeclimate.com/v1/badges/8bb29bcea21bb5dda316/maintainability)](https://codeclimate.com/github/rootstrap/react-native-base/maintainability)
[![Test Coverage](https://api.codeclimate.com/v1/badges/8bb29bcea21bb5dda316/test_coverage)](https://codeclimate.com/github/rootstrap/react-native-base/test_coverage)

## Commands

1. **Start the app**: `yarn android:{env}` or `yarn ios:{env}` (envs: `dev`, `staging`, and `prod`)
2. **Start metro bundler**: `yarn start`
3. **Lint the app**: `yarn lint`
4. **Test the app**: `yarn test`

## Getting started

1. Install dependencies: `yarn`
2. Create a `.env` file in the root directory of the project, based on the `.env.defaults` sample file and the extra constants that you may need. This will be your development env.

You can also create `.env.prod`, `.env.staging`, and `.env.qa` to define environment variables for production and staging.

1. Rename your new project using `yarn rename` or `npm run rename`
2. Start on android or ios: `yarn android:{env}` or `yarn ios:{env}` (envs: `dev`,`qa`, `staging`, and `prod`)
2.1 You can also create `.env.prod`, `.env.staging`, and `.env.qa` to define environment variables for production and staging.
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
2.1 You can also create `.env.prod`, `.env.staging`, and `.env.qa` to define environment variables for production and staging.
2.1 You can also create `.env.prod`, `.env.staging`, and `.env.qa` to define environment variables for production, staging and QA.

3. Rename your new project using `yarn rename` or `npm run rename`

### Steps for Android development

Expand All @@ -29,27 +20,36 @@ None

1. Run the following command to install iOS pods

```
```bash
npx pod-install
```

## Commands

1. **Start metro bundler**: `yarn start`
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should we use an unordered list here?

2. **Start the app**: `yarn android:{env}` or `yarn ios:{env}` (envs: `dev`, `staging`, and `prod`)
3. **Lint the app**: `yarn lint`
4. **Test the app**: `yarn test`

**Note: by default we use Expo CLI for iOS if you want to use react-native CLI you must append the following flag to the command:**
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
**Note: by default we use Expo CLI for iOS if you want to use react-native CLI you must append the following flag to the command:**
**Note: by default we use Expo CLI for iOS. If you want to use react-native CLI you must append the following flag to the command:**


```bash
USE_RN_CLI=true yarn ios:{env}
```

## Continuous Integration

The repo includes configuration for using GitHub Actions to run unit tests and code analysis: `.github/workflows/test.yml`. This can be adapted as needed for specifics of each project. Both CodeClimate and Sonarqube integrations are included in the workflow and their required environment settings should be retrieved from the repo Secrets.

## Using folders template

There's a folder named .fttemplates where you'll find a template you can use to create new components for your app, keeping the same folder conventions for all your components.
There's a folder named .fttemplates where you'll find a template you can use to create new components for your app, keeping the same folder conventions for all your components.

You must install Folder Templates extensions in Visual Studio Code to use this feature. You'll find it [here](https://marketplace.visualstudio.com/items?itemName=Huuums.vscode-fast-folder-structure).

If you install the extension you can create your components folder using the template by clicking on Create new templated folder button in the context menu.


https://user-images.githubusercontent.com/11773865/216385411-9e152929-e6f7-41a2-a22c-5312509acbd4.mov



<https://user-images.githubusercontent.com/11773865/216385411-9e152929-e6f7-41a2-a22c-5312509acbd4.mov>

## Configuring Code Climate

Expand All @@ -66,6 +66,7 @@ https://user-images.githubusercontent.com/11773865/216385411-9e152929-e6f7-41a2-
### Usage

```

sonar-scanner \
-Dsonar.qualitygate.wait=true \
-Dsonar.host.url=$SONAR_URL \
Expand All @@ -78,7 +79,8 @@ sonar-scanner \
-Dsonar.sources=. \
-Dsonar.projectBaseDir=. \
-Dsonar.javascript.lcov.reportPaths=coverage/lcov.info
-Dsonar.coverage.exclusions=**/spec.js,**/__mocks__/**,**/**.spec.js,**/**.config.js,**/rnbv.js,**/android/**,**/ios/**,**/**.styles.js,**/tests/**,**/__mocks__/**,**/httpClient/**,**/jest-setup.js,**/constants/**,**/assets/**,**/node_modules/**,**/coverage/**
-Dsonar.coverage.exclusions=**/spec.js,**/**mocks**/**,**/**.spec.js,**/**.config.js,**/rnbv.js,**/android/**,**/ios/**,**/**.styles.js,**/tests/**,**/**mocks**/**,**/httpClient/**,**/jest-setup.js,**/constants/**,**/assets/**,**/node_modules/**,**/coverage/**
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I believe the change from __mocks__ to mocks might have been unintentional, because this project uses __mocks__ folder


```

## Build Android Release
Expand Down Expand Up @@ -114,11 +116,13 @@ If you want to add a new env here are the steps to follow:
3. Scroll down to the `flavors` section and add a new flavor with the following format:

```

{name} {
applicationIdSuffix '.{name}'
minSdkVersion rootProject.ext.minSdkVersion
targetSdkVersion rootProject.ext.targetSdkVersion
}

```

4. Inside `android/app/src` copy one of the existing env folders like `staging` and rename it with the name of your new flavor.
Expand All @@ -134,10 +138,13 @@ We have in place a validation that will check if the env file exists and has all
Variables are defined in `src/@types/env` and the validation is done in `scripts/validation-env.ts`.

```

APP_ENV={dev | prod | staging | qa} react-native run-{android | ios}

```

Note: For iOS the validation occurs within the `scripts/simulator.sh` script. For Android it occurs as an inline command in the `package.json` scripts

### iOS

#### Using different schemes
Expand All @@ -159,7 +166,9 @@ To add a new build target do as follows:
If you are looking for something quick and easy in the short term, there is one more way you can run the app with a custom env file, just run:

```

ENVFILE=.env.{env} react-native run-ios

```

### Adding App Icons for each env
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-native": "^4.0.0",
"eslint-plugin-react-native-a11y": "^3.2.1",
"expo": "^49.0.13",
"jest": "^29.2.1",
"lefthook": "^1.2.8",
"metro-react-native-babel-preset": "^0.76.8",
Expand Down
22 changes: 16 additions & 6 deletions scripts/simulator.sh
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
#!/bin/sh

if [[ $# = 0 ]]; then
echo "Usage: $0 Scheme-Name Debug/Release"
exit 1
echo "Usage: $0 Scheme-Name Debug/Release"
exit 1
fi

TS_FILE="./scripts/validate-env.ts"
Expand All @@ -25,8 +25,18 @@ if [ $EXIT_CODE -ne 0 ]; then
exit 1
fi

if which npx >/dev/null; then
npx expo run:ios --scheme $1 --configuration $2 ${@:3}
if [[ $USE_RN_CLI = true ]]; then
echo "Using react-native-cli"
react-native run-ios --scheme $1 --mode $2 ${@:3}
exit 0
else
react-native run-ios --scheme $1 --configuration $2 ${@:3}
fi
# check if expo is in node_modules
if [ ! -d "./node_modules/expo" ]; then
echo "expo not found. Installing expo locally..."
yarn add -D expo
fi

echo "Using expo-cli"
expo run:ios --scheme $1 --configuration $2 ${@:3}
exit 0
fi
Loading