# Personalisation: MobileApp

### 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

![](https://1546084265-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDo9SGV4WureLHZmE6W%2F-MFFeR4S7p3deBwnNHTR%2F-MFFwTK_GRLSX-O3mYMu%2Fpersonalisation%20\(2\).png?alt=media\&token=b321b0bf-229b-464b-9681-e24ebe5fc47b)

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

```typescript
// 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:

   ```typescript
   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.

![](https://1546084265-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDo9SGV4WureLHZmE6W%2F-MFFeR4S7p3deBwnNHTR%2F-MFFwWscpY-YuAI6UKgg%2Fbutton_animations.gif?alt=media\&token=e74d6919-771e-49b7-a4c2-eb58a230fbc8)

To enable your preferred animation effect, simply change the booleans inside `src/config/constants.js` to true or false:

\- default is: 

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

### Interest categories

<div align="center"><img src="https://1546084265-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDo9SGV4WureLHZmE6W%2F-MGcKawUzLRlN7tFSvWh%2F-MGgnQaGwie6lzrD-Skk%2FScreenshot%202020-09-08%20at%2010.19.28.png?alt=media&#x26;token=de569650-6b13-472d-9e40-e51485676ff7" alt=""></div>

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:&#x20;

```typescript
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'], 
];
```

{% hint style="warning" %}
**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**.
{% endhint %}

### 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:&#x20;

```typescript
export const PAGINATION_LIMIT = 8;
```

### List item margins

![1: Inner container margin - 2. Outer container margin](https://1546084265-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDo9SGV4WureLHZmE6W%2F-MGcKawUzLRlN7tFSvWh%2F-MGgsQnFwSJDi4oUyxvm%2Fpadding.png?alt=media\&token=9b34f339-089a-4c91-bf52-06b176f589be)

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:&#x20;

```typescript
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

![](https://1546084265-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MDo9SGV4WureLHZmE6W%2F-MGcKawUzLRlN7tFSvWh%2F-MGgvDXy2iRD66kfOSxq%2Fdescription.png?alt=media\&token=95ac1fab-ba3e-4783-8275-ddd1b253ae95)

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:&#x20;

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