CODEWITHSUNDEEP
react-native
Waqar
Waqar

Reputation: 220

How to make multiple app variants with shared codebase in react native?

I'm trying to understand the possibility of creating a while label product with the help of react native.

The problem to solve is that by using the same codebase and some configurational changes, we get four different applications each with its own branding assets (in both ios and android).

Is it possible to do that in react native? xcode targets and android flavours are there. How can we architect this under react native way so we don't have to deal with native code/ configuration.

Upvotes: 6

Views: 1544

Answers (2)

Waqar
Waqar

Reputation: 220

So the way I ended up doing is by using 12 Factor methodology.

The configuration is loaded through the .env file loaded while building the app and then based on that env file all resources are collected on the go.

The configuration took some time but it was well worth at the end. 6 apps (3 iOS and 3 android apps) out of one codebase.

This is the article that explains how to do it.

Adding multiple target pipelines for React Native Apps (and Fastlane CircleCI deployment

Upvotes: 1

PrinzAndreVonLandmann
PrinzAndreVonLandmann

Reputation: 315

well the posibly easiest solution for this woud be you make a folder structure like this

\Common

  • assets
    • SharedPic.jpeg
  • sharedApp
    • sharedApp.JS

\app1

  • assets
    • pic.jpeg
  • App1.js

\app2

  • assets
    • pic.jpeg
  • App2.js

and then hardlink them :

fsutil hardlink create ".\app1\asstes\pic.jpeg" ".\Common\assets\SharedPic.jpeg"
fsutil hardlink create ".\app2\asstes\pic.jpeg" ".\Common\assets\SharedPic.jpeg"

fsutil hardlink create ".\app1\App1.js" ".\Common\sharedApp\sharedApp.JS"
fsutil hardlink create ".\app2\App2.js" ".\Common\sharedApp\sharedApp.JS"

but be aware! :

all the hard links are exactly the same so the bundler see's it as a real file and not a link but regardless of which file you edit all hard linked files will be edited

(i know on a datastructure-level the last statement isnt fully correct but I think its easier to understand if you think this way )

Upvotes: 0

Related Questions