sfbrigade / intentional-walk-client

3 stars 2 forks source link

Intentional Walk

This is the new Intentional Walk iOS and Android client app codebase.

Getting Started

Note: Make sure you have completed the React Native - Environment Setup instructions till "Creating a new application" step, before proceeding.

Setting up an environment

Copy one of the environment files in the project root directory (.env.dev, .env.staging, .env.prod) to .env depending upon which environment you wish to connect to. Note: currently, there are no "secrets" in our environment variables, but please DO NOT COMMIT secrets into any of the environment files. Instead, put a blank/empty placeholder, and store the value in a corresponding .local file which will be ignored by git (i.e. .env.dev.local, .env.staging.local, .env.prod.local).

To start, use the .env.staging environment. Note that the staging server may go to sleep and take some seconds to start up again when connecting. The .env.dev environment is for developers who are also running the server codebase on the same machine and wish to connect to it. The .env.prod environment connects to the live production server. Please sign up with either the first and/or last name "Tester" to have your account flagged as a test account on production.

If you change your environment settings, you'll need to reset the Metro Bundler cache. Close it, if it is running, then restart it with: npm start -- --reset-cache

Step 1: Start the Metro Server

First, you will need to start Metro, the JavaScript bundler that ships with React Native.

To start Metro, run the following command from the root of your React Native project:

# using npm
npm start

Step 2: Start your Application

Let Metro Bundler run in its own terminal. Open a new terminal from the root of your React Native project. Run the following command to start your Android or iOS app:

For Android

# using npm
npm run android

For Android, it should launch the emulator running in a configured Android Virtual Device. If not, launch Android Studio, go to "More actions...", "Virtual Device Manager", and press the triangle Play button next to a listed emulator. Note that the installation may fail if the device is still booting- if so, wait for the emulator to fully boot to the lock/home screen, and run the command again.

For iOS

# using npm
npm run ios

To specify a specific simulator iOS device:

# using npm
npm run ios -- --simulator="iPhone 15"

To view a list of simulators installed on your computer:

xcrun simctl list

If everything is set up correctly, you should see your new app running in your Android Emulator or iOS Simulator shortly provided you have set up your emulator/simulator correctly.

This is one way to run your app — you can also run it directly from within Android Studio and Xcode respectively.

Step 3: Modifying your App

Now that you have successfully run the app, let's modify it.

  1. Open App.tsx in your text editor of choice and edit some lines.
  2. For Android: Press the R key twice or select "Reload" from the Developer Menu (Ctrl + M (on Window and Linux) or Cmd ⌘ + M (on macOS)) to see your changes!

    For iOS: Hit Cmd ⌘ + R in your iOS Simulator to reload the app and see your changes!

Congratulations! :tada:

You've successfully run and modified your React Native App. :partying_face:

Now what?

Deploying Releases

Step 1: Set up necessary credentials

Contact another developer or admin on this project and:

Step 2: Set up command-line tools

Troubleshooting

If you can't get this to work, see the Troubleshooting page.

Learn More

To learn more about React Native, take a look at the following resources: