How to add your own branding
Once the app is hooked up to your Wordpress site, you probably like to start adding your own branding. Here I will show you how to personalise your app.
Step 1: Create a new app icon
The app icon controls how your app is displayed in your phone's app library. This makes the app icon an import part of how your app is branded to your users.
When creating a new app icon, make sure that:
the icon is of .png type.
you create multiple icon sizes, following the dimensions outlined in your Xcode project. A useful tool to quickly create all the required file sizes can be found here. See images below for how to find the exact icon upload location inside XCode:
Step 2: Create a new Splash screen image
The Splash screen is the first thing the user sees when opening up your app -- even before the Welcome screen (the first actual screen).
When creating a new Splash screen image, make sure that:
the image is of .png type.
the image is of large enough dimensions to look crisp on all screen sizes. The dimensions I use are: 1500 × 3248.
all three image slots are filled. See image below:
Step 3: Branding your Welcome screen
The Welcome screen is the first actual screen users see the first time they open up your application after installation. The Welcome screen lets you modify the background image, welcome title, welcome body text and the button text.
To replace the Welcome screen background image, create a new image:
of .png type.
of max. 1500 x 3248 dimensions (but large enough to look crisp on different iPhone screen sizes).
with exact same file name as the image you will be replacing.
...and replace existing Welcome image with your own at the below location:
Note: Replacing the Welcome and Onboarding images can be done inside your code editor. Your new images will be applied automatically to both your iOS and Android apps.
To add your personal Welcome text, open up the /src/config/constants.ts file and look for (and replace existing strings with your own):
Step 4: Branding your Onboarding screen
The Onboarding screen is the place to inform your app users what to expect in your app the first time they open your application. The onboarding screen lets you add up to three different slides, each with a different image, title and body text.
To change your Onboarding images, create up to three different images:
of .png type.
of max. 300 x 300 dimensions.
with exact same file names as the three images you will be replacing.
...and replace existing onboarding images with your own at the below location:
To add your personal Onboarding slide texts, open up the /src/config/constants.ts file and look for (and replace existing strings with your own):
Step 5: Branding your Settings drawer
The Settings drawer is what users see when pressing the Settings button in the top left. The Settings drawer lets you add your personal logo at the top of the view.
To replace the logo image, create a new image:
of .png type.
of max. 130 x 50 dimensions.
with exact same file name as the images you will be replacing.
...and replace existing logo image with your own at the below location:
Step 6: Branding your app with a tag-line
The tag-line is what the users see in the center of the header bar at many of the app's screens. You can choose to replace the tag-line with your own or remove the existing tag-line, by changing the HEADER_TAG variable inside /src/config/constants.ts as follows:
Step 7: Branding your Search view title text
The Search view text is what users see when they press the 'Search' button on the Home screen (at the top of the search view).
You can choose to replace the Search title text with your own by changing the SEARCH_TEXT variable inside /src/config/constants.ts as follows:
Step 8: Branding the app with your own colour scheme
The app applies a series of global colours throughout the application that can easily be modified from the /src/config/constants.ts as follows:
Note: All colours used in the app are controlled by these global styles.
Last updated
