“Antiqueruby - React Native Material Design” Documentation by “Alian Software” v2.14


“Antiqueruby - React Native Material Design”

Created: January 2018
Updated: May 2019
By: Alian Software
Email: support@aliansoftware.net

Thank you for purchasing our code. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!

Table of Contents


Run project in Android and IOS - top

Antiqueruby React native Project is in folder "Antiqueruby". To any view or edit files from this project you must have Editor like Atom, Nuclide or WebStorm .

To run this project in IOS you must have Mac OS in your Device with latest Xcode software installed.

To run this project in Android , you must have Android studio 3.0 or heigher version on your device.

To run this project you have to follow below steps in command prompt :

Take Guidance from here : link

In above Link select "React Native CLI Quickstart" and Choose Development OS and Target OS

  1. Reach to your project directory.
  2. Install npm : npm install
  3. npm install --save-dev jetifier
  4. npx jetify
  5. GeoLocation API key

    Take Guidance from here : Google Developer Accoount

    • In IOS : Add Geolocation API key in AppDelegate.m
    • In Android : Add Geolocation API key in AndroidMainifest.xml
  6. Start npm : npm start
  7. For Android : We are Use List of Version
  8. In Gradle Wrapper.properties Gradle version is 5.4.1
  9. Project Build.Gradle SDK Version:
    • minSdkVersion = 16
    • targetSdkVersion = 28
    • compileSdkVersion = 28
    • buildToolsVersion = "28.0.3"
    • googlePlayServicesVersion = "16.0.0"
    • androidMapsUtilsVersion = "0.5+"
  10. Project Build.Gradle Build Gradle Tools Version:
    • classpath('com.android.tools.build:gradle:3.4.1')
  11. Run Project :
    • In IOS : react-native run-ios
    • In Android : react-native run-android
  12. If Build Faild in Terminal :
    • For IOS : Open Project in Xcode and Clean and Build Project
    • For Android : Open Project in Android studio and Clean and Build Project
    • For Android :Inside Andeoid studio Remove MinimumSdk From react-native-i18 in AndroidMainifest file and Check Project SDK version and SDK version in Build.Gradle in react-native-I18 bothe are same

Introduction - top

This application consists of collection of screens like Drawers, Social, Sign In, Sign Up, Profile, and Walkthrough. These screens are found commonly in day to day apps. You can use code from here by just copy/pasting it into your project.

Project Structure

In the main project, you will have LaunchScreen.js which implements left menu (Navigation Drawer) for all the screens. In Launchscreen.js you have navigation for all the 6 left navigation items : Drawers, Social, Sign In, Sign Up, Profile, and Walkthrough and their related .js files path to open perticluar files .You can get all path from the LaunchScreen.js file . Like "App > Containers > Drawer> Drawer1 > index.js"

All the projects consists of several sub folders e.g. index.js , style.js, ControlPanel.js , Tablist.js, tabliststyle.js. The .js files are separated in their particular folder, according to their types for ease of understanding the structure.

The MainScreens folder inside Container folder comprises of various mainScreens like Drawer, Social , Profile etc Folders.

The folder name like Drawer , Profile are mainly consists of the Screens with their folders . E.g Folder Drawers consist of Drawer01 folder which contains related .js files for their perticular screen.

The folder fonts and Images consists of the fonts and images used in the screens respactively.

The Theme folder contains Application styles like Colors.js , Fonts.js , Images.js , Matrics.js . And Can get Path for all the .js file from index.js file.

In the first screen, We have give you three buttons "General Material UI", "ECommerce Material UI" and "Music Material UI". Which you can find from below path:

From "General Material UI", You can find Navigations, Social, SignIn, SignUp, Profile, WalkThrough and Admob files

From "ECommerce Material UI", You can find screens for ECommerce which are given in "App> Containers> ECommerce" folder.

From "Music Material UI", You can find screens for Music which are given in "App> Containers> Music" folder.

"General Material UI" Related Main Files:


Foreign projects - top

This app uses many projects from GitHub. All of them have licence that allows us to import the project in our project and then sell it on Envato.

We have listed all the foreign projects that are used in this project with a link to it. If you have any questions regarding foreign projects, don't hesitate to email us. We will help you.

Projects we used for this project are:

Every project from GitHub is imported into workspace and converted to library project, So, if you would like to use features from these GitHub projects, you can import them directly into your own project gradle as explained in the above links.

Note : Above method requires active internet connection


Drawers - top

For creating drawers, we have used 'react-native-drawer' package. link

Step 1 - (Installation)

You can get any imported packages by following below steps and install it :

