Skip to end of metadata
Go to start of metadata

Mobile app or Mobile application


 

mobile app is a software application developed specifically for use on small, wireless computing devices, such as smartphones and tablets, rather than desktop or laptop computers.

 

Mobile application types


                   

TypeDetail
Native Mobile App

Native application are developed for specifically for one  platform and can make full use of hardware features. Apple has Objective C (and Swift) to develop iOS application. Google uses Java to develop android application and Microsoft deploys C# or Visual Basic for their Windows Phones.

Because of platform specific development approach one should learn and maintain platform specific code base and follow application release cycle. To make life easy in developing native application for multiple platform Facebook has developed a new framework called react native that compile directly into native and solve cross platform problem.

 Even apple new language swift is coming as the first choice to develop iOS application , server side application and google also considering it to make first class language to develop android application.

Hybrid Mobile App

Hybriddevelopment combines the best (or worst) of both the native and HTML5 worlds. We define hybrid as a web app, primarily built using HTML5 and JavaScript, that is then wrapped inside a thin native container that provides access to native platform features. Phone gap, Ionic framework are some of the available option to develop hybrid application.


But when it comes to the performance they failed to surprise us. Framework such as Ionic have greatly improved the performance with the use of angular js but they still render every thing in web view.

Web ApplicationMobile web application are generally responsive website that will perfectly fit into mobile phone screen and gives perfect user experience. HTML, CSS , javascript are used to develop this kind of application.



Why do we need to think of other option instead of native app development ?


 

1. No portability 

Since each native application only runs on one platform, businesses building native apps must make a choice--build for one platform or build for multiple platforms? Unfortunately, there’s no easy answer. As illustrated by the image below, the mobile platform landscape includes 4 major smartphone platforms and 4 major tablet platforms. Building an app for just one platform excludes 7 platforms, yet building for all platforms requires significant time and resources. 

 

2. Platform instability 

The mobile platform landscape is notoriously unstable. A popular platform today may disappear in just a few years. For example, both Blackberry and Palm dominated the mobile industry just 5 short years ago. Today, Blackberry is struggling and Palm doesn’t exist. The fact is, nobody knows what the mobile platform landscape will look like in another 5 years. Companies that choose the native approach always run the risk of wasting time and money building for a platform that might not last. 

3. Development cost 

While native app development cost varies depending on the app’s complexity, it’s easily the most expensive and time-consuming approach. For example, Forrester Research estimates that most native apps require at least 6 months of full-time work, and cost between $20,000 and $150,000, depending on complexity. 

It’s important to note that those estimates apply to single-platform native app development. The cost rises exponentially when developing cross-platform native applications, as every platform requires a separate application built with a different programming language. 

4. Development time 

As mentioned above, Forrester Research estimates that a single native app requires 6 months of development time. If building native apps for more than one platform, the time requirements rise depending on the number of developers needed and application complexity. For example, using just one developer for cross-platform smartphone app development brings the development time up to 2 years (4 apps x 6 months each). However, development time estimates become increasingly complex when using multiple developers. For instance, if a business uses four different developers for cross-platform smartphone app development, they will receive four different app designs. As any project manager knows, ensuring that multiple apps created by multiple developers look and function identically is a very time- consuming task. 

5. Maintenance cost 

While all apps require regular updates and maintenance, native apps require the most future maintenance when compared with the other two mobile app options. Beyond regular app maintenance, native apps must also be updated with every new platform release. Additionally, businesses that build native apps for multiple platforms must maintain multiple applications, duplicating every change or update across all applications. For instance, a minor change to a cross platform smartphone and tablet application requires changes to eight separate applications. 

6. Limited control 

When placed in an app store, a native application is completely controlled by the app store’s owner (like Apple or Google). For instance, if Apple rejects or bans a company’s app from their app store, the company has no recourse. If Apple decides an app doesn’t meet their terms of service, the app is removed. If another company claims copyright over an element in the app, the app is removed. Or, if Apple decides the app isn’t right for their store, the app is removed. The app store model puts companies at the mercy of a third party. All of the resources put into their application are wasted if that app store’s owner decides the app isn’t right for their store. 

 

7. Learning Curve

For developing multi-platform application, once should go through the very different programming language specific to that platform. Apple has Objective C (and Swift) to develop iOS application. Google uses Java to develop android application and Microsoft deploys C# or Visual Basic for their Windows Phones. 



React Native



React Native is the next generation of React - a Javascript code library developed by Facebook and Instagram, which was released on Github in 2013. This is a framework that lets you build native iOS and Android application by using javascript backed by native iOS and Android component.  So react native utilize both the advantages of Native app  and Hybrid app functionality. 

 React native is not a"Write once ,run everywhere" framework, as it require you to build the UI using component that are specific to the platform. This does not means all code need to rewrite when switched to new platform. React native  support code reuse.  It emphasis developer to "Learn once, use everywhere".  Airbnb, Box, Facebook, GitHub, Google, Instagram, LinkedIn, Microsoft, Pinterest, Pixar Animation Studios, Twitter, Uber, and WhatsApp all use React code.

 

//TODO

In React Native, you can use the same editor and propagate it to both the iOS simulator and Android emulator at the same time. 

Declarative - Predictable -  Confidence - Reliable.

 

Why to use react native ?


 


1. Truly Native

Most mobile apps built with JavaScript use Cordova, or a framework built on top of it, such as the popular Ionic or Sencha Touch. With Cordova, you have the ability to make calls to native APIs, but the bulk of your app will be HTML and JavaScript inside a WebView. While you can approximate native components – and it is certainly possible to build a great UI with HTML and JS , but none of such  app will match the look and feel of a real native app. The little things – like scrolling acceleration, keyboard behavior, and navigation – all add up and can create frustrating experiences for your customers when they don’t behave as expected.

 Although you still write JavaScript with React Native, the components you define will end up rendering as native platform widgets. React Native component definitions look and behave pretty much just like React for web components, but target native UI widgets instead of HTML. So instead of using a <div>, you would use a <View> (which on iOS gets rendered to a native UIView, and on Android, android.view). When your components’ data changes, React Native will calculate what in your view needs to be altered, and make the needed calls to whatever native UI widgets are displayed.

 So react native application have "NO HTML, NO Browser and No Webview"  that makes it more responsive giving native UI  and user experience.

2. Application State

3. Responsive

And it is fast! JavaScript isn’t as fast as native code can be, but for most tasks, JavaScript and React Native are more than capable of keeping your app running at 60 frames per second. Under the hood, your JavaScript code is run on its own thread, separate from the main UI thread. So even when your app is running complex logic, your UI can still be smoothly animating or scrolling at 60fps, so long as the UI isn’t blocked by the JS thread.

 

4. Ease of Learning

One of React’s greatest strengths is how readable it is, even to those unfamiliar with it. Many frameworks require that you learn a long list of concepts that are only useful within that framework, while ignoring language fundamentals. React does its absolute best to do the opposite. As an example, consider the difference between rendering a portion of a list of friends in React Native vs Ionic (AngularJS).

 

FrameworkDescriptionSample code
ionic

With Ionic, you use the ngRepeat directive. Let us say we have an array of friends, each of which contains the following fields: first_name, last_name and is_online. But we only want to show those friends that are currently online. Here is our controller:

If you aren’t familiar with Ionic/AngularJS, this code snippet raises some immediate questions. What is $scope? What is the syntax for filter? And how would I add additional behavior, like sorting the list of friends?

function FriendCtrl($scope) {
	$scope.friends = [
		{
			first_name: 'John',
			last_name: 'Doe',
			is_online: true,
		},
		{
			first_name: 'Jane',
			last_name: 'Doe',
			is_online: true,
		},
		{
			first_name: 'Foo',
			last_name: 'Bar',
			is_online: false,
		}
	];
}

And for view

 

<div ng-controller="FriendCtrl">
	<ul>
		<li ng-repeat="friend in friends | filter:{is_online:true}">
			{{friend.last_name}}, {{friend.first_name}}
		</li>
	</ul>
