Mobile App White Labeling

You can rebrand Rocket.Chat Mobile Apps to suit your style guide. You can customize the App Icons, Splash Screens, App Name, and Colors for your mobile app.

This document provides a step-by-step overview of how to white label the Rocket.Chat mobile app for both Android and iOS platforms.

Requirements

To customize your mobile apps, here are some essential requirements:

  • Intermediate knowledge of Android/iOS development and basic Javascript knowledge.

  • The repo contains targets/build flavors for our experimental and official apps. Both apps are equal but released at different paces in the stores.

  • The experimental folder contains the assets for the non-official app. If you see it, avoid worrying about breaking anything.

Set up the GitHub repository

  1. Ensure you have both iOS and Google developer accounts and the respective development environments working.

  2. Follow the getting started with ReactNative guide to set up your enviroment.

  3. Clone the Rocket.Chat ReactNative GitHub repo and checkout to the single-server branch with this command:

    git clone https://github.com/RocketChat/Rocket.Chat.ReactNative
git checkout single-server

    You can also clone the single-server branch directly by running this command:

    git clone -b single-server https://github.com/RocketChat/Rocket.Chat.ReactNative

General White Labeling

  • Create an account on Bugsnag.

  • Set server, appGroup, and appStoreId in the app.json file.

    appGroup must be the same App Group created for the iOS app

  • Change app colors in the colors.ts file.

Set up Firebase

Create a project Google Cloud Platform (GCP)

  • Sign in to Google Console.

  • Navigate to New Project.

  • Fill in the required project details and click Create. You are redirected to the newly created project page.

Create a new Firebase project

Continue with the steps in mobile app White Labeling and iOS app White Labeling depending on your what you are building.