For any type of Animation we have used 'react-native-animatable' package. link You have to install this package to use an Animation in your project.

We have used 'react-native-vector-icons' package for Search, Menu etc icons. link You have to install this package to use the Vector Icons in your project.

You can import this package in file like,

Step 2 - (Usage)

To get Drawers in your project, You just have to copy your favourite drawer folder from Drawer folder and paste it in your project.

You can find Drawer folder from "App> Containers> Drawer".

For Example ::

Note : To use fonts make sure you have copied all the fonts files (.ttf) from assets folder


Profiles - top

Step 1 - (Installation)

You can get any imported packages by following below steps and install it :

We have used 'react-native-vector-icons' package for Search, Menu etc icons in Profile. link You have to install this package to use the Vector Icons in your project.

We have used 'react-native-tab-view' package for Tab View in Profile. link You have to install this package to use Tab View in your project.

We have used 'react-native-read-more-text' package for 'Read More' concept in Profile. link You have to install this package to use 'Read More' Concept in your project.

You can import this package in file like,

Step 2 - (Usage)

To get Profiles in your project, You just have to copy your favourite profile folder from Profile folder and paste it in your project.

You can find Profile folder from "App> Containers> Profile".

For Example ::

Note : To use fonts make sure you have copied all the fonts files (.ttf) from assets folder


Sign In - top

Step 1 - (Installation)

You can get any imported packages by following below steps and install it :

We have used 'react-native-vector-icons' package for Search, Menu etc icons in SignIn. link You have to install this package to use the Vector Icons in your project.

Step 2 - (Usage)

To get SignIn in your project, You just have to copy your favourite signin folder from SignIn folder and paste it in your project.

You can find SignIn folder from "App> Containers> SignIn".

For Example ::

Note : To use fonts make sure you have copied all the fonts files (.ttf) from assets folder


Sign Up - top

Step 1 - (Installation)

You can get any imported packages by following below steps and install it :

We have used 'react-native-vector-icons' package for Search, Menu etc icons in SignUp. link You have to install this package to use the Vector Icons in your project.

Step 2 - (Usage)

To get SignUp in your project, You just have to copy your favourite signup folder from SignUp folder and paste it in your project.

You can find SignUp folder from "App> Containers> SignUp".

For Example ::

Note : To use fonts make sure you have copied all the fonts files (.ttf) from assets folder


Social - top

Step 1 - (Installation)

You can get any imported packages by following below steps and install it :

We have used 'react-native-vector-icons' package for Search, Menu etc icons in Social. link You have to install this package to use the Vector Icons in your project.

For any type of Animation we have used 'react-native-animatable' package. link You have to install this package to use an Animation in your project.

We have used 'react-native-tab-view' package for Tab View in Profile. link You have to install this package to use Tab View in your project.

Step 2 - (Usage)

To get Social in your project, You just have to copy your favourite socials folder from Social folder and paste it in your project.

You can find Social folder from "App> Containers> Social".

For Example ::

Note : To use fonts make sure you have copied all the fonts files (.ttf) from assets folder


Walkthrough - top

Step 1 - (Installation)

You can get any imported packages by following below steps and install it :

We have used 'react-native-vector-icons' package for Search, Menu etc icons in Walkthrough. link You have to install this package to use the Vector Icons in your project.

We have used 'react-native-swiper' package for View Pager in Walkthrough. link You have to install this package to use View Pager in your project.

We have used rn-viewpager' package for Nested View Pager in Walkthrough. link You have to install this package to use Nested View Pager in your project.

Step 2 - (Usage)

To get Walkthrough in your project, You just have to copy your favourite walkthrough folder from Walkthrough folder and paste it in your project.

You can find Walkthrough folder from "App> Containers> Walkthrough".

For Example ::

Note : To use fonts make sure you have copied all the fonts files (.ttf) from assets folder


AdMob - top

Step 1 - (Installation)

Here We have implement three type of Ads: Banner Ad, Interstitial Ad and Rewarded Video Ad. In Banner Ad we have implement three type of Banner Ads : Banner, Medium_Rectangle Banner and Large Banner.

We have used 'react-native-vector-icons' package for Search, Menu etc icons in AdMob. link You have to install this package to use the Vector Icons in your project.

For Integrate AdMob in your application you have to create an account in AdMob. You can create account from here - link

You can get any imported packages by following below steps and install it :

We have used 'react-native-admob' package for Integrate AdMob. link You have to install this package to Integrate AdMob in your project.

For Integrate AdMob in your React Native project you have to add the 'Google Mobile Ads SDK' in you Xcode Project. You can find steps for add 'Google Mobile Ads SDK' from here link

