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:

1. primary1

2. primary2

3. black

4. white

5. backgroundGray

To update the app's colors, go to src/config/constants.js and replace the hex-colour code with your preferred colour

// TO CHANGE THE MAIN APP COLORS, CHANGE THESE COLOUR CODES
export const COLORS = {
  primary1: '#D7F8C3',
  primary2: '#A3F8FF',
  backgroundGray: '#DDDDDD',
  black: '#020202',
  white: '#fff',
  lightGray: '#C4C4C4', // USED IN SEARCH BAR
};

Fonts

The application applies 2 different font types. These can be replaced with your preferred font in the following steps:

1. Copy your downloaded fonts (must be .otf or .ttf file types) and place these in the fonts folder located at assets/fonts

2. Look for the CustomText component inside src/UI/text/CustomText.js and replace the Title_Font and Body_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:

   export const TITLE_FONT = 'Montserrat-Regular';
   export const BODY_FONT = 'Chivo-Regular';

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:

export const ENABLE_LIKE_ANIMATION_1 = true;
export const ENABLE_LIKE_ANIMATION_2 = false;

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:

export const SELECTIONS = [ 
  // TOP LIST 
  ['Food', 'Photography', 'Beauty', 'Music', 'Gardening'], 
  // MIDDLE LIST 
  ['Nature & Science', 'Travel', 'Money & Business', 'Sports'], 
  // BOTTOM LIST 
  ['Health', 'Home & Garden', 'Books', 'Fashion', 'Technology'], 
];

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:

export const PAGINATION_LIMIT = 8;

List item margins

1: Inner container margin - 2. Outer container margin

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:

export const INNER_CONTAINER_MARGIN_LEFT_RIGHT = 50 (25 margin each side)
export const OUTER_CONTAINER_MARGIN_LEFT_RIGHT = 25 (12.5 margin each side)

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:

export const PERSONAL_DESCRIPTION = 'Still pondering on a cool catch-phrase...';