How to build multiple apps from one project with different app name, icon, settings,

This is a problem I have been solving in my projects last days. And I think I have some good (not perfect) solution so far.

Idea. We don`t have any built-in functions to help us handle this case, so we can use some external manipulation that can do the job. What we need is just multiple Android and iOS projects and single JS code base.

Implementation. I`ve come to this project structure:

• ios
• android
• manager
• src

ios and android folders is well known to you, they are native project folders.

src is a folder with JS code, you can organize it whatever you want

manager is most interesting one. Here we can store multiple native project files. We can have multiple native project folders in it, for example app1-android app1-ios app2-android app2-ios. And when we want to work on app1 we just copy app1-ios and app1-android to our root ios and android folders, so the actual project is app1. When we are done with app1 we can save android and ios folders to our manager and then just copy app2-ios and app2-android to root ios and android. And we are all good to develop our app2.

We can do it manually. But we are developers and we can make it much easier. I`ve written a PHP script that makes it as easy as php save.php -a app1 and php set.php -a app1 to copy from manager to root and backwards. Moreover, it takes care of not copying some unimportant staff (pods folder in ios, build in android etc.) and running pod install to ensure we have all pod in actual project.

I stick to one package.json file to have all npm modules installed once, so I don`t have to run npm install after each project switch.

Afterall, we can have as much projects as we wish in one repo, we can customize each one independently.

