Personalisation: MobileApp
Altering the look & feel of your mobile app is quick and easy. Just follow these steps:
Screen names
To change the names of screens as how they appear at the screen header bars and Navigation screen menu, visit /src/config/constants.js
and change any of the strings in the 'CHANGE SCREEN TITLE SETTINGS' section:
export const LOGIN = 'Login';
export const SIGNUP_STEP_1 = 'Signup (Step 1)';
export const SIGNUP_STEP_2 = 'Signup (Step 2)';
export const HELP = 'Help';
export const CODE = 'Code';
// etc., etc...
Colors
All colours in the application are controlled through these 5 colour variables:
primary1
primary2
black
white
backgroundGray
To update the app's colors, go to src/config/constants.js
and replace the hex-colour code with your preferred colour
Fonts
The application applies 2 different font types. These can be replaced with your preferred font in the following steps:
Copy your downloaded fonts (must be .otf or .ttf file types) and place these in the fonts folder located at
assets/fonts
Look for the
CustomText
component insidesrc/UI/text/CustomText.js
and replace theTitle_Font
andBody_Font
strings with your new font names. Make sure to keep the names exactly the same as the font names you applied in step 1 for this to work:
Like button animations
The app offers two animation effects for the like button used on posts.
To enable your preferred animation effect, simply change the booleans inside src/config/constants.js
to true or false:
- default is:
Interest categories
To change the names of any of the interest categories as how they appear at the Discover screen, visit /src/config/constants.js
and change any of the strings in the 'DISCOVER SCREEN INTEREST CATEGORIES SETTINGS' section:
- default is:
NOTE: It is important to realise that a change made in the MobileApp project will not immediately be updated inside the database. In other words, once any of the above interest category strings have been changed, they will no longer correctly match up with the stored interest categories for each user inside the database.
Pagination
To change the the number of items added to any of the lists used in the app once user scroll to the bottom of a list, visit /src/config/constants.js
and change the 'CHANGE INFINITE SCROLL SETTINGS' section - Default is set to 8 new items per fetch.
- default is:
List item margins
To change the the left and right margins for list items used on all list screens, visit /src/config/constants.js
and change the 'CHANGE INNER & OUTER MARGINS LEFT / RIGHT SETTINGS' section.
- default is:
Enable / disable like own posts
To change the setting that enables / disables the ability to like a user's own posts comments and replies, visit /src/config/constants.js
and change the 'ENABLE USER'S ABILITY TO LIKE OWN POSTS / COMMENTS / REPLIES SETTING' section - default set to true
Profile user status
To change the setting that sets the default user status message on users' profile pages, visit /src/config/constants.js
and change the 'PROFILE: DEfAULT STATUS MESSAGE SETTING' section.
- default is:
Last updated