</div>
React NativeWith React Native, you make use of your existing knowledge of language fundamentals, using the built-in filter and map functions.
const DemoComponent = React.createClass({
	render() {
		const friends = [
			{
				first_name: 'John',
				last_name: 'Doe',
				is_online: true,
			},
			{
				first_name: 'Jane',
				last_name: 'Doe',
				is_online: true,
			},
			{
				first_name: 'Foo',
				last_name: 'Bar',
				is_online: false,
			}
		];

		return (
			<View>
				{friends
					.filter(f => f.is_online)
					.map(f => <View>{f.last_name}, {f.first_name}</View>)}
			</View>
		);
	}
});

 

5. Vibrant Ecosystem

Since the majority of your React Native code is just plain JavaScript, it reaps the benefits of all the advancements in the language and its ecosystem.  For eg. React Native can easily integrate with other power javascript library available out there.

JS LibraryDescription
lodash

Lodash makes JavaScript easier by taking the hassle out of working with arrays,
numbers, objects, strings, etc. Lodash’s modular methods are great for:

  • Iterating arrays, objects, & strings
  • Manipulating & testing values
  • Creating composite functions
Moment.jsFor manipulating or displaying dates and times
reduxredux is an awesome library for manipulating your application’s state. Once your state changes are written this way, your app can take advantage of powerful features, like global undo/redo and hot reloading.


6. One Design Tool

React Native’s support for flexbox means you can use the exact same layout code for Android, iOS and web, instead of learning three different engines.

7. Developer Experience

Happy developers are productive developers, and React Native has a great development environment. Instead of repeatedly waiting for your code to compile and your app to restart while making tiny edits, changes to a React Native codebase are made to your running app without the need to restart. 

And if you’ve written any JavaScript before, you’re probably already familiar with the Chrome developer tools. When running React Native in development mode, you can attach to your desktop Chrome browser, so you’ll be right at home with its debugger and profiling tools. Attaching to Chrome works either in the simulator or connected to a physical device.

 

8. Code sharing

React Native can share code between Android and iOS.

9. Live Update

Anyone who has shipped an iOS app has experienced the frustration of waiting for App Store approval. With React Native, it is possible to do live updates to your app without going through the App Store – much like for a web app. Since the bulk of your app will be JavaScript, you can fetch updates on the fly over the network. There are already services to help with this like AppHub .

 

 

Getting Started with React Native


 


Requirements 

    1. OS X - This guide assumes OS X which is needed for iOS development.
    2. Homebrew is the recommended way to install Watchman and Flow.
    3. Install Node.js 4.0 or newer.
      • Install nvm with its setup instructions here. Then run nvm install node && nvm alias default node, which installs the latest version of Node.js and sets up your terminal so you can run it by typing node. With nvm you can install multiple versions of Node.js and easily switch between them.
      • New to npm?
    1. brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.
    2. brew install flow, if you want to use flow.

We recommend periodically running brew update && brew upgrade to keep your programs up-to-date.

iOS Setup 

Xcode 7.0 or higher is required. It can be installed from the App Store.

Android Setup 

To write React Native apps for Android, you will need to install the Android SDK (and an Android emulator if you want to work on your app without having to use a physical device). See Android setup guide for instructions on how to set up your Android environment.

NOTE: There is experimental Windows and Linux support for Android development.

Quick start 

Install the React Native command line tools:

$ npm install -g react-native-cli

NOTE: If you see the error, EACCES: permission denied, please run the command: sudo npm install -g react-native-cli.

Create a React Native project:

$ react-native init AwesomeProject

To run the iOS app:

    • $ cd AwesomeProject
    • Open ios/AwesomeProject.xcodeproj and hit run in Xcode.
    • Open index.ios.js in your text editor of choice and edit some lines.
    • Hit ⌘-R in your iOS simulator to reload the app and see your change!

Note: If you are using an iOS device, see the Running on iOS Device page.

