React Native - Overview

What is React Native?

React Native is an open source JavaScript framework for developing cross-platform mobile applications. It lets you build applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows using only Javascript without learning platform-specific application development languages such as Swift or Kotlin. React Native's first version was released in March 2015 by Facebook. 

React Native is based on JavaScript library and XML(JSX) for developing user interface. It's targets mobile platforms rather than web browsers.

React Native allows to build real native application that are similar like native applications build using Objective-C or Java or Android. Like other it can not build web applications or hybrid applications. It uses same fundamental of UI building blocks as of Android and iOS apps. 

Note: React Native is a JavaScript framework while React JS(React.js) is a JavaScript library.

React Native Logo
Credit: https://reactnative.dev


Features of React Native

React Native have following features

1. Reduce Development Time & Cost

React Native allows to develop applications that are compatible with both iOS and Android platforms. About 90% of react code used for both platforms. Reuse of code decrease the overall development time that directly reduce the cost of the development. 

2. Reusable & Dynamic Platform Components

Some applications requires unique branding without bothering about the platforms. Unique branding are generally hard in native but quite easy with react. React components are reusable.

3. JavaScript

JavaScript knowledge can be used for mobile application development.

4. Large Community

React have a very large community that helps with your issues. You can get answer for any issues in minimal time.

React Native Limitations

1. Native Components

React Native is new so there are limited functionality. If you want to create any new functionality then you have to write platform specific codes.

Interactive Example

Lets see an interactive example to understand easily

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default class App extends Component {
   render() {
      return (
         <View style = {styles.container}>
            <Text>Hello Interactive Example</Text>
         </View>
      );
   }
}

const styles = StyleSheet.create({
   container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
   },
});