User Interface

React Native

Using React Native is similar to using HTML without any CSS framework.

Unlike Flutter’s Flat App, in React Native we had to use third-party libraries since React Native does not have a UI components library of its own.

We used components such as NativeBase, which is an open-source UI components library created by us. React Native Elements, React Native Material Design and Shoutem are other similar UI libraries that are available to the user.

Flutter

Flutter has its own UI components, along with an engine to render them on Android as well as iOS platform. Most of these components conform to the guidelines of Material Design.

We are using Flutter’s in-built components for the UI development of our app. These components are called widgets. Here, we only had to use the right widgets and pass the right props to the widgets to get the desired UI for our screens.

Every widget in the Flutter is defined by their own properties and can be nested inside other components. Widgets can also call upon the properties of its parent component.

Flat App in Flutter performs better than the one in React Native because it has minimal interaction with the native code. This is also why animation in Flutter’s Flat App are faster.

In React Native, we can bridge native modules as well as use native UI components. But this is not possible in Flutter since Flutter has its own rendering engine.

This is actually why Flutter has not been able to support Google Maps yet.

Here are a few examples of Flutter Widgets:

Drawer

Drawer is a Material design panel that slides in horizontally from the edge of a Scaffold to show navigation links in an application. Here’s the Drawer from the Flutter Flat App alongwith its React Native equivalent called SideBar :

React Native Flat App’s SideBar Component

Flutter FlatApp’s Drawer Widget

Inkwell

Inkwell defines a rectangular area of a Material that responds to touch. We have used this widget to create a ripple effect when the user touches the screen.

In React Native, we don’t need to create a whole new component to create this ripple effect. React Native’s TouchableOpacity already has this effect as default.

GestureDetector

GestureDetector as the name suggests, is a widget that detects gestures. GestureDetector attempts to recognize gestures that correspond to it’s non-null callbacks.

If this widget has a child, it defers to that child for its sizing behavior. If it does not have a child, it grows to fit the parent instead.

As shown in code below, the GestureDetector widget will defer to the Container widget for its sizing behavior.

GestureDetector is the equivalent of TouchableOpacity in React Native. So, we do not need to create any new components here.

DefaultTabController

DefaultTabController is the default TabController widget and is used for widgets that don’t specify one explicitly.

It is an inherited widget that is used to share a TabController with a TabBar or TabBarView . We have used this widget to share the TabController with a TabBar.

This widget is used when sharing an explicitly created TabController isn’t convenient as the TabBar widgets are created by a stateless parent widget or by different parent widgets.

In the React Native Flat App, we used the Tab Navigator to perform the same operation.

Tab Navigator in React Native