To run the Android app:

    • $ cd AwesomeProject
    • $ react-native run-android
    • Open index.android.js in your text editor of choice and edit some lines.
    • Press the menu button (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your change!
    • Run adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal to see your app's logs

Note: If you are using an Android device, see the Running on Android Device page.

Congratulations! You've successfully run and modified your first React Native app.

If you run into any issues getting started, see the troubleshooting page.

Adding Android to an existing React Native project 

If you already have a (iOS-only) React Native project and want to add Android support, you need to execute the following commands in your existing project directory:

    1. Update the react-native dependency in your package.json file to the latest version
    2. $ npm install
    3. $ react-native android




Note 
 

https://trigger.io

similar to react native

ref vid

 

To run your app on iOS:

   cd /Users/javra/Desktop/sample/HelloReactNative

   react-native run-ios

   - or -

   Open /Users/javra/Desktop/sample/HelloReactNative/ios/HelloReactNative.xcodeproj in Xcode

   Hit the Run button

 

To run your app on Android:

   Have an Android emulator running (quickest way to get started), or a device connected

   cd /Users/javra/Desktop/sample/HelloReactNative

   react-native run-android

 

Supported native UI Components in React Native for android and iOS


ref: https://www.google.com/design/spec/components/data-tables.html
ref: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ContentViews.html#//apple_ref/doc/uid/TP40006556-CH13-SW1

ref: https://android-arsenal.com/details/1/1156


iOS UI Component

Android UI Component

React Native UI Component

iOS UIAndroid UIReact Native Support
Status 
Status Bar

 

 yes

iOS: Navigation Bar

Android: App Bar /ToolBar

yes

iOS: Tool Bar

Android: Tool Bar

 

yes

Tab Bar

Android: Bottom Bar

yes

iOS: Search Bar

Android: Search View

yes
Layout

iOS: Horizontal Stack View

Android: Linear Layout / Relative Layout

yes

iOS: Vertical Stack View

Android: Linear Layout / Relative Layout

 yes
Content View
Scroll View 

yes

iOS: Web View

Android: Web View

 

iOS: Table View

Android: List View

yes

iOS: Collection View

Android: Grid View

yes

iOS: Image View

Android: Image View

yes

iOS: Map VIew

Android: Map view

yes

iOS: Popover View

Android: Spinners

 
Split View  
Input UI Component
Text View yes

iOS: Text Field

Android: TexT Field

yes

iOS:Label

Android: Label

yes
Control UI Component

iOS: Activity Indicator View

Android : Progress and Activity

yes

iOS: Alert View

Android: Dialog

yes
iOS: Action Sheet yes

iOS: Activity View

Android: Bottom Sheet

yes
Android: Snackbars & toasts  
iOS: Button   
Android: Radio Button  
Android: Checkbox  

iOS: Date Picker View

Android: Pickers

yes

iOS: Picker View 

yes

iOS: Page Control

Android: Steppers

yes

iOS: Progress Indicator

Android: Progress Indicator

yes
Segment Control View yes
Refresh Control View yes

iOS:Slider

Android: Slider

 

yes

Stepper yes

iOS: Switch

Android: Toggle Button

yes
Android: Chips  

 



Application build with React Native


 

These are some of the most well-crafted React Native apps that we have come across. 

  • Facebook Group
  • Sound Cloud
  • Discovery VR

More info can be found at https://facebook.github.io/react-native/showcase.html or http://www.reactnative.com

 

Mobile app or Mobile application


 

mobile app is a software application developed specifically for use on small, wireless computing devices, such as smartphones and tablets, rather than desktop or laptop computers.

 

Mobile application types


                   

TypeDetail
Native Mobile App

Native application are developed for specifically for one  platform and can make full use of hardware features. Apple has Objective C (and Swift) to develop iOS application. Google uses Java to develop android application and Microsoft deploys C# or Visual Basic for their Windows Phones.

Because of platform specific development approach one should learn and maintain platform specific code base and follow application release cycle. To make life easy in developing native application for multiple platform Facebook has developed a new framework called react native that compile directly into native and solve cross platform problem.

 Even apple new language swift is coming as the first choice to develop iOS application , server side application and google also considering it to make first class language to develop android application.

Hybrid Mobile App

Hybriddevelopment combines the best (or worst) of both the native and HTML5 worlds. We define hybrid as a web app, primarily built using HTML5 and JavaScript, that is then wrapped inside a thin native container that provides access to native platform features. Phone gap, Ionic framework are some of the available option to develop hybrid application.


But when it comes to the performance they failed to surprise us. Framework such as Ionic have greatly improved the performance with the use of angular js but they still render every thing in web view.

Web ApplicationMobile web application are generally responsive website that will perfectly fit into mobile phone screen and gives perfect user experience. HTML, CSS , javascript are used to develop this kind of application.



Why do we need to think of other option instead of native app development ?


 

1. No portability 

Since each native application only runs on one platform, businesses building native apps must make a choice--build for one platform or build for multiple platforms? Unfortunately, there’s no easy answer. As illustrated by the image below, the mobile platform landscape includes 4 major smartphone platforms and 4 major tablet platforms. Building an app for just one platform excludes 7 platforms, yet building for all platforms requires significant time and resources. 

 

2. Platform instability 

The mobile platform landscape is notoriously unstable. A popular platform today may disappear in just a few years. For example, both Blackberry and Palm dominated the mobile industry just 5 short years ago. Today, Blackberry is struggling and Palm doesn’t exist. The fact is, nobody knows what the mobile platform landscape will look like in another 5 years. Companies that choose the native approach always run the risk of wasting time and money building for a platform that might not last. 

3. Development cost 

While native app development cost varies depending on the app’s complexity, it’s easily the most expensive and time-consuming approach. For example, Forrester Research estimates that most native apps require at least 6 months of full-time work, and cost between $20,000 and $150,000, depending on complexity. 

It’s important to note that those estimates apply to single-platform native app development. The cost rises exponentially when developing cross-platform native applications, as every platform requires a separate application built with a different programming language. 

4. Development time 

As mentioned above, Forrester Research estimates that a single native app requires 6 months of development time. If building native apps for more than one platform, the time requirements rise depending on the number of developers needed and application complexity. For example, using just one developer for cross-platform smartphone app development brings the development time up to 2 years (4 apps x 6 months each). However, development time estimates become increasingly complex when using multiple developers. For instance, if a business uses four different developers for cross-platform smartphone app development, they will receive four different app designs. As any project manager knows, ensuring that multiple apps created by multiple developers look and function identically is a very time- consuming task. 

5. Maintenance cost 

While all apps require regular updates and maintenance, native apps require the most future maintenance when compared with the other two mobile app options. Beyond regular app maintenance, native apps must also be updated with every new platform release. Additionally, businesses that build native apps for multiple platforms must maintain multiple applications, duplicating every change or update across all applications. For instance, a minor change to a cross platform smartphone and tablet application requires changes to eight separate applications. 

6. Limited control 

When placed in an app store, a native application is completely controlled by the app store’s owner (like Apple or Google). For instance, if Apple rejects or bans a company’s app from their app store, the company has no recourse. If Apple decides an app doesn’t meet their terms of service, the app is removed. If another company claims copyright over an element in the app, the app is removed. Or, if Apple decides the app isn’t right for their store, the app is removed. The app store model puts companies at the mercy of a third party. All of the resources put into their application are wasted if that app store’s owner decides the app isn’t right for their store. 

 

7. Learning Curve

For developing multi-platform application, once should go through the very different programming language specific to that platform. Apple has Objective C (and Swift) to develop iOS application. Google uses Java to develop android application and Microsoft deploys C# or Visual Basic for their Windows Phones. 



React Native



React Native is the next generation of React - a Javascript code library developed by Facebook and Instagram, which was released on Github in 2013. This is a framework that lets you build native iOS and Android application by using javascript backed by native iOS and Android component.  So react native utilize both the advantages of Native app  and Hybrid app functionality. 

 React native is not a"Write once ,run everywhere" framework, as it require you to build the UI using component that are specific to the platform. This does not means all code need to rewrite when switched to new platform. React native  support code reuse.  It emphasis developer to "Learn once, use everywhere".  Airbnb, Box, Facebook, GitHub, Google, Instagram, LinkedIn, Microsoft, Pinterest, Pixar Animation Studios, Twitter, Uber, and WhatsApp all use React code.

 

//TODO

In React Native, you can use the same editor and propagate it to both the iOS simulator and Android emulator at the same time. 

Declarative - Predictable -  Confidence - Reliable.

 

Why to use react native ?


 


1. Truly Native

Most mobile apps built with JavaScript use Cordova, or a framework built on top of it, such as the popular Ionic or Sencha Touch. With Cordova, you have the ability to make calls to native APIs, but the bulk of your app will be HTML and JavaScript inside a WebView. While you can approximate native components – and it is certainly possible to build a great UI with HTML and JS , but none of such  app will match the look and feel of a real native app. The little things – like scrolling acceleration, keyboard behavior, and navigation – all add up and can create frustrating experiences for your customers when they don’t behave as expected.

 Although you still write JavaScript with React Native, the components you define will end up rendering as native platform widgets. React Native component definitions look and behave pretty much just like React for web components, but target native UI widgets instead of HTML. So instead of using a <div>, you would use a <View> (which on iOS gets rendered to a native UIView, and on Android, android.view). When your components’ data changes, React Native will calculate what in your view needs to be altered, and make the needed calls to whatever native UI widgets are displayed.

 So react native application have "NO HTML, NO Browser and No Webview"  that makes it more responsive giving native UI  and user experience.

2. Application State

3. Responsive

And it is fast! JavaScript isn’t as fast as native code can be, but for most tasks, JavaScript and React Native are more than capable of keeping your app running at 60 frames per second. Under the hood, your JavaScript code is run on its own thread, separate from the main UI thread. So even when your app is running complex logic, your UI can still be smoothly animating or scrolling at 60fps, so long as the UI isn’t blocked by the JS thread.

 

4. Ease of Learning

One of React’s greatest strengths is how readable it is, even to those unfamiliar with it. Many frameworks require that you learn a long list of concepts that are only useful within that framework, while ignoring language fundamentals. React does its absolute best to do the opposite. As an example, consider the difference between rendering a portion of a list of friends in React Native vs Ionic (AngularJS).

 

FrameworkDescriptionSample code
ionic

With Ionic, you use the ngRepeat directive. Let us say we have an array of friends, each of which contains the following fields: first_name, last_name and is_online. But we only want to show those friends that are currently online. Here is our controller:

If you aren’t familiar with Ionic/AngularJS, this code snippet raises some immediate questions. What is $scope? What is the syntax for filter? And how would I add additional behavior, like sorting the list of friends?

function FriendCtrl($scope) {
	$scope.friends = [
		{
			first_name: 'John',
			last_name: 'Doe',
			is_online: true,
		},
		{
			first_name: 'Jane',
			last_name: 'Doe',
			is_online: true,
		},
		{
			first_name: 'Foo',
			last_name: 'Bar',
			is_online: false,
		}
	];
}

And for view

 

<div ng-controller="FriendCtrl">
	<ul>
		<li ng-repeat="friend in friends | filter:{is_online:true}">
			{{friend.last_name}}, {{friend.first_name}}
		</li>
	</ul>
</div>
React NativeWith React Native, you make use of your existing knowledge of language fundamentals, using the built-in filter and map functions.
const DemoComponent = React.createClass({
	render() {
		const friends = [
			{
				first_name: 'John',
				last_name: 'Doe',
				is_online: true,
			},
			{
				first_name: 'Jane',
				last_name: 'Doe',
				is_online: true,
			},
			{
				first_name: 'Foo',
				last_name: 'Bar',
				is_online: false,
			}
		];

		return (
			<View>
				{friends
					.filter(f => f.is_online)
					.map(f => <View>{f.last_name}, {f.first_name}</View>)}
			</View>
		);
	}
});

 

5. Vibrant Ecosystem

Since the majority of your React Native code is just plain JavaScript, it reaps the benefits of all the advancements in the language and its ecosystem.  For eg. React Native can easily integrate with other power javascript library available out there.

JS LibraryDescription
lodash

Lodash makes JavaScript easier by taking the hassle out of working with arrays,
numbers, objects, strings, etc. Lodash’s modular methods are great for:

  • Iterating arrays, objects, & strings
  • Manipulating & testing values
  • Creating composite functions
Moment.jsFor manipulating or displaying dates and times
reduxredux is an awesome library for manipulating your application’s state. Once your state changes are written this way, your app can take advantage of powerful features, like global undo/redo and hot reloading.


6. One Design Tool

React Native’s support for flexbox means you can use the exact same layout code for Android, iOS and web, instead of learning three different engines.

7. Developer Experience

Happy developers are productive developers, and React Native has a great development environment. Instead of repeatedly waiting for your code to compile and your app to restart while making tiny edits, changes to a React Native codebase are made to your running app without the need to restart. 

And if you’ve written any JavaScript before, you’re probably already familiar with the Chrome developer tools. When running React Native in development mode, you can attach to your desktop Chrome browser, so you’ll be right at home with its debugger and profiling tools. Attaching to Chrome works either in the simulator or connected to a physical device.

 

8. Code sharing

React Native can share code between Android and iOS.

9. Live Update

Anyone who has shipped an iOS app has experienced the frustration of waiting for App Store approval. With React Native, it is possible to do live updates to your app without going through the App Store – much like for a web app. Since the bulk of your app will be JavaScript, you can fetch updates on the fly over the network. There are already services to help with this like AppHub .

 

 

Getting Started with React Native


 


Requirements 

    1. OS X - This guide assumes OS X which is needed for iOS development.
    2. Homebrew is the recommended way to install Watchman and Flow.
    3. Install Node.js 4.0 or newer.
      • Install nvm with its setup instructions here. Then run nvm install node && nvm alias default node, which installs the latest version of Node.js and sets up your terminal so you can run it by typing node. With nvm you can install multiple versions of Node.js and easily switch between them.
      • New to npm?
    1. brew install watchman. We recommend installing watchman, otherwise you might hit a node file watching bug.
    2. brew install flow, if you want to use flow.

We recommend periodically running brew update && brew upgrade to keep your programs up-to-date.

iOS Setup 

Xcode 7.0 or higher is required. It can be installed from the App Store.

Android Setup 

To write React Native apps for Android, you will need to install the Android SDK (and an Android emulator if you want to work on your app without having to use a physical device). See Android setup guide for instructions on how to set up your Android environment.

NOTE: There is experimental Windows and Linux support for Android development.

Quick start 

Install the React Native command line tools:

$ npm install -g react-native-cli

NOTE: If you see the error, EACCES: permission denied, please run the command: sudo npm install -g react-native-cli.

Create a React Native project:

$ react-native init AwesomeProject

To run the iOS app:

    • $ cd AwesomeProject
    • Open ios/AwesomeProject.xcodeproj and hit run in Xcode.
    • Open index.ios.js in your text editor of choice and edit some lines.
    • Hit ⌘-R in your iOS simulator to reload the app and see your change!

Note: If you are using an iOS device, see the Running on iOS Device page.

To run the Android app:

    • $ cd AwesomeProject
    • $ react-native run-android
    • Open index.android.js in your text editor of choice and edit some lines.
    • Press the menu button (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your change!
    • Run adb logcat *:S ReactNative:V ReactNativeJS:V in a terminal to see your app's logs

Note: If you are using an Android device, see the Running on Android Device page.

Congratulations! You've successfully run and modified your first React Native app.

If you run into any issues getting started, see the troubleshooting page.

Adding Android to an existing React Native project 

If you already have a (iOS-only) React Native project and want to add Android support, you need to execute the following commands in your existing project directory:

    1. Update the react-native dependency in your package.json file to the latest version
    2. $ npm install
    3. $ react-native android




 

 

Supported native UI Components in React Native for android and iOS


ref: https://www.google.com/design/spec/components/data-tables.html
ref: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/ContentViews.html#//apple_ref/doc/uid/TP40006556-CH13-SW1

ref: https://android-arsenal.com/details/1/1156


SN

iOS UI Component

Android UI Component

React Native UI Component

 Android UI ComponentReact Native UI ComponentNotes
 Status Bar

 

   
 

iOS: Navigation Bar

Android: App Bar /ToolBar

  
 

iOS: Tool Bar

Android: Tool Bar

 

  
 

Tab Bar

Android: Bottom Bar

  
 

iOS: Search Bar

Android: Search View

  
Layout
 

iOS: Horizontal Stack View

Android: Linear Layout / Relative Layout

  
 

iOS: Vertical Stack View

Android: Linear Layout / Relative Layout

   
Content View
 Scroll View   
 

iOS: Web View

Android: Web View

  
 

iOS: Table View

Android: List View

  
 

iOS: Collection View

Android: Grid View

  
 

iOS: Image View

Android: Image View

  
 

iOS: Map VIew

Android: Map view

  
 

iOS: Popover View

Android: Spinners

  
 Split View   
Input UI Component
 Text View   
 

iOS: Text Field

Android: TexT Field

  
 

iOS:Label

Android: Label

  
Control UI Component
 

iOS: Activity Indicator View

Android : Progress and Activity

iOS:

DatePickerIOS

Android:

 
 

iOS: Alert View

Android: Dialog

  
 iOS: Action Sheet   
 

iOS: Activity View

Android: Bottom Sheet

  
 Android: Snackbars & toasts   
 iOS: Button    
 Android: Radio Button   
 Android: Checkbox   
 

iOS: Date Picker View

Android: Pickers

  
 iOS: Picker View   
 

iOS: Page Control

Android: Steppers

  
 

iOS: Progress Indicator

Android: Progress Indicator

  
 Segment Control View   
 Refresh Control View   
 

iOS:Slider

Android: Slider

  
 Stepper   
 

iOS: Switch

Android: Toggle Button

  
 Android: Chips   

 



Mobile Api Support by React Native

  • Push Notification
  • Animation
  • Accessibility
  • Gesture Handling
  • Vibration 
  • GPS
  • Camera
  • Calendar

In those api which are not yet supported by React Native , these can be addressed with following great capability of React Native

  • Native Modules
    Sometimes an app needs access to platform API, and React Native doesn't have a corresponding module yet. Maybe you want to reuse some existing Objective-C, Swift or Java code without having to reimplement it in JavaScript .  In React Native  it is possible for you to write real native code and have access to the full power of the platform.
  • Native UI Components
    There are tons of native UI widgets out there ready to be used in the latest apps - some of them are part of the platform, others are available as third-party libraries, and still more might be in use in your very own portfolio. React Native has several of the most critical platform components already wrapped, like ScrollView and TextInput, but not all of them, and certainly not ones you might have written yourself for a previous app. Fortunately, it's quite easy to wrap up these existing components for seamless integration with your React Native application.
  • Integrate with existing Application
    Since React makes no assumptions about the rest of your technology stack – it’s commonly noted as simply the V in MVC – it’s easily embeddable within an existing non-React Native app. 
  • Communication between React Native and Native 
    In Integrating with Existing Apps guide and Native UI Components guide we learn how to embed React Native in a native component and vice versa. When we mix native and React Native components, we'll eventually find a need to communicate between these two worlds. Some ways to achieve that have been already mentioned in other guides. This article summarizes available techniques. 


Application build with React Native


 

These are some of the most well-crafted React Native apps that we have come across. 

  • Facebook Group
  • Sound Cloud
  • Discovery VR

More info can be found at https://facebook.github.io/react-native/showcase.html or http://www.reactnative.com

 

Note 
 

https://trigger.io

similar to react native

 

To run your app on iOS:

   cd /Users/javra/Desktop/sample/HelloReactNative

   react-native run-ios

   - or -

   Open /Users/javra/Desktop/sample/HelloReactNative/ios/HelloReactNative.xcodeproj in Xcode

   Hit the Run button

 

To run your app on Android:

   Have an Android emulator running (quickest way to get started), or a device connected

   cd /Users/javra/Desktop/sample/HelloReactNative

   react-native run-android

  • No labels