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 nvmOn Debian or Ubuntu Linux:
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bashor Wget:
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bashThe 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 node1.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 watchmanOn 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 install1.3. Yarn (recommend)
https://yarnpkg.com/en/docs/install
With MacOS:
$ brew install yarnOn 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.list1.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-cliIf 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-cliNote: (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-cliOr with yarn
$ yarn global add expo-cli1.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.jsonInstall node modules with command:
$ yarn
$ yarn startor
$ npm install
$ npm run startEasy custom your style with this app and add more business code to make complete beautiful E-commerce mobile application.
Last updated
Was this helpful?