How we can support multi tenancy in React native ? Like multiple builds with same codebase.
- In iOS we can make multiple targets to support multiple builds with same codebase.
- For android we can provide gradle configurations for this purspose
but not sure how we can achieve this in react native.
When working with React Native you have as part of your project structure both the iOS and the Android projects. These are "normal" XCode and Android projects in the sense that there's nothing special about them, React is included as a library.
So you can open the project generated by the React Native CLI with XCode and define there your build targets as usual. For reference, here you can see the nodejs script they use to run the project on iOS using their cli:
https://github.com/facebook/react-native/blob/master/local-cli/runIOS/runIOS.js
If you need to do something more sophisticated, you could always just use that code as a reference and call xcodebuild/xcrun yourself. Or simply you can just run the ReactNative project from XCode directly.
Regarding Android, inside the "android" directory of your React Native project you'll find a couple of .gradle files which again you can tweak to your needs.
Since both the ios and android folders of your react native project structure are normally kept under version control you can easily keep track of these configurations.
I think this approach is different than the one suggested by Cordova/ionic, where the native projects are normally ignored and recreated on demand (e.g. on CI) through their cli.
Updated after clarifications
If you have different configs specific for each version of the app, then one option you have is to use something like this: https://www.npmjs.com/package/react-native-config that lets you specify and import configs and access them pretty much anywhere, js and native side.
If you have different logic and code, and not just simple configs, one options is to split you app components into different subfolders and then use some naming convention to dynamically import specific components for that version.
For example, if you have a HomePage
component different for every customer, you could create a customer1/Home.js folder and dynamically import that component with
const Home = require('./' + Config.customerName + '/Home.js')
You could also check if Home
is then defined, and fall back and require instead a default implementation.
If the code base diverges a lot between the different versions, I think you should consider a different approach: instead of building "one version to rule them all" you can extract shared components and logic into a separate npm package, have independent versions and builds for the apps and reference the common package.
Depending on you scenario, this approach could be simpler in the long run, as you would have more freedom to diverge from the default implementation if you really need too (e.g. a client with crazy requirements) and the structure would be more modular, without having to complicate everything.
Hope my take on this can be helpful, obviously there's no single approach or universal solution to this, as it's very dependent on your scenario.