BLOG

How to Style Cross Platform React Native UI Components

by Sysco LABS Articles 23 May 2018

React Native is a language that specially caters to Mobile Application Development. But what are the pros and cons of using this language? And what exactly is Native Base? In this innovation session, Nilaksha Rathnayake explains exactly that.

If you’re thinking of using React Native for your next project, there are three main advantages that you will have:

  • Uses JavaScript Code
  • CSS-like stylesheets
  • HTML-like tags for layouts

The above three points makes it very easy to use as all three languages (JavaScript, CSS, HTML) and has been a very popular go-to for developers; meaning you can leverage that knowledge when using React Native.

 

Native Base

A very helpful tool to build Native UIs, is Native Base. Native Base, is a free and open source framework created by Geeky Ants. The best advantage of using it, is that it’s cross platform, allowing you to create high quality apps for both Android and iOS with relative ease.

Using this framework, you basically get the native look and feel with the platform of choice (iOS or Android) without doing too many changes to your code.

Example:

 

How Native Base works is, it builds a layer on top of React Native that provides you with a basic set of components for mobile application development.

A general syntax of a Native Base component will be:

So, what are the key differences between using React Native and Native Base? The picture below shows just how little coding is required to get a button when using these two options.

On the left is React Native, and on the right, Native Base.

 

The anatomy of a Native Base UI layout is almost similar to a HTML layout. Style sheets are also similar to CSS stylesheets. If you’re familiar with building web applications using HTML and CSS, you can quickly catch up with Native Base.

Native Base provides several UI components which can be used out of the box. They can be imported into your React Native project and used in the same way as HTML elements. This keeps the layout of your app clean and tidy as well as easily maintainable.

Another benefit of this framework is its theming capabilities. You can maintain theme variables in a separate file and apply the theme to your application using the ‘StyleProvider’ component.

Custom UI components can be created using React Native base components and can be used together with Native Base components in your application without any difficulty. You can even use Native Base’s theming features to make your custom components themselves. An example is provided below:

Using these features not only provides an easy to use application, but the time between coding and the end product drastically reduces as well.

 

 

 

 

 

 

 

 

 

Leave a Comment