# E-commerce Mobile App UI KIT

![](https://794396421-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LpfrMPmjMJ5AhJ61urY%2F-LpfrkeYAWuW4ugh5sRC%2F-Lpfs41aCWUmcxmUw5Zk%2F0_Dwd5jkChXUXdg_sG.jpeg?alt=media\&token=9adb2c2d-7bb4-4d17-ba4d-bfc0d738d1e2)

## 1. System Requirements <a href="#id-2a63" id="id-2a63"></a>

### 1.1. NodeJS <a href="#id-2ebb" id="id-2ebb"></a>

Make sure you have a recent version (8.11 or later) of [Node](https://nodejs.org/en/) installed globally.

We recommend use **nvm** for easy upgrade, change node version.

With macOS, we use [Homebrew](https://brew.sh/):

```
$ brew install nvm
```

On Debian or Ubuntu Linux:

```
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
```

or Wget:

```
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
```

The script clones the nvm repository to `~/.nvm` and adds the source line to your profile (`~/.bash_profile`, `~/.zshrc`, `~/.profile`, or `~/.bashrc`).

Note: If the environment variable `$XDG_CONFIG_HOME` is present, it will place the `nvm` files there.

```
# This loads nvm
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
```

After that, execute command

```
$ nvm install node
```

### 1.2. Watchman (<https://facebook.github.io/watchman/>) <a href="#id-8cd8" id="id-8cd8"></a>

Watchman exists to watch files and record when they change. It can also trigger actions (such as rebuilding assets) when matching files change.

With MacOS:

```
$ brew install watchman
```

On Debian or Ubuntu Linux, install from source:

```
$ git clone https://github.com/facebook/watchman.git
$ cd watchman
$ git checkout v4.9.0  # the latest stable release
$ ./autogen.sh
$ ./configure
$ make
$ sudo make install
```

### 1.3. Yarn **(**&#x72;ecommend) <a href="#id-2668" id="id-2668"></a>

<https://yarnpkg.com/en/docs/install>

With MacOS:

```
$ brew install yarn
```

On Debian or Ubuntu Linux:

```
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
```

### 1.4. React Native Developer Tools <a href="#b669" id="b669"></a>

Node comes with npm, which lets you install the React Native command line interface.‌ Run the following command in a Terminal:

```
$ npm install -g react-native-cli
```

> *If you get an error like `Cannot find module 'npmlog'`, try installing npm directly: `curl -0 -L https://npmjs.org/install.sh | sudo sh`.*

Or with yarn

```
$ yarn global add react-native-cli
```

‌Note: (Ubuntu) make sure you add `~/.yarn/bin` to your PATH‌

### 1.5. Expo CLI <a href="#id-801b" id="id-801b"></a>

Assuming that you have Node 10+ installed, you can use npm to install the Expo CLI command line utility:

```
$ npm install -g expo-cli
```

Or with yarn

```
$ yarn global add expo-cli
```

### 1.6. iOS Simulator <a href="#id-0d9d" id="id-0d9d"></a>

**Step 1: Install Xcode**

This step is very easy but it takes a while. Open up the Mac App Store, search for Xcode, and hit install (or update if you have it already). If you’re not able to update because your operating system is out of date, we recommend updating your operating system to the latest version and then updating Xcode. You may run into issues further down the line if your Xcode version is out of date, for example you may not be able to submit your app to the App Store.

**Step 2: Install Xcode Command Line Tools**

Open Xcode, then choose “Preferences…” from the Xcode menu (or press ⌘+,). Go to the Locations panel and install the tools by selecting the most recent version in the Command Line Tools dropdown.

## 2. Start run UI App with Expo <a href="#id-26f3" id="id-26f3"></a>

Open downloaded IMBA UI Template source code.

```
.
├── App.js
├── app.json
├── assets
│   ├── fonts
│   │   ├── # ... Font files
│   ├── icon.png
│   ├── icons
│   │   ├── # ... App icon files
│   ├── # Other Expo asset files
├── babel.config.js
├── img
│   ├── icons
│   │   ├── # ... App icons
│   └── imba
│       ├── # ... App images
├── src
│   ├── app.js
│   ├── components
│   │   ├── # ... App components
│   ├── config
│   │   └── cache.js
│   ├── lib
│   │   ├── # ... Libraries
│   ├── mobx
│   │   └── index.js
│   ├── navigators
│   │   └── AppNavigator.js
│   ├── routes
│   │   ├── CartStack.js
│   │   ├── HomeStack.js
│   │   ├── # ... Many route files
│   ├── screens
│   │   ├── AddNewAddressScreen.js
│   │   ├── AddNewPaymentScreen.js
│   │   ├── AddressScreen.js
│   │   ├── # ... Many screen files
│   ├── static
│   │   └── data.js
│   └── styles
│       ├── # ... Style files
└── package.json
```

Install node modules with command:

```
$ yarn
$ yarn start
```

or

```
$ npm install
$ npm run start
```

Easy custom your style with this app and add more business code to make complete beautiful E-commerce mobile application.

<https://youtu.be/rWwJq_cMv-U>


---

# 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://dankuanmin.gitbook.io/imba/master.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.
