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:

$ 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

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 (recommend)

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

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

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

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.

.
├── 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

Last updated