React Native — The Power of React Applied to Mobile Apps

As an aspiring software developer, I have recently become familiar with a myriad of JavaScript libraries and frameworks. None have proven as intuitive and practical as React. Thus I was pleased to learn about React Native, an open source mobile application framework created by Facebook. React Native is used to develop applications for a variety of platforms, including Apple iOS and Android. In the following post I will give an outline of the framework’s capabilities and main features.

What is meant by ‘Native’?

React Native is a framework which relies on a single code base to compile and distribute platform-specific applications. In the context of mobile application development, the term ‘native’ is used to indicate that the framework renders web pages in a format which mimics other applications specific, or native, to a given platform. Thus if one runs an application created with React Native on an Android device, the app will look indistinguishable from other apps on the Android platform, and the same goes for Apple devices using the iOS platform. As a result, any application created in using this framework look as though they were custom made for the particular interface on which it runs.

Under the Hood

(Not to scale)

React Native renders its own user interface elements so that they look and behave the same way across all software platforms. The framework accomplishes this using CSS and JavaScript behind the scenes. In addition, the whole React interface runs inside a a web browser with bridges to the native environment. In this manner, the business logic is run and maintained through the browser, controlling the native interface over a bridge. The main takeaway here is that React Native offers us the flexibility and simplicity of building apps with web technologies, yet producing an output that is truly native to iOS/Android.

Walkthrough => React Everywhere

Any developer who already has experience with React will immediately recognize how similar React Native looks relative to its ancestor. React Native uses virtually all of the same concepts, except it uses native components versus web components as building blocks. Features such as state and props, as well as JSX syntax, are all utilized for mobile app development within this framework. Below we have a code snippet which uses props, as well as a few components exclusive to React Native.

In this example we use name as a prop in order to customize each Greeting component, and thus that component can be reused in other parts of the project. Specific to React Native are the Text, View, and StyleSheet components which are imported into this app. These are useful containers for other components, as they help control style and layout, allowing us to build a variety of static screens.

Just as React Native employs props in the same manner as React for using unchanging properties, the framework also uses state for components to change their output in response to user actions. There is no difference in the handling of state between React and React native. In addition, we can still manage the state of our components with the use of hooks.

“Write once, run anywhere? How about…”

The creators of React Native succeeded in producing a framework which allows the same set of engineers to build apps for whichever platform they choose, without having to learn a fundamentally different group of technologies for each platform. This approach is called “learn once, write anywhere”, and for developers already acquainted in producing user interfaces with React, React Native proves to be a powerful tool for carrying out the same tasks within the purview of mobile application design.