# 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

![](/files/-MFFwTK_GRLSX-O3mYMu)

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`&#x20;
2. &#x20;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.

![](/files/-MFFwWscpY-YuAI6UKgg)

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

\- default is:&#x20;

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

### Interest categories

<div align="center"><img src="/files/-MGgnQaGwie6lzrD-Skk" 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](/files/-MGgsQnFwSJDi4oUyxvm)

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

![](/files/-MGgvDXy2iRD66kfOSxq)

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...';
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://knowlephant.gitbook.io/react-native-share-backend-app/personalisation.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
