19

Building iOS and Android apps with only one project is pretty awesome. But is it also possible to build multiple apps with different names, icons, etc.

This could be very helpful if you build apps with the same layout and maybe 95% same of the functions/code/algorithms:

  • different target-groups (recipes app for fitness, vegans, veggies, eco,...)
  • different sports (news for football, basketball, tennis ...)
  • different customers (business app for customer A, B and C)
  • ...

Things, which could be different per app:

  • App name
  • App icons
  • SplashScreen
  • Design
  • Settings (API URL, ...)
  • Some code (default function/components maybe could get overwritten by app-based custom files)

Maybe it would be the perfect solution if you have a directory flavors where you can put all the files which you want to use to overwrite the default code-base.

Somebody here who released something similar or any ideas how to solve this?

rakete
  • 2,953
  • 11
  • 54
  • 108
  • https://developer.android.com/studio/build/build-variants.html#product-flavors – Kuffs Nov 13 '17 at 14:06
  • How to overwrite iOS functions with Android flavors? ..... – rakete Nov 13 '17 at 14:11
  • You should ask separate questions as IOS and Android are highly unlikely to have the same solution. My comment was obviously related to Android only. – Kuffs Nov 13 '17 at 15:13
  • For the app name, icon, etc. maybe there are different solutions for iOS and Android but I think for the code part it's not different.. We are talking about RN. The code I am talking about is not native.. – rakete Nov 13 '17 at 15:16
  • Please take a look at this thread: https://stackoverflow.com/questions/22875948/how-to-provide-different-android-app-icons-for-different-gradle-buildtypes – Ronen A. Nov 21 '17 at 07:26

8 Answers8

7

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.

Roman Osypov
  • 1,321
  • 12
  • 10
3

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.

enter image description here

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:

enter image description here

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.

artkoenig
  • 7,117
  • 2
  • 40
  • 61
1

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!

enter image description here

enter image description here

enter image description here

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

You can refer this great tutorial by Appcoda!

Ketan Parmar
  • 27,092
  • 9
  • 50
  • 75
0

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.

Laurent S
  • 4,106
  • 3
  • 26
  • 50
0

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.

dijipiji
  • 3,063
  • 1
  • 26
  • 21
0

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.

Sumit Jangra
  • 651
  • 5
  • 16
0

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.
bukkojot
  • 1,526
  • 1
  • 11
  • 16
0

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.

  1. 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\"'
Hatem Alimam
  • 9,968
  • 4
  • 44
  • 56