“Antiqueruby - React Native Material Design”

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.2 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
• Download Gradle Version From this Link Download Gradle
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:

• Containers
  • MainScreens
  • MainScreen
    • MainScreen.js
    • styles.js

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:

• Containers
  • MainScreens
  • Drawer
    • Drawer.js
    • style.js
  • Profile
    • Profile.js
    • style.js
  • SignIn
    • SignIn.js
    • style.js
  • SignUp
    • SignUp.js
    • style.js
  • Social
    • Social.js
    • style.js
  • Walkthrough
    • Walkthrough.js
    • style.js
  • AdMob
    • admob.js
    • styles.js

Fonts

Several Custom Fonts are used in the project to give a nice look and feel to the screens. These fonts can be found in assets package from the project. All the fonts are in .ttf format.

The fonts should be copied in the fonts folder of your project and link the android and ios by command 'react-native link'. .

One example of a font is "app > Fonts > SF-UI-Display-Regular.ttf".

After that, we have implemented the fonts in our screen by using Typeface and setTypeface class in the respactive .js 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:

• 3d Swiper - link
  • Used to make different type of swipe views
• Animatable - link
  • Used to make views Animatable.
• Carousel swiper - link
  • Used to make views in Carousel swiper type.
• Checkbox - link
  • Used to make custom checkbox .
• Custom Drawer - link
  • Used to make navigation drawers customize.
• Floating Action Button - link
  • Used to make custom floating action buttons in the design
• Linear Gredient - link
  • Used to make Linear Gredient in Background
• Modal- link
  • Used to make custom Modals for Design”
• Popup Modal - link
  • Used to make custom popup modal
• Read more text - link
  • Used to make text expandable.
• Router flux - link
  • Used to create bottombar ui and navigation.
• Scrollable tabview - link
  • Used to make tabview scrolable
• Snap carousel - link
  • Used to create animated scrollview like carousel.
• Star Rating - link
  • Used to make star rating view
• Swiper- link
  • Used to create simple image swiper.
• Tabview - link
  • Used to make custom tab view
• Vactor icons- link
  • Used to make icons clear in UI.
• Navigation - link
  • Used to make navigation easily in application
• Vactor icons- link
  • Used to make icons clear in UI.
• AdMob - link
  • Used to Integrate AdMob with Application
• Cached Image - link
  • Used to Load image from server and store it in local cache.So,once it is stored it takes short time to load second time.
• Date Picker - link
  • Used to open date picker dialog.
• Expandable List - link
  • Used to implement expandable list.
• Keyboard Aware ScrollView - link
  • Used to scroll screen up when keyboard open.
• Ratings - link
  • Used to display ratings with different types like star, rocket, bell, heart.
• RNViewPager - link
  • Used to implement ViewPager inside swiper.
• Music - link
  • Used to implement Music Player for play songs.
• Slider - link
  • Used to display songs progress.
• Auto Responsive GridView - link
  • Used to display Auto Responsive GridView.
• Progress Circle - link
  • Used to display Circle Progress Bar.
• Switch Toggle - link
  • Used to display Toggle Switch.
• Candle Graph - link
  • Used to display Candle Graph.
• Line Chart - link
  • Used to display Line Chart.

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,

• import { View } from 'react-native-animatable';
• import FontAwesome from 'react-native-vector-icons/FontAwesome';

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 ::

• Drawer
• DrawerBottomIcon
• ControlPanel.js
• index.js
• styles.js
• tweens.js
• Other Files

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,

• import FontAwesome from 'react-native-vector-icons/FontAwesome';
• import { TabViewAnimated, TabBar, SceneMap } from 'react-native-tab-view';
• import ReadMore from 'react-native-read-more-text';

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 ::

• Profile
• ProfileAbout
• index.js
• styles.js
• Other Files

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.

• import FontAwesome from 'react-native-vector-icons/FontAwesome';

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 ::

• SignIn
• Signin_01
• index.js
• styles.js

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.

• import FontAwesome from 'react-native-vector-icons/FontAwesome';

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 ::

• SignUp
• SignUp_01
• index.js
• styles.js

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.