Step 2 - (Usage)

To get AdMob in your project, You just have to copy AdMob folder from Containers and paste it in your project. From this folder you can get the Banner Ads for your Project.

To get Interstitial and Rewarded Ads you have to copy code from admob.js file from AdMob folder MainScreens folder.

You can find AdMob folder from "App> Containers> AdMob".

You can find MainScreens folder from "App> Containers> MainScreens".

For Example ::

Note : To use fonts make sure you have copied all the fonts files (.ttf) from assets folder


ECommerce - top

Step 1 - (Installation)

Here we have design screens, which is used for ECommerce shopping application with material effect.

We have used 'react-native-vector-icons' package for Search, Menu, Back etc icons in ECommerce. link You have to install this package to use the Vector Icons in your project.

We have used packages like 'react-native-swiper','react-native-cached-image','react-native-ratings','react-native-datepicker','react-native-expandable-section-list' for design purpose. You have to install this package to use all of this.

After Installing any package you have to import as given below:

For Integrate ECommerce in your application you have to add "DropDown" component, which you can find from App> Components> DropDown.

After add DropDown Component you have to import it as given below:

Step 2 - (Usage)

To get ECommerce in your project, You just have to copy ECommerce folder from Containers and paste it in your project. From this folder you can get the ECommerce designs for your Project.

You can find ECommerce folder from "App> Containers> ECommerce".

You can find MainScreens navigation from "App> Containers> MainScreens> MainScreen". Where you can find "ECommerce Material UI" click and navigation

You can find Screen navigation from "APP> Navigation> AppNavigation.js" file. Where you have to add "DrawerStackECommerce" inside "PrimaryNav" and import related screens.

For Example ::

Note : To use fonts make sure you have copied all the fonts files (.ttf) from assets folder


Ecommerce Development - top

Step 1 - (Installation)

To Integrate ECommerce with our project we refer "react-native-woocommerce" package. link

You not need to install package. Instead Of that just add the files from WooCommerce in your project.

We have used 'react-native-vector-icons' package for Search, Menu, Back etc icons in ECommerce. link You have to install this package to use the Vector Icons in your project.

We have used packages like 'react-native-swiper','react-native-cached-image','react-native-ratings','react-native-datepicker','react-native-expandable-section-list' for design purpose. You have to install this package to use all of this.

After Installing any package you have to import as given below:

For Integrate ECommerce in your application you have to add "DropDown" component, which you can find from App> Components> DropDown.

After add DropDown Component you have to import it as given below:

Step 2 - (Usage)

To get ECommerce in your project, You just have to copy ECommerceDevelopment folder from Containers and paste it in your project. From this folder you can get the ECommerce development for your Project.

You can find ECommerceDevelopment folder from "App> Containers> ECommerceDevelopment".

If you want to use your own database then change domain from "App> Containers> ECommerceDevelopment > Globals.js"

For your own database you have to change ConsumerKey and ConsumerSecret from "App> Containers> ECommerceDevelopment > WooCommerce > Config.js". You can generate those keys by following the steps given in Steps to Generate ConsumerKey & Consumer Secrete

For Home screen category display you should make one common parent category and put the categories you want to display over there under that parent category in your WordPress admin panel.After that put that parent category Id in "App> Containers> ECommerceDevelopment > Menu > Main.js" (In line number 337)

We use payment method like: COD, Paypal.

For paypal integration, First you have to register your app in Register APP In Paypal Developer

You can find MainScreens navigation from "App> Containers> MainScreens> MainScreen". Where you can find "ECommerce Development" click and navigation

You can find Screen navigation from "APP> Navigation> AppNavigation.js" file. Where you have to add "DrawerStackECommerceDevelpoment" inside "PrimaryNav" and import related screens.

For Example ::

Note : To use fonts make sure you have copied all the fonts files (.ttf) from assets folder


Music - top

Step 1 - (Installation)

We have design screens, which is used for Music Application with material effect.

We have used 'react-native-vector-icons' package for Search, Repeat, Shuffle, Play Next, Play Previous, Pause etc icons in Music. link You have to install this package to use the Vector Icons in your project.

You can get any imported packages by following below steps and install it :

We have used 'react-native-video' package for playing songs. link You have to install this package to implement music play functionality in your project.

We have used 'react-native-slider' package for display song progress. link You have to install this package to display song progress functionality in your project.

After Installing any package you have to import as given below:

Step 2 - (Usage)

To get Music in your project, You just have to copy Music folder from Containers and paste it in your project. From this folder you can get Music design for your Project.

