{"id":10339,"date":"2018-08-07T19:27:30","date_gmt":"2018-08-07T16:27:30","guid":{"rendered":"https:\/\/railsware.com\/blog\/?p=10339"},"modified":"2025-01-31T19:42:03","modified_gmt":"2025-01-31T16:42:03","slug":"react-native-vs-native-app-development-ios-and-android-in-one-go","status":"publish","type":"post","link":"https:\/\/railsware.com\/blog\/react-native-vs-native-app-development-ios-and-android-in-one-go\/","title":{"rendered":"React Native vs. Native App Development – iOS and Android in One Go"},"content":{"rendered":"\n

The development of a mobile application for a digital product<\/a> is a two-lane (or even three-lane) street. Product owners need to take care of users with both iOS and Android on their devices. At the same time, modern technologies provide the capability to build a single app for both platforms. React Native is one of the tools hoping to replace native app development in the future. How likely is it to succeed?<\/p>\n\n\n

\n
\"React<\/figure><\/div>\n\n\n

React Native<\/h2>\n\n\n\n

In 2015, Facebook announced the release of this superb solution, which allows you to use the same technology for building apps for different mobile platforms – on a shared codebase. React Native is based on principles that had been introduced four years earlier with the release of React.js. This JavaScript library paved the way to creating a dynamic and powerful user interface in web development. If you want to read about the differences between both Facebook brainchildren, you can do it in our React vs. React Native<\/a> blog post.<\/p>\n\n\n\n

With the framework launch, the number of naysayers began to decrease. At the time, developers thought that writing an iPhone app with JS would be terrific but highly improbable. Androiders were less skeptical because they had been waiting until Facebook made React Native available for the most popular mobile operating system in the world so far. Nevertheless, the demand for multi-platform projects spurred a chain reaction, which consolidated React Native\u2019s position in the industry.<\/p>\n\n\n\n

How React Native builds a mobile app<\/h3>\n\n\n\n

The way you build a mobile app with React Native resembles web app creation. However, web components are replaced with native ones. First, you need to write a single codebase using React. That\u2019s the core of your app. After that, you need to enhance the core with native components to tailor a suitable cross-platform user interface.<\/p>\n\n\n\n

To keep up traditions, let\u2019s see how the classic app, “Hello, world!”, looks.<\/p>\n\n\n\n

import React, { Component } from 'react'\nimport { Text, AppRegistry } from 'react-native'\n\nclass HelloWorld extends Component {\n  render() {\n    return (\n      <View\n        style={{\n          flexDirection: 'row',\n          height: 100,\n          padding: 20,\n        }}\n      >\n        <View style={{ backgroundColor: 'blue', flex: 0.3 }} \/>\n        <View style={{ backgroundColor: 'red', flex: 0.5 }} \/>\n        <Text>Hello, world!<\/Text>\n      <\/View>\n    )\n  }\n}\n<\/pre>\n\n\n\n
Components like Text and View take after their web app building counterpart. At the same time, there are plenty of platform-specific options to implement some native UI behavior. React Native engages relevant APIs to render either iOS or Android components. There are several ways to differentiate between them depending on the platform. The first one is by using the Platform<\/em> module, which can detect the OS:<\/p>\n\n\n\n
import {Platform, StyleSheet} from 'react-native';\n\nconst styles = StyleSheet.create({\n  height: Platform.OS === 'ios' ? 200 : 100,\n});<\/pre>\n\n\n\n
However, this option is not applicable when big parts of a component are platform-specific. Besides, the module does not implement the platform-specific code, as an app developer has to fill each branch in. So, another way is to use a wrapping platform-independent component. react-native-datepicker<\/em> component has the same properties (public interface) on both platforms as it handles internally all the potential differences between platform-specific components. DatePickerAndroid<\/em> is specific for Android, so whenever you have a date picker in your app, you have to handle this one on Android and another one, DatePickerIOS<\/em> on iOS. If you look on mode<\/em> in both – they are different. So. in some cases, it might not be enough to do just<\/p>\n\n\n\n
const DatePicker = Platform.OS === 'ios' ? DatePickerIOS : DatePickerAndroid\n<\/pre>\n\n\n\n
since they have different interfaces.<\/p>\n\n\n\n
Another option is to split the code out into separate files marked with a corresponding extension: .ios.<\/em> or .android.<\/em>, for example DatePicker.android.js<\/em>. Such filename would make it easier to understand.<\/p>\n\n\n\n
In this regard, threads play a significant role in the building process, because they execute separate tasks in parallel:<\/p>\n\n\n\n