Quick Start Dev Environment Setup

This guide will help you set up your development environment for Freighter Mobile.

Prerequisites

1. Node.js & Yarn:

   • Install Node.js (LTS version recommended). You can download it from nodejs.org.
   • Yarn is the recommended package manager. Install it via npm (which comes with Node.js):

       npm install --global yarn

2. Watchman (macOS only):

   • Watchman is a tool by Facebook for watching changes in the filesystem. It is highly recommended for performance.

     brew install watchman

3. React Native CLI:

   • Install the React Native command line interface:

     npm install --global react-native-cli

   • Alternatively, you might prefer to use npx react-native <command> for running commands without a global installation.

Platform Specific Setup

Follow the official React Native documentation for setting up your environment for iOS and Android development. This includes installing Xcode (for iOS) and Android Studio (for Android), along with their respective SDKs and command-line tools.

• Go to the React Native development environment setup page.
• Select "React Native CLI Quickstart".
• Follow the instructions for your development OS (macOS, Windows, Linux) and target OS (iOS, Android).

Project Setup

1. Clone the Repository:

   git clone https://github.com/stellar/freighter-mobile.git
   cd freighter-mobile

2. Install Dependencies:

   yarn install

3. Environment Variables:

   The project uses react-native-config for environment variables. You'll need to set up your environment variables before running the app:

   1. Create a .env file in the project root:

      touch .env

   2. Add the required environment variables:

      FREIGHTER_BACKEND_V1_PROD_URL=your_backend_v1_prod_url_here
      FREIGHTER_BACKEND_V2_PROD_URL=your_backend_v2_prod_url_here
      
      WALLET_KIT_PROJECT_ID_PROD=your_prod_project_id_here
      other variables...
      

   3. Update the .env.example file for documentation, add the same variables without values:

      FREIGHTER_BACKEND_V1_PROD_URL=
      FREIGHTER_BACKEND_V2_PROD_URL=
      
      WALLET_KIT_PROJECT_ID_PROD=
      other variables...
      

   Important:

   • Never commit the .env file to version control
   • Keep .env.example updated with any new environment variables
   • If you don't have the required environment variables, ask a team member for the values

Important

See package.json for other useful scripts like more specific clean/install commands.

Running the App

The app supports two different bundle IDs for different environments:

• Production: org.stellar.freighterwallet (default)
• Development: org.stellar.freighterdev

Run on Android:

• Development variant:

  yarn android
  or
  yarn android-dev

• Production variant:

  yarn android-prod

Run on iOS (macOS only):

• Development variant:

  yarn ios
  or
  yarn ios-dev

• Production variant:

  yarn ios-prod

Important

• The Metro bundler should automatically launch in a separate terminal window while running the yarn ios or yarn android scripts. You can also launch Metro manually through the yarn start command if needed
• If you don't have an iOS simulator or Android emulator booted it will try to boot the most recent one available while running the yarn ios or yarn android scripts
• The development variant will have "Dev" in the app name to distinguish it from production

This should get you up and running with the Freighter Mobile app in your development environment. If you encounter any issues, please refer to the React Native documentation or open an issue in the repository.