You can find Music folder from "App> Containers> Music".

You can find MainScreen file from "App> Containers> MainScreens> MainScreen" in which you can get the code for the screen that appears first in Antiqueruby app.

You can find Screen navigation from "APP> Navigation> AppNavigation.js" file. Where you have to add screens in "MainStack" and import related screens.

For Example ::

Note :


Blog - top

Step 1 - (Installation)

We have done design and development of Blogs, which is used for displaying posts with material effect. You can like and unlike you favorite post. The liked post will be displayed in favourite screen. You can also search blog post by search functionality. The favourite and search screen can be accessed from the navigation drawer. The search functionality is also implemented in home screen.

We have used a custom wordpress plugin that generates the api that is used in the Antiqueruby Blog. You will have to upload and install this plugin in the backend your wordpress blog.

To install plugin Go To " Plugins > Add New > Upload Plugin"

Enable Worpdress settings for Following Functionalities :

We have used a custom wordpress plugin that generates the api as below ::

We have used 'react-native-vector-icons' package for Search, like, unlike the posts in Blog. link You have to install this package to use the Vector Icons in your project.

You can get any imported packages by following below steps and install it :

We have used 'react-native-swiper' package for swipe blog posts. link You have to install this package to implement swipe functionality.

After Installing any package you have to import as given below:

Step 2 - (Usage)

To get Blog in your project, You just have to copy Blog folder from Containers and paste it in your project. From this folder you can get Blog design implemented with api for your Project.

You can find Blog folder from "App> Containers> Blog".

You can find MainScreen file from "App> Containers> MainScreens> MainScreen" in which you can get the code for the screen that appears first in Antiqueruby app.

You can find Screen navigation from "APP> Navigation> AppNavigation.js" file. Where you have to add all blog screens for navigation.

"Wordpress Blog" Files ::

You have to Configure some properties here ::

Note :


Dating - top

Step 1 - (Installation)

We have design screens, which is used for Dating Application with material effect.

We have used 'react-native-vector-icons' package for Nearby, Message, Discovery, Favourite, Profile, Delete, Edit etc icons in Dating. link You have to install this package to use the Vector Icons in your project.

You can get any imported packages by following below steps and install it :

We have used 'react-native-swiper' package for swipe effect. link You have to install this package to implement swipe functionality in your project.

We have used 'react-native-router-flux' and "react-navigation" package for Navigation. link and link You have to install this packages for navigation in your project.

We have used 'react-native-linear-gradient' packages for color gradient effect. link You have to install this package to implement color gradient effect in your project.

After Installing any package you have to import as given below:

Step 2 - (Usage)

To get Dating's Material UI in your project, You just have to copy Bubbdy folder from Containers and paste it in your project. From this folder you can get Dating design for your Project.

You can find Bubbdy folder from "App> Containers> Bubbdy".

You can find MainScreen file from "App> Containers> MainScreens> MainScreen" in which you can get the code for the screen that appears first in Antiqueruby app.

You can find Screen navigation from "APP> Navigation> AppNavigation.js" file. Where you have to add screens in "MainStack" and import related screens.

You can find Screen for tab navigation from "APP> Containers> Bubbdy> index.js" file. Where you have to add screens which are include in tab navigation and import related screens.

For Example ::

Note :


Food - top

Step 1 - (Installation)

We have design screens, which is used for Food Application with material effect.

We have used 'react-native-vector-icons' package for location, search, favourite, notification, list, grid etc icons in Food. link You have to install this package to use the Vector Icons in your project.

You can get any imported packages by following below steps and install it :

We have used 'react-navigation' package for bottom tab view. link You have to install this package to implement bottom tabview and also for navigation in you project.

We have used ScrollTabView Component for scrollable tab view. You can get this component from "App> Components> react-native-scrollable-tab-view".

We have used 'react-native-rating' package for show rating. link You have to install this package to show rating star in your project.

We have used 'react-native-maps' package for show map. link You have to install this package and follow the Instructions which are given in this link to show Map in your project.

We have used 'react-native-maps-directions' package for show direction in Map. link You have to install this package show Map Directions in your project.

After Installing any package you have to import as given below:

Step 2 - (Usage)

To get Food's Material UI in your project, You just have to copy Food folder from Containers and paste it in your project. From this folder you can get Food design for your Project.

You can find Food folder from "App> Containers> Food".

You can find MainScreen file from "App> Containers> MainScreens> MainScreen" in which you can get the code for the screen that appears first in Antiqueruby app.

