TUTORIAL FOR ADVANCED USERS
Quickest way to White-labeling MAUI iOS & Android apps using shell scripts
Learn expert automation scripting skills that can help you in the future universally across frameworks and languages
White-labeling is a good way for companies to provide customizations for specific customers who are willing to pay a higher amount to have their name on the application
When I tried to research on ways to Whitelabel my MAUI app, I couldn’t find any good resources. There was some about Xamarin, which will still work for MAUI, but then I realized there was nothing that used the magic of shell scripting which I learnt & fell in love with a few years ago.
Why should you use this method? Well what you’ll notice in the code below, that apart from changing 40+ files with just 4 lines of code, it also works really well with GIT repository code management, CI/CD pipelines & tools like MS AppCenter, as you can even pass environment variables specifying the white-label script you want to invoke.
In the tutorial below, I will show the steps I took to migrate my application for the d/Deaf-BeAware, into Brand1:
Steps to Whitelabel using Automation Scripting
Step 1: Creating the Shell Script
In the MAUI app’s folder/directory create a new file brand1.sh
with this:
grep -rl 3071CF . | grep -v "brand1.sh" | xargs sed -i "" -e 's/3071CF/CE102C/g'
grep -rl BeAware . | grep -v "brand1.sh" | grep -v ".git" | xargs sed -i "" -e 's/BeAware/Brand1/g'
grep -rl com.tfp . | grep -v "Info.plist" | grep -v ".git" | grep -v "brand1.sh" | grep -v "MauiProgram" | grep -v "MainActivity" | grep -v "WebAuthenticatorActivity" | grep -v "AppDelegate" | grep -v "AccessTokenService" | grep -v "LoginPage" | xargs sed -i "" -e 's/com.tfp/com.brand1/g'
cp -a brand1/. BeAware
Step 2:
Create a new directory brand1
, and put the images I want to replace in the right sub-directories/sub-folders. I realized I only needed to change 5 files (shown in picture) so I made sure to use the same file name, format & dimensions
Step 3:
Run the script in your terminal using sh brand1.sh
et puis Voilà!
Breakdown of the Code
- The
grep
command is case sensitive and “searches one or more input files for lines containing a match to a specified pattern” and with the help of the-rl
parameter, returns the matching file names. This helps us find all the files with items like brand color (3071CF), App Name (BeAware), BundleId (com.tfp), etc. The super useful-v
parameter ignores files with those names, to avoid the string being changed from thatbrand1.sh
script file, your.git
folder, etc. - That list of lines is then passed into the
sed
command which finds and replaces the old string within those files with the new string values like a new brand color(CE102C) - The
cp
command then recursively copies the image files, which cannot be code altered in our case and so they need a complete replacement. This can additionally be done for CSharp or XAML files that require any significant code changes.
Other Sage Advice
- Don’t commit the white-label brand specific changes you make with your shell script that will effect the regular app. Try to restrict your file changes in the
brand1
directory. - Keep in mind that Apple frequently rejects apps that it deems are too similar to the other ones on your account, and especially if the App Icon is the same.
- If the app you are publishing belongs to a different company, Apple might require the app to be published from that company’s account. Occasionally they will let you pass by attaching a letter in your submission stating that the 3rd party company permits you to use their name on your App Store Account. In that case, you also have to make sure you use the right Privacy policy link in-app and on the store listing
- If you are using Push notifications (like OneSignal) in your app, there’s some more work you will likely need to do. On iOS, the notifications for the app now use P7 certificates, so you might be able to share it across both apps if you use the same Apple Developer account, but you definitely need to register a new application in OneSignal if using a different Apple Developer account. On Android you might not need to create another Firebase project
Watch the video below to see the above code doing it’s magic in real time:
If you have any questions, feel free 🇵🇸 to reach out with thanks/questions on LinkedIn, and please follow us on social media to check out some of the cool stuff we build!
Are you organizing an in-person live event/meetup/conference and want to add accessibility for the Deaf or Non-native speaking attendees? Experience ConferenceCaptioning’s 10-second setup for live transcription & translations to 20+ languages at your event today!