It's a simple React Native application, based on this calculator, showcasing how a white label app could be implemented with React Native and Babel.
Have a look at this blog post for a detailed explanation of how it works.
This project uses EnvKey for configuration management. You need to install envkey-source to be able to run it locally:
VERSION=$(curl https://envkey-releases.s3.amazonaws.com/latest/envkeysource-version.txt) && curl -s https://envkey-releases.s3.amazonaws.com/envkeysource/release_artifacts/$VERSION/install.sh | bash
In your .env file, ensure the value of ENVKEY is set and points to the desired brand configuration from EnvKey. Then run the following command to configure the given brand:
yarn configure-brand
Note: for Mac, it is necessary to have XCode installed and on the path prior to running yarn configure-brand.
Note: if you're not on Mac, you can use the yarn configure-brand:android instead.
You can build three different versions of this app. One for each "brand": calc_co, acme and the default.
Obviously, before building it you need to run yarn install.
Ensure you start the Metro bundler manually (with yarn start) before running the app in Debug mode.
When Metro is started automatically via react-native scripts, it does not contain the required environmental variables.
yarn android or yarn ios will produce one of the following apps (depending on which ENVKEY is defined in the .env file).
- Stop the Metro bundler.
- Change value of
ENVKEYin the.envfile. - Run
yarn configure-brand. - Start the Metro bundler with
yarn start --reset-cache(resetting the bundler cache is important here) - Start the app with
yarn androidoryarn ios
- Usage of the Whitelabelling mechanism: docs/usage.md
- Intricacies and mechanics of the Whitelabelling mechanism: docs/mechanics.md
- Known issues: docs/known_issues.md
If you like my work and thinking about using it in a commercial project, please consider buying me a coffee. Thank you.