# Customization

* Change the default Web Server
* Customize the color component
* Customize the default language
* Change the logo and Icons
* Change the splash screen

## Change the default Web Server

In order to the app can fetch data from the back-end, you have to open  src/config/index.js and edit the **hostSocket and host** option:

![](https://zinisoft.net/wp-content/uploads/2019/11/hot-socket.png)

* hotSocket: web socket for realtime chat.
* hot: web API to collect data.

## Customize the color component

Open src/config/index.js file in the project.\
You could change most of colors in COLORS section.

For example, you could change olor of the headline to any color you like, then reload the app to see the effect.

![](https://zinisoft.net/wp-content/uploads/2019/11/color.png)

## Customize the default language

{% hint style="warning" %}
 Application mobile just change language from the web setting.
{% endhint %}

By default we use English as the default language, if you need to change to your local language please modify as below:

### WEB BACK-END:

Step 1: copy default text file config/locales/en.json then translate to your language eg: de.json

Step 2: Go to config/custom.js , find "LANGUAGES" and insert your language to:

![](https://zinisoft.net/wp-content/uploads/2019/11/Screen-Shot-2020-03-16-at-12.05.46.png)

### APPLICATION MOBILE:

Step 1: copy default text file src/config/language/locales\en.js then translate to your language eg: de.js

Step 2: go to src/config/language/i18n.js and import your language: (line 5: import "de" + line 18: add translation)

![](https://zinisoft.net/wp-content/uploads/2019/11/locale.png)

Step 3: go to src\config\index.js and find this line.

![](https://zinisoft.net/wp-content/uploads/2019/11/Screen-Shot-2020-03-16-at-11.54.20.png)

Step 4: Define your language to the bottom and insert all key + text to it:

![](https://zinisoft.net/wp-content/uploads/2019/11/Screen-Shot-2020-03-16-at-11.56.51.png)

## Change the logo and Icons

In order to change icon, go to src\config\index.js and change your icons to what you want.

![](https://zinisoft.net/wp-content/uploads/2019/11/icons.png)

In order to change logo:\
Android: go to android\app\src\main\res\mipmap-hdpi\ic\_launcher.png and replace ic\_launcher file to your logo, also replace other dimensions: **mipmap-mdpi,mipmap-xhdpi, mipmap-xxhdpi, mipmap-xxxhdpi**

For iOS: Open XCode: and change Images.xcassets - AppIcon.appiconset

## Change the splash screen

For Android go to: android\app\src\main\res\drawable-xxxhdpi\splash.png then replace the splash file to what you want. Please change also on other dimensions: drawable-xxhdpi\
For iOS please refers : <https://medium.com/the-react-native-log/change-default-launch-screen-in-react-native-ios-app-544f94f1e947>

## How to config App name

Open file android/app/src/main/res/values/strings.xml and change to your App name.\
![](https://zinisoft.net/wp-content/uploads/2020/04/change-app-name.png)

## How to config build version and application Id

Open file android/app/build.gradle and change to your name own.\
![](https://zinisoft.net/wp-content/uploads/2020/04/change-build-id.png)


---

# 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://zinisoft-net.gitbook.io/kindie/mobile-app/customization.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.