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
1.2. Watchman (https://facebook.github.io/watchman/)
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.
Last updated
Was this helpful?