# How to customise styles & components

### Customise Your App

Components can be easily customised by following the guidelines below:

### How to customise component styling

**Step 1:** Find your component by following the component tree: `Screen - Child component - Grandchild component` , etc. (Typically there are no more than three levels). Inside your code editor, click on the component name while pressing command (mac) / ctrl (windows) on your keyboard.

**Step 2:** Each group of components (buttons / charts / lists / views / etc.) share one `styles.js` file, which is imported somewhere at the top of each component file...

```
import { commentListItemStyles as styles } from './styles'; 
```

...and applied inside the style prop on a component inside the parent component's return statement:

```
//... SOMEWHERE INSIDE RETURN STATEMENT

<View
  style={styles.descriptionView}
  onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
>
  <Text
    text={item.description}
    fontFamily={BODY_FONT}
    style={styles.comment}
  />
</View>

//... REST OF COMPONENT
```

**Step 3:** Change the style properties, and saving your changes (command / ctrl S) will immediately render the updated style in your iOS simulator / android emulator / expo client.

```
export const commentListItemStyles = EStyleSheet.create({
  descriptionView: {
    height: 45,
  },
  comment: {
    width: VIEW_WIDTH - 64 - 82,
    marginTop: 25,
    marginLeft: 40,
    marginRight: 25,
    opacity: 0.8,
    fontSize: 14,
  },
  border: {
    width: VIEW_WIDTH - 40 - 82,
    marginLeft: 40,
    marginTop: 12,
    height: 1,
    backgroundColor: '$black',
    opacity: 0.2,
  },
});
```

### How to add new components

Components can be easily extended by adding components. These are the steps:

**Step 1:** Import the component at the top of the file of the component that you are going to modify...

```
import { CustomText as Text, BODY_FONT } from '../text/CustomText';
```

...but make sure that you are importing from the correct folder:

* Same folder: `import ... from './text/CustomText';`
* Different folder same level: `import ... from '../text/CustomText';`
* Different folder one level up: `import ... from '../../text/CustomText';`

**Step 2:** Place the imported component inside the parent component's return statement...

```
//... SOMEWHERE INSIDE RETURN STATEMENT

<View
  style={styles.descriptionView}
  onLayout={(event) => setHeight(event.nativeEvent.layout.height)}
>
  <Text
    text={item.title}
    fontFamily={TITLE_FONT}
    style={styles.commentTitle}
  />
  <Text
    text={item.description}
    fontFamily={BODY_FONT}
    style={styles.commentDescription}
  />
</View>

//... REST OF COMPONENT
```

...while keeping the following rules in mind:

* A component is always wrapped inside angle brackets like this: `<YourNewComponent />` or `<YourNewComponent><ChildComponent /></YourNewComponent>`
* A component can have required props as well as optional props. Which props are required and which are optional is declared in the components PropTypes, which can be found at the bottom of a component's file:&#x20;

```
// CUSTOMTEXT HAS 1 REQUIRED PROP AND 3 OPTIONAL PROPS
// NOTE THAT PROPS MUST COMPLY TO SPECIFIED TYPES, SUCH AS 'STRING'
// OR 'NUMBER'
CustomText.propTypes = {
  text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
  fontFamily: PropTypes.string.isRequired,
  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
  numberOfLines: PropTypes.number,
};
```

{% hint style="warning" %}
Be aware that removing components from your project is possible - if you know what you're doing - but could result in serious complications and could potentially break the application.
{% endhint %}


---

# 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/customisation.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.