“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.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

1. Reach to your project directory.
2. Install npm : npm install
3. Start npm : npm start
4. Run Project :
• In IOS : react-native run-ios
• In Android : react-native run-android

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.
• Redux - link
  • Used to make navigation easily in application and pass props use of redux
• 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.

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 have to take MainScreens folder 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

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.