Imba
Search…
E-commerce Mobile App UI KIT

1. System Requirements

1.1. NodeJS

Make sure you have a recent version (8.11 or later) of Node installed globally.
We recommend use nvm for easy upgrade, change node version.
With macOS, we use Homebrew:
1
$ brew install nvm
Copied!
On Debian or Ubuntu Linux:
1
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
Copied!
or Wget:
1
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash
Copied!
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.
1
# This loads nvm
2
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
3
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
Copied!
After that, execute command
1
$ nvm install node
Copied!
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:
1
$ brew install watchman
Copied!
On Debian or Ubuntu Linux, install from source:
1
$ git clone https://github.com/facebook/watchman.git
2
$ cd watchman
3
$ git checkout v4.9.0 # the latest stable release
4
$ ./autogen.sh
5
$ ./configure
6
$ make
7
$ sudo make install
Copied!

1.3. Yarn (recommend)

With MacOS:
1
$ brew install yarn
Copied!
On Debian or Ubuntu Linux:
1
$ curl -sS https://dl.yarnpkg.com/debian/pubkey.gpg | sudo apt-key add -
2
$ echo "deb https://dl.yarnpkg.com/debian/ stable main" | sudo tee /etc/apt/sources.list.d/yarn.list
Copied!

1.4. React Native Developer Tools

Node comes with npm, which lets you install the React Native command line interface.‌ Run the following command in a Terminal:
1
$ npm install -g react-native-cli
Copied!
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
1
$ yarn global add react-native-cli
Copied!
‌Note: (Ubuntu) make sure you add ~/.yarn/bin to your PATH‌

1.5. Expo CLI

Assuming that you have Node 10+ installed, you can use npm to install the Expo CLI command line utility:
1
$ npm install -g expo-cli
Copied!
Or with yarn
1
$ yarn global add expo-cli
Copied!

1.6. iOS Simulator

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

Open downloaded IMBA UI Template source code.
1
.
2
├── App.js
3
├── app.json
4
├── assets
5
│ ├── fonts
6
│ │ ├── # ... Font files
7
│ ├── icon.png
8
│ ├── icons
9
│ │ ├── # ... App icon files
10
│ ├── # Other Expo asset files
11
├── babel.config.js
12
├── img
13
│ ├── icons
14
│ │ ├── # ... App icons
15
│ └── imba
16
│ ├── # ... App images
17
├── src
18
│ ├── app.js
19
│ ├── components
20
│ │ ├── # ... App components
21
│ ├── config
22
│ │ └── cache.js
23
│ ├── lib
24
│ │ ├── # ... Libraries
25
│ ├── mobx
26
│ │ └── index.js
27
│ ├── navigators
28
│ │ └── AppNavigator.js
29
│ ├── routes
30
│ │ ├── CartStack.js
31
│ │ ├── HomeStack.js
32
│ │ ├── # ... Many route files
33
│ ├── screens
34
│ │ ├── AddNewAddressScreen.js
35
│ │ ├── AddNewPaymentScreen.js
36
│ │ ├── AddressScreen.js
37
│ │ ├── # ... Many screen files
38
│ ├── static
39
│ │ └── data.js
40
│ └── styles
41
│ ├── # ... Style files
42
└── package.json
Copied!
Install node modules with command:
1
$ yarn
2
$ yarn start
Copied!
or
1
$ npm install
2
$ npm run start
Copied!
Easy custom your style with this app and add more business code to make complete beautiful E-commerce mobile application.
Last modified 2yr ago