PS If you want me to share my scripts I`ll do it as fast as I can (need some time to prepare it for github and to write some more detailed instructions), just let me know.

I did this for about 100 different native apps per platform (iOS/Android), sharing the same code base. I manage this setup for about 2 years now and I am still happy with it.

Here is the iOS part:

I use targets with different plist/pch files.

Save files that shuld differ per app in a separate directories, named by the app name. Check the corresponding target, if adding the file to the project:

By using the same filename you can "override" the file for different targets.

The Android part:

I use one gradle module for the common part and one module per app for the customizing. I also use gradle variables for common values definitions (minSdkVersion, compileSdkVersion etc.). Only the following settings differs per app: applicationId, versionCode, versionName. Here is an example file for a custom app:

apply plugin: 'com.android.application'

android {
    compileSdkVersion rootProject.ext.compileSdkVersion
    buildToolsVersion rootProject.ext.buildToolsVersion

    defaultConfig {
        applicationId "..."
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 28
        versionName "1.0"
    }
    signingConfigs rootProject.ext.signingConfigs

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
            signingConfig signingConfigs.release
        }
    }

}

dependencies {
    compile project(':apps:common')
}

You can override the resources (app icon, images, strings etc.) in the corresponding res folder of an app module (use the same filename for the same resource).

Don't forget to include all your modules in the settings.gradle.

You can use multiple targets.

You can create target by below steps :

Go to project navigator -> Right Click on your app name under target -> Select Duplicate -> from popup select Duplicate only .

And you will find duplicate target. Now you can take another or extra app icon and launch image in your assets and for that target you can set it.

Refer below screenshots for better understanding!

So, select newly maded target and make changes by selecting it from general tab.

You can refer this great tutorial by Appcoda!

We do something similar to what you want do, but on a much more limited range. We have various builds of our app, each with a name, logo, design, API URL...

It's only built for android, so it's essentially a few flavors as mentioned in the comments above. (I don't know what the equivalent system is for iOS)

But we also use https://github.com/luggit/react-native-config that provides a way to share these specific variables/settings between both the native (android and iOS) and javascript code. All you need is setup a .env.myversion file which contains the settings you need, something like:

API_URL=https://my.server.com/ LOGO_FILE=/path/to/the/right/logo COLORSET=shades_of_blue

The correct file is pulled in at build-time so your app has the correct version of each setting and you can then call these variables from within your code, and branch based on what version you're using. The benefit is that it works everywhere. The downside to this is that you might be shipping some extra stuff with your apps if you have all this in the JS layer rather than defining it in the build system with flavors. I guess it's a tradeoff between convenience and performance/efficiency that you need to decide on based on your use-case.

In Xcode you can simply duplicate your Target and create a new one with a new plist which means you can change the app name, icon, splash bundle and other settings as required.

In XCode you can Make different build confiugrations for different-different apps in single project(means Dev,alpha,beta,Prod,Debug,Release),With the help of this solution you are able to change AppName,AppIcon,BundleId,URLs,SplashScreen etc for different builds.

I created a website, where users can specify their content, icons, name and package name, and many other options like including advertisement SDK in app. After small payment, user can get created APK with certificate or sign app manually. Generation of apk takes a few seconds. APK is ready to upload to PlayStore. This is project was with high price, but my customer is happy.

How it done?

1. Create some templates for code. You can buy it on some sites.
2. Split optional code in separate files
3. If you can't splite code in separate file (for AndroidManifest.xml, for example), you can include comment with some keys (instructions for post-processing)
4. Generate icons from user content/specified icons.
5. On user request, just copy all selected files in same directory, with simple text processor remove unnecessary code (use comments from step 3), complile it, ship APK to user.

Basically there are two different options:

Option 1: OS Builds/android flavours:

Using iOS Builds and/or android flavours have some disadvantages in a react-native project:

1. React-native link only links the first target on Xcode. You’ll have to manually link libraries for further targets. However in react-native 0.60+ there is auto-linking, and this could be fixed with a little tweak to the podfile
2. React-native run-android may fail to launch the app if the app id differs from the package id.
3. Might be complex overtime to maintain a single native project with all the different builds/flavours and all the assets and resources that are included in a single project.
4. Requires some extra knowledge with xcode and android studio/gradel.

Option 2: Natives approach (which I personally prefer)

Based on the answer of Roman Osypov, I have came up with this approach with an implementation.

Currently each react-native project has two native folders, ios and android, each one represents the native project of the platform.

Lets assume we have two different bundles/apps with the same code base but different resources/assets etc..

CabApp TaxiApp

The main idea is to swap but keep in sync the root ios and android folders with their "natives" source.

1. create a folder in the root of the project called natives
2. copy the current ios and android folder of the main project to the natives folder, lets assume it's CabApp, and rename those folder into the following: CabApp-ios CabApp-android
3. do the same for TaxiApp, but remember to change the bundleId, the identifiers, assets etc.. of the native projects
4. delete ios and android main folders in the root of the project and add them the .gitignore
5. install the following dev dependencies yarn add -D rimraf sync-directory ttab
6. now the first time the project is pulled you need to set your "app" for example if you want to work on TaxiApp you can execute the following: yarn ios-TaxApp which you can define in the scripts in the package.json

yarn rimraf ios && yarn rimraf android && yarn syncdir natives/TaxiApp-ios ios -c && yarn syncdir natives/TaxiApp-android android -c && cd ios && pod install && yarn

Basically this command deletes the root folders ios + android and sync the folders from the natives folders to the root ones.

7. The final step would be syncing back and watching the modifications from the "temp" ios and android folders back to the natives respective app-platform. now in your start script for ios for example, you can add the following script yarn ios-TaxiApp which you can define as:

yarn ttab 'yarn syncdir ios natives/TaxiApp-ios -w -c' & yarn ttab 'yarn syncdir android natives/TaxiApp-android -w -c' & yarn ttab 'yarn react-native run-ios --simulator=\"iPhone 11\"'

Thanks @Roman for the answer. Here is the php script which might help others.

<?php

// Define the root and manager directories
$rootDir = __DIR__;
$managerDir = $rootDir . '/manager';

// Parse command line arguments
$options = getopt("a:");

// Check if the app argument is provided
if (!isset($options['a'])) {
    echo "Please provide the app name using the -a flag.\n";
    exit(1);
}

// Extract app name
$appName = $options['a'];

// Check if the app directories exist in manager
$appDirIOS = "$managerDir/$appName-ios";
$appDirAndroid = "$managerDir/$appName-android";

if (!file_exists($appDirIOS) || !file_exists($appDirAndroid)) {
    echo "App directories not found in the manager.\n";
    exit(1);
}

// Copy iOS files
copyDir("$appDirIOS/", "$rootDir/ios/");

// Copy Android files
copyDir("$appDirAndroid/", "$rootDir/android/");

// Function to recursively copy directories
function copyDir($source, $destination) {
    $dir = opendir($source);
    @mkdir($destination);

    while (($file = readdir($dir)) !== false) {
        if (($file != '.') && ($file != '..')) {
            if (is_dir($source . '/' . $file)) {
                copyDir($source . '/' . $file, $destination . '/' . $file);
            } else {
                copy($source . '/' . $file, $destination . '/' . $file);
            }
        }
    }

    closedir($dir);
}