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 quizzes or user data.

1. Locate the .env file in the mobile-app 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.yourquizix.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-app/ root.
• iOS: Download GoogleService-Info.plist and place it in the mobile-app/ 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 the app.json file.

✅ Branding Checklist:

1. App Identity: Update the name and IDs in app.json.

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

2. 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

Quizix 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: Generating Production Builds

Once you have completed all configurations, you can generate the production binary (APK/AAB for Android or IPA for iOS) for distribution.

Build 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 Quizix mobile app is now configured and ready for production! If you need further assistance with publishing to the Play Store or App Store, please refer to the official Expo Documentation.