How to create multiple react native apps with same functionality

Question

I am currently building a mobile app using react native. This is a parent app where parents can view marks, homework, fee details etc. We work with multiple schools and each school will need an app of their own. Only changes between these apps as of now is the splash screen and the app icon.

What can I do to keep my codebase more organized and less redundant between every app so that it will be easy to maintain, and also for new releases?

Is it like a node package which I can import into all of my apps? — Kireeti K, Jul 24 '18 at 11:54
no its complex managment tool for projects with CLI, etc... read more on github.com/lerna/lerna — dvvtms, Jul 24 '18 at 11:56

score 7 · Answer 1 · answered Jul 24 '18 at 13:11

I have done a similar task before. I ported 4 different apps with unique styles from a single react native code base. You can read some related bits here.

Basically you just need to rename your app before building for ios and android.

If you need to apply different styles it is a much harder task just to explain here. However to give a hint, you need to make your app styles reusable like a theme. In my case I was using nativebase themeing. And before renaming the project I was changing the theme folder to be used for each app with a bash script. This gist might give you an idea.

score 2 · Answer 2 · answered May 09 '19 at 14:43

For those looking for an answer,

The right way to build different apps out of the same codebase is to use android variants https://developer.android.com/studio/build/build-variants. This will allow you to sign your app with different keys for each variant. Each of these variants needs to have an appropriate folder inside the android directory, which is the place you configure splash screen, assets etc.

If you are using expo, this is not possible as you are not supposed to mess with native code. expo only supports release channels (dev, staging, prod) versions of your app.

Note: I didn't have to work with ios, so can't provide any useful links myself. But I am sure there will be something similar.

score 0 · Answer 3 · answered Jun 08 '23 at 09:33

I solved this by using a js script that moves your folder for one project to a base code, here is an example:

// Import necessary modules
const fs = require('fs-extra');

// Determine the app environment based on the script name
const scriptName = process.argv[2];
let assetFolder;

if (scriptName === 'project1') {
  assetFolder = './project1/assets';
} else if (scriptName === 'project2') {
  assetFolder = './project2/assets';
} else {
  console.error(
    'Invalid script name. Please provide "project1" or "project2" as argument.',
  );
  process.exit(1);
}

// Use the determined folders for the build
console.log('Script Name:', scriptName);
console.log('assetFolder:', assetFolder);
fs.copySync(assetFolder, './src/assets');

And run it with node 'theNemeOfYourScript'.js project1

Put a script to a root directory And make your directory structure like this:

project1
  -assets
    -someFile
project2
  -assets
    -someFile
src
  -assets
    -`You can put a dummy file for initial`

And use imorts as you would usually use them as import * from 'src/assets/someFile'

How to create multiple react native apps with same functionality

3 Answers3