You can find Screen navigation from "APP> Navigation> AppNavigation.js" file. Where you have to add screens in "MainStack" and import related screens.

For Example ::

Note :


Vehicle - top

Step 1 - (Installation)

We have design screens, which is used for Vehicle Application with material effect.

We have used 'react-native-vector-icons' package for location, setting, notification, menu icons etc icons in Vehicle. link You have to install this package to use the Vector Icons in your project.

You can get any imported packages by following below steps and install it :

We have used ScrollTabView Component for scrollable tab view. You can get this component from "App> Components> react-native-scrollable-tab-view".

We have used 'react-native-maps' package for show map. link You have to install this package and follow the Instructions which are given in this link to show Map in your project.

We have used 'react-native-maps-directions' package for show direction in Map. link You have to install this package show Map Directions in your project.

We have used 'react-native-linear-gradient' package for color gradient effect. link You have to install this package to implement color gradient effect in your project.

After Installing any package you have to import as given below:

Step 2 - (Usage)

To get Vehicle's Material UI in your project, You just have to copy Vehicle folder from Containers and paste it in your project. From this folder you can get Vehicle design for your Project.

You can find Vehicle folder from "App> Containers> Vehicle".

You can find MainScreen file from "App> Containers> MainScreens> MainScreen" in which you can get the code for the screen that appears first in Antiqueruby app.

You can find Screen navigation from "APP> Navigation> AppNavigation.js" file. Where you have to add screens in "MainStack" and import related screens.

For Example ::

Note :


Hotel - top

Step 1 - (Installation)

We have design screens, which is used for Hotel Application with material effect.

We have used 'react-native-vector-icons' package for location, menu, search, left, currency icons etc icons in Hotel. link You have to install this package to use the Vector Icons in your project.

You can get any imported packages by following below steps and install it :

We have used ScrollTabView Component for scrollable tab view. You can get this component from "App> Components> react-native-scrollable-tab-view".

We have used 'react-native-maps' package for show map. link You have to install this package and follow the Instructions which are given in this link to show Map in your project.

We have used 'react-native-maps-directions' package for show direction in Map. link You have to install this package show Map Directions in your project.

We have used 'react-native-linear-gradient' package for color gradient effect. link You have to install this package to implement color gradient effect in your project.

We have used 'react-navigation' package for bottom tab view. link You have to install this package to implement bottom tabview and also for navigation in you project.

We have used 'react-native-rating' package for show rating. link You have to install this package to show rating star in your project.

After Installing any package you have to import as given below:

Step 2 - (Usage)

To get Hotel's Material UI in your project, You just have to copy Hotel folder from Containers and paste it in your project. From this folder you can get Hotel design for your Project.

You can find Hotel folder from "App> Containers> Hotel".

You can find MainScreen file from "App> Containers> MainScreens> MainScreen" in which you can get the code for the screen that appears first in Antiqueruby app.

You can find Screen navigation from "APP> Navigation> AppNavigation.js" file. Where you have to add screens in "MainStack" and import related screens.

For Example ::

Note :


Crypto Portfolio - top

Step 1 - (Installation)

We have design screens, which is used for Crypto Application with material effect.

We have used 'react-native-vector-icons' package for setting, notification, transation, graph, document icons etc icons in Crypto. link You have to install this package to use the Vector Icons in your project.

You can get any imported packages by following below steps and install it :

We have used ScrollTabView Component for scrollable tab view. You can get this component from "App> Components> react-native-scrollable-tab-view".

We have used 'react-native-switch-toggle' package for toggle switch. link You have to install this package to toggle switch in your project.

We have used 'victory-native' package for show graph. link You have to install this package show Graph in your project.

We have used Line Chart Component and package to display line chart. You can get this component from "App> Components> react-native-chart-kit". link

We have used "react-navigation" package for bottom bar. link You have to install this packages to display bottom bar in your project.

After Installing any package you have to import as given below:

Step 2 - (Usage)

To get Crypto's Material UI in your project, You just have to copy Crypto folder from Containers and paste it in your project. From this folder you can get Crypto design for your Project.

You can find Crypto folder from "App> Containers> Crypto".

You can find MainScreen file from "App> Containers> MainScreens> MainScreen" in which you can get the code for the screen that appears first in Antiqueruby app.

You can find Screen navigation from "APP> Navigation> AppNavigation.js" file. Where you have to add screens in "MainStack" and import related screens.

For Example ::

Note :



Once again, thank you so much for purchasing this app. As we said at the beginning, we'd be glad to help you if you have any questions relating to this app. No guarantees, but we'll do our best to assist.

Alian Software

Go To Table of Contents