# Mobile App Configuration

After completing the installation, you must configure the mobile application so it can connect to your backend and match your branding requirements.

## 🔗 Step 1: Connect to the API

This is the most important step. Without the correct API URL, the mobile app will not fetch any investment projects or user data.

1. Locate the `.env` file in the `mobile` root directory.
2. Update the `EXPO_PUBLIC_API_BASE_URL` with your domain.

    # Production API URL (Without trailing slash)
    EXPO_PUBLIC_API_BASE_URL=https://app.yourinvestra.com

    # Shared API Security Key (Should match your Admin Panel settings)
    EXPO_PUBLIC_MOBILE_APP_KEY=1234567890

Important

If you are developing locally, DO NOT use `localhost`. Instead, use your machine's local IP address (e.g., `http://192.168.1.100:8000`) so your mobile device can access the server.

## ☁️ Step 2: Firebase Integration

Firebase is used for Push Notifications and Google Social Login. You will need to create a project on the Firebase Console.

### 📦 Config File Checklist:

- [ ] Android: Download `google-services.json` and place it in the `mobile/` root.
- [ ] iOS: Download `GoogleService-Info.plist` and place it in the `mobile/` root.

Push Notifications

Once the config files are replaced, ensure you have enabled Cloud Messaging in your Firebase project settings to allow the app to receive push notifications.

## 🎨 Step 3: Branding & Customization

You can change the application name, package ID, and icons by modifying your app config file such as `app.json` or `app.config.ts`.

### ✅ Branding Checklist:

1. App Identity: Update the name and IDs in your app config file.

       {
         "expo": {
           "name": "Your App Name",
           "slug": "your-app-slug",
           "ios": {
             "bundleIdentifier": "com.yourdomain.yourapp"
           },
           "android": {
             "package": "com.yourdomain.yourapp"
           }
         }
       }

1. App Icons: Replace the images in the `assets/images/` directory.

- `icon.png`: Main square icon (1024x1024).
- `adaptive-icon.png`: Android-specific icon.
- `splash-icon.png`: Icon used on the loading screen.

## 💳 Step 4: Stripe Payment Setup

Investra includes built-in support for Stripe payments. To enable it on mobile, follow these steps:

1. Admin Panel: Enter your Stripe credentials into the Admin Settings.
2. app.json: Configure the `@stripe/stripe-react-native` plugin.

    {
      "expo": {
        "plugins": [
          [
            "@stripe/stripe-react-native",
            {
              "merchantIdentifier": "merchant.com.yourdomain.yourapp",
              "enableGooglePay": true
            }
          ]
        ]
      }
    }

⚠️ Important

Ensure your Merchant Identifier is unique and matches your Apple Developer portal setup if you plan to use Apple Pay.

## 🚀 Step 5: Build Preparation

Once you have completed all configurations, your app is ready for testing and release builds.

### Local release commands

Platform | Command | Description
--- | --- | ---
Android | `npx expo run:android --variant release` | Build a release-ready APK/AAB locally.
iOS | `npx expo run:ios --configuration Release` | Build a release-ready IPA locally.

## 🎉 Ready for Launch

Your Investra mobile app is now configured and ready for build and release.

For cloud builds with Expo EAS, follow the Mobile App Installation guide. If you need further help with publishing to the Play Store or App Store, please refer to the official Expo Documentation.