What is it?

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.

Local setup

EnvKey

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

Select which product brand you work on

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.

Building

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.

Running

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).

Switching between the brands

Stop the Metro bundler.
Change value of ENVKEY in the .env file.
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 android or yarn ios

More detailed docs

Usage of the Whitelabelling mechanism: docs/usage.md
Intricacies and mechanics of the Whitelabelling mechanism: docs/mechanics.md
Known issues: docs/known_issues.md

Funding

If you like my work and thinking about using it in a commercial project, please consider buying me a coffee. Thank you.

phuongwd/reactNative-babel-wla