• import FontAwesome from 'react-native-vector-icons/FontAwesome';
• import { View } from 'react-native-animatable';
• import { TabViewAnimated, TabBar, SceneMap } from 'react-native-tab-view';

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 ::

• Social
• Social01
• index.js
• styles.js
• Other Files

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.

• import FontAwesome from 'react-native-vector-icons/FontAwesome';
• import Swiper from 'react-native-swiper';
• import {IndicatorViewPager, PagerDotIndicator} from 'rn-viewpager';

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 ::

• Walkthrough
• WalkthroughAppUsageHints
• index.js
• styles.js
• Other Files

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

• import FontAwesome from 'react-native-vector-icons/FontAwesome';
• import { AdMobBanner, AdMobInterstitial, AdMobRewarded } from 'react-native-admob';

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 ::

• AdMob
• BannerAd
• index.js
• styles.js

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:

• import FontAwesome from 'react-native-vector-icons/FontAwesome';
• import Swiper from 'react-native-swiper';
• import { CachedImage } from 'react-native-cached-image';
• import { CachedImage } from 'react-native-cached-image';
• import DatePicker from 'react-native-datepicker';
• import { Rating, AirbnbRating } from "react-native-ratings";

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:

• import Dropdown from "../../../Components/Dropdown/dropdown/";

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 ::

• ECommerce
• Sales
• index.js
• styles.js

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:

• import FontAwesome from 'react-native-vector-icons/FontAwesome';
• import Swiper from 'react-native-swiper';
• import { CachedImage } from 'react-native-cached-image';
• import { CachedImage } from 'react-native-cached-image';
• import DatePicker from 'react-native-datepicker';
• import { Rating, AirbnbRating } from "react-native-ratings";

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:

• import Dropdown from "../../../Components/Dropdown/dropdown/";

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 ::

• ECommerceDevelopment
• Sales
• index.js
• styles.js

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:

• import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
• import Video from "react-native-video";
• import Slider from 'react-native-slider';

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 ::

• Music
• Album
• index.js
• styles.js

Note :

• You can refer Music functionality from this link.
• To use fonts make sure you have copied all the fonts files (.ttf) from assets folder.

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"

• Upload the "json-api-aliansoftware.zip" file

• After Uploading the "json-api-aliansoftware.zip" file you need to Activate the plugin.

• Alian json rest api : A RESTful API for WordPress, require for the JSON API and It will allow you to add category image.

Enable Worpdress settings for Following Functionalities :

• To Active "Alian json rest api" you have to follow below steps ::


• Go To " Settings > JSON API Settings "
• If the " Core - Basic introspection methods " is Deactivate then you have to Click on Activate to Active
• If the " Respond - Comment/trackback submission methods " is Deactivate then you have to Click on Activate to Active
• For Setting "Number of Posts" per page you have to follow below steps ::


• Go To " Settings > Reading Settings "
• In "Blog pages show at most" you have to enter number of posts per page you want to show
• In "Syndication feeds show the most recent" you have to enter number of posts per page you want to show
• For "Post a comment" you have to follow below steps ::


• Go To " Settings > Discussion Settings "
• In "Email me whenever" you have to "Checked" both options
• In "Before a comment appears" you have to "UnChecked" if you want to allow user to post a comment without approval of author

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

• For API base Go To "Settings > JSON API Settings ": you will get base url at bottom.

• For Category List:
• get_category_index/
• For Category Post List:
• get_category_posts/?id=&page=
• For Category Post Search List:
• get_search_results/?search=&page=&cat=
• For Post Details:
• get_post/?id=
• For Post list by Tag:
• get_tag_posts/?id=
• For Search List:
• get_search_results/?search=&page=

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:

• import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
• import Swiper from 'react-native-swiper';

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 ::

• Blog
• CategoryList
• index.js
• styles.js
• sidebar.js
• Category
• index.js
• styles.js
• CategoryDetails
• index.js
• styles.js
• FloatingLabelInput.js
• Favourite
• index.js
• styles.js
• Search
• index.js
• styles.js

You have to Configure some properties here ::

• Blog
• Globals.js
• SITE_URL : Here you have to set the API base
• FEATURED_TAG_ID : Here you have to set ID For FEATURED BLOG For CategoryList Screen
• FEATURED_BLOG_COUNT : Here you have to set Maximum FEATURED BLOG COUNT For CategoryList Screen.
• EXCLUDE_CARTEGORY : Here you have to set Exlcude Categories ids For CategoryList Screen.
• LATEST_BLOG_COUNT : Here you have to set Maximum LATEST BLOG COUNT For Category Screen.
• SHOW_TRENDING_BLOG : Here you have to set Visibility of TRENDING BLOG For Category Screen.
• TRENDING_BLOG_COUNT : Here you have to set Maximum TRENDING BLOG COUNT For Category Screen.
• SEARCH_EXCLUDE_CARTEGORY : Here you have to set Exlcude Categories ids For Search Screen.

Note :

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

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:

• import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
• import { Actions } from "react-native-router-flux";
• import LinearGradient from "react-native-linear-gradient";

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 ::

• Bubbdy
• Login
• index.js
• styles.js

Note :

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

Traveling - top

Step 1 - (Installation)

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

We have used 'react-native-vector-icons' package for time, search, back, menu etc icons in Traveling. 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 'autoresponsive-react-native' package for auto responsive grid view. link You have to install this package to implement Auto Responsive Grid View in your project.

We have used 'react-native-progress-circle' package for show progress. link You have to install this package to show circle progress bar in your 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.

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:

• import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
• import AutoResponsive from "autoresponsive-react-native";
• import Rating from "react-native-rating";
• import LinearGradient from "react-native-linear-gradient";

Step 2 - (Usage)

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

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

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 ::

• Traveling
• IntroductionScreen
• index.js
• style.js

Note :

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

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:

• import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
• import Rating from "react-native-rating";
• import MapView, { PROVIDER_GOOGLE, Marker } from "react-native-maps";
• import MapViewDirections from "react-native-maps-directions";

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 ::

• Food
• FoodLogin
• index.js
• style.js

Note :

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

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:

• import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
• import MapView, { PROVIDER_GOOGLE, Marker } from "react-native-maps";
• import MapViewDirections from "react-native-maps-directions";
• import LinearGradient from "react-native-linear-gradient";

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 ::

• Vehicle
• Dashboard
• index.js
• style.js

Note :

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

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:

• import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
• import MapView, { PROVIDER_GOOGLE, Marker } from "react-native-maps";
• import MapViewDirections from "react-native-maps-directions";
• import LinearGradient from "react-native-linear-gradient";
• import Rating from "react-native-rating";

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 ::

• Hotel
• TabViewHotel
• index.js
• style.js

Note :

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

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:

• import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
• import SwitchToggle from "react-native-switch-toggle";
• import { VictoryBar } from "victory-native";
• import { LineChart } from "../../../Components/react-native-chart-kit";
• import { createBottomTabNavigator, createAppContainer } from "react-navigation";

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 ::

• Crypto
• CryptoSignIn
• index.js
• styles.js

Note :

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

Food Recipe - top

Step 1 - (Installation)

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

We have used 'react-native-vector-icons' package for location, menu, search, cart, explore, users, setting, favorite icons etc icons in Food Recipe. 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-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 'autoresponsive-react-native' package for auto responsive grid view. link You have to install this package to implement Auto Responsive Grid View in your project.

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

• import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
• import LinearGradient from "react-native-linear-gradient";
• import AutoResponsive from "autoresponsive-react-native";

Step 2 - (Usage)

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

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

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 ::

• FoodRecipe
• OverView
• index.js
• styles.js

Note :

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

News Media - top

Step 1 - (Installation)

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

We have used 'react-native-vector-icons' package for menu, search, share, more, back, heart, caretright icons etc icons in News Media. 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-progress-bar-animated' package for color gradient effect. link You have to install this package to implement progress bar animated in your project.

We have used 'autoresponsive-react-native' package for auto responsive grid view. link You have to install this package to implement Auto Responsive Grid View in your project.

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

• import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
• import ProgressBarAnimated from "react-native-progress-bar-animated";
• import AutoResponsive from "autoresponsive-react-native";

Step 2 - (Usage)

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

You can find News Media folder from "App> Containers> NewsMedia".

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 ::

• NewsMedia
• IntroductionScreenNews
• index.js
• styles.js

Note :

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