Beautiful Material Design Apps With the Antiqueruby React Native Components

Creating an app using React Native is easy. Creating one that looks attractive, polished, and professional? Not so much. Even if you have a designer on your team, translating designs to real apps that look good on all screen sizes and feel native on both Android and iOS is always an uphill task.

CodeCanyon has lots of premium React Native app templates and component libraries that can make your life easier, though. Antiqueruby React Native is, in my opinion, the most comprehensive of them all. Developed by Alian Software, this massive template offers hundreds of Material Design-compliant layouts you can use in your apps. Furthermore, it's very easy to integrate it with your WordPress blogs and WooCommerce sites. And if you're interested in monetization, it has support for AdMob ads built into it.

In this tutorial, I'll show you how to install Antiqueruby React Native and use some of its components and layouts.

Prerequisites

To be able to follow along, you'll need:

an Envato account
the latest versions of Node.js and the React Native CLI
the latest version of Android Studio
a device or emulator running a recent build of Android
a basic understanding of the React Native framework

1. Setting Up the Template

Antiqueruby React Native is a bestseller on CodeCanyon. To get it, log in to your Envato account and purchase a license for it. Once you do so, you'll be able to download the template as a ZIP file named codecanyon-zBpcGaL5-antiqueruby-react-native.zip.

Because its size is nearly 1.6 GB, the download might take a while to complete if you have a slow Internet connection.

When you extract the file, you'll see that it contains two more ZIP files: Documentation_V2.12.zip, which has all the documentation for the template, and Antiqueruby_Code_V2_12.zip, which has the actual code. For this tutorial, you just need to extract the latter inside a new directory.

To do so on Linux or macOS, you can run the following commands:

1	mkdir my_project && cd my_project
2	unzip ~/Downloads/Antiqueruby_Code_V2_12.zip

Next, you must use npm to install all the Node.js packages the template depends on.

1	npm install

Lastly, open the android/local.properties file using a text editor and update the value of the sdk.dir property so it points to the location where you have your Android SDK installed.

1	sdk.dir=/home/me/Android/Sdk

2. Running the Project

To see what the template looks like on your mobile device, first fire up the Metro Bundler by running the following command:

1	react-native start

This can take a minute or two because the template has thousands of files. On some computers, you might even encounter an ENOSPC error, saying that the system limit for file watchers is reached. To fix the error, you can try excluding a few intermediate files by adding the following code to the metro.config.js file:

const blacklist = require('metro-config/src/defaults/blacklist');

module.exports = {
  resolver: {
    blacklistRE: blacklist([/intermediates\/.*/])
  }
};

Alternatively, you can increase the maximum number of file watchers by updating the value of the fs.inotify.max_user_watches property in the /etc/sysctl.conf file.

Once the bundler has finished loading the dependency graph, you can go ahead and run the template.

1	react-native run-android

If your Android development environment is up to date and configured correctly, you should now be able to see this on your device:

3. Exploring Available Layouts

You can use the Antiqueruby React Native template to create many different types of apps. For each app category, it has several layouts available. You can take a look at all of them on your device right now.

For instance, you can press the General Material UI button to take a look at all the generic layouts available.

By default, you'll be presented with options to view all the beautiful layouts available for sign-in pages.

By clicking on the hamburger button, though, you can open a menu that lets you pick other types of layouts. For example, you can click on the Sign Up option to look at layouts for sign-up pages.

You don't have to limit yourself to just the generic Material Design layouts. The template also includes layouts that are ideal for specific types of apps. For instance, if you're trying to create an app for your WordPress blog, press the WordPress Blog button on the home screen.

This template also offers lots of domain-specific layouts. With them, you can effortlessly create dating apps, food delivery apps, cryptocurrency-related apps, social apps, and more. You'll be able to take a look at these layouts too from the home screen. For instance, you can press the Food Material UI button to look at layouts that are usually needed while building food delivery apps.

4. Understanding the Project Structure

Before you can use an Antiqueruby React Native layout or component in your own app, you need to understand the structure of the template. In addition to all the common files and directories React Native projects have, this template has a directory named App. This is where most of its reusable code resides.

~/my_project/App/
|-- Components
|-- Containers
|-- Themes
|-- Fonts
 -- Images

The Components directory inside it, as its name suggests, contains various Material Design components, such as alert messages, buttons, calendars, and charts. You can use these components to create your own custom layouts from scratch.

The Containers directory is where you can find the code for all the premium, hand-crafted layouts. For instance, the SignIn directory inside it has the code for all the sign-in layouts we looked at earlier. Similarly, the Blog directory contains the code for all the WordPress-related layouts.

The Themes directory contains JavaScript files that allow you to alter the overall look and feel of the layouts. Using it, you can change details such as fonts, colors, and margins.

Lastly, the Fonts and Images directories contain assets that are used in the layouts.

5. Using Layouts

By default, the template loads the App component, which does nothing but showcase all the available layouts. It's what you saw when you ran the project in an earlier step. To create your own app with the template, you need to change this behavior.

So open the index.js file and empty its contents. Feel free to create a backup of the file before you do so. Then, as usual, import the React framework and React Native components by adding the following import statements to it:

1	import * as React from 'react';
2	import * as RN from 'react-native';

Next, let's say we want to display a sign-in layout in our app. Of all the 14 such layouts offered by the template, let's use the third one: Signin_03. Import it by adding the following code:

1	import Signin_03 from './App/Containers/SignIn/Signin_03';

Then create a new component by extending the React.Component class and overriding its render() method. Inside the method, all you need to do is return the <Signin_03> component. Here's how:

export default class MyApp extends React.Component {
    render() {
        return (
            <Signin_03/>
        );
    }
}

Lastly, don't forget to register your new component by calling the registerComponent() method.

1	RN.AppRegistry.registerComponent('Antiqueruby', () => MyApp);

At this point, if you run your app, you should be able to see the sign-in screen directly.

Of course, to change the contents of the layout, you must make changes in the index.js file present in the App/Containers/SignIn/Signin_03 directory.

6. Using Components

Importing and using a component is just as easy as importing and using a layout. For instance, if you want to use the Calendar component in your app, first import it as follows:

1	import Calendar from './App/Components/Calendar/CalendarStrip';

Then, inside the render() method, add the <Calendar> component to the component tree. Optionally, you can place it inside a <View> component and give it a few styles.

<RN.View>
    <Calendar
        style={{ height: 200 }}
        calendarHeaderStyle={{ color: "#555555" }}
        dateNumberStyle={{ color: "#333333" }}
        highlightDateNumberStyle={{ color: "#FF0000" }}
        highlightDateNameStyle={{ color: "#990000" }}
    />
</RN.View>

With the above code, you should see an interactive calendar strip that looks like this:

Conclusion

You now know how to use the Antiqueruby React Native template to quickly create React Native apps that look good and perform well on both Android and iOS. Using the basics you learned in this tutorial, you should be able to work with all the layouts and components available in the template.

This template also comes with comprehensive documentation you can refer to. Furthermore, if you are having any trouble with it, you are free to contact the developer directly on CodeCanyon.

And if you're looking for more React Native templates, I suggest you refer to these articles: