Every software companies always tend to have an increasing interest in cross-platform applications since they have dramatically reduced the amount of resources required to build mobile apps.

React Native applications stands at the top when comes to cross-platform apps.

React native UI components

React Native has tremendous possibilities in designing the user interface of an application.

The main time-consuming process for building an app is its user interface. Many third-party libraries and UI toolkits are now available to help you build next level react native application.

Let’s see some possibilities of React Native UI designs.

1.NativeBase

NativeBase is the most popular and widely used library. It provides a wide range of cross-platform UI components for react native.

Nativebase is 100% open source.

One of our main goal with NativeBase 2.0 is to make it easy to theme the components with very little changes to the components themselves.

Nativebase are built with blocks called components. The Components are constructed in pure React Native platform along with some JavaScript functionality with a rich set of customizable properties. They are constructed in pure React Native platform along with some JavaScript functionality with a rich set of customizable properties. These components allow you to quickly build the perfect user interface.

Native base UI components

Building a button using normal react native code on left and with NativeBase on right

NativeBase includes components such as anatomy of your app screens, header, input, buttons, badges, icon, form, checkbox, radio-button, list, card, actionsheet, picker, segment, swipe-able list, tabs, toast, drawer, thumbnail, spinner, layout, search bar etc.

Each of these components in NativeBase is made with a better version of the same component in its native part.

After finding out about NativeBase we found ourselves using it in every app we develop.

For example, we used it in various screens in Referr app, a mobile application that helps users to win points and gift cards by recommending local businesses to their friends and family. Titles of every screen were made with NativeBase  { Header, Title }. This helped us in saving a lot of time and effort.

React native UI Referr app

We use NativeBase Header component in Referr to make a better feel in UI and to reduce time and effort.

 2. React Native Elements

 React Native Elements is another cross-platform react native UI toolkit. It is completely built in Javascript and is very much easy to use. React Native Elements also supports Expo. Every component in react native elements is customizable. You can change the basic colour, size, fonts etc. for each component.

React native elements component

With React Native Elements, coding becomes much simpler. If you want to create a button component, it is as easy as the below code.

 import { Button } from’react-native-elements’;

 <Button

     title=”Solid Button”

/>

React Native Elements also gives a wide collection of icons. It has all the social icons that a developer needs in the current scenario.

 3. React Native Material UI

 React Native Material UI provides highly customizable material design components for React Native. To make more customized components, React Native Material UI is using a single JS object the uiTheme. By default, it is a light theme that can be changed easily.

React native material UI

Installing React-native-vector-icons helps to unveil the full potential of React Native Material UI.  React-native-vector-icons has wide support for icons. It helps to easily change the primary colour of the application.

 4. UI Kitten

UI kitten react native UI component

React Native UI Kitten is a mobile framework with a set of easily customizable elements. Despite there are a lot of standalone react-native components nowadays, there are not so many frameworks that offer you a wide set of commonly used components as a single dependency with similar UI design.

For instance, in Web Development there are CSS frameworks like Bootstrap that allows you to add dozens of nice-looking elements. You can also style them according to your corporate guidelines by just changing variables.

UI Kitten framework attempts to fill this gap.

All components are flexible and can be customized. It aims at boosting your mobile application development and allows you to focus on business logic instead of view composition. It helps you to bring your MVP to life in a shorter period of time.

Using React Native UI Kitten you will be able to create style configurations of components that you use the most (buttons, inputs etc.). These styles can be reused then in the process of development. Configure them once and use anywhere!

For example, below code showcases how to build a button using UI kitten.

import{RkButton }from’react-native-ui-kitten’;

 render( ) {

  return(

    <View>

       <RkButton> Click me! </RkButton>

    </View>

  )

}

 5. Nachos UI

Nachos UI kit

 Nachos UI is a React Native component library. It has almost 30 customizable UI components. Nachos UI Kit is coded with Avocode which is a fully featured tool to share, hand-off and inspect Photoshop and Sketch designs.

Nachos UI also works on web with the help of React Native Web. It also has Prettier which is an opinionated JavaScript formatter. It also uses Jest Snapshot Testing. Nachos UI is so easy to use. For example, let’s look into an example of building a simple slider.

 import { Slider } from ‘nachos-ui’

 const Example = ({ value, handleOnChange })  =>  {

  return (

   <Slider

       value = { value }

       onValueChange = { handleOnChange }

   />

   )

 }

Conclusion

For every developer, his main aim is to build his application with impressive UI in a limited time frame. When I stepped into React Native, a most difficult milestone for me to pass was to build the user interface for an application. Because this took me a lot of time and effort to offer my client an effective solution with a mind-blowing interface. But now, with these predefined and customizable UI components, the styling of the user interface is made a lot easier. I suggest you should try at least one of these UI components in your next project.

Sharoon Shaji