The smartphone app development, as opposed to traditional web app development and desktop development is bit different. On comparison with the deliverance of mobile devices, desktop and browsers provide less features like voice calling, Touch screen, instant notification, camera, Audio, Video, Social apps etc. Yes, smartphones play a big role in making life easier for the user and hence the apps on a smartphone should also follow same protocol.
Let’s see the several ways to approach mobile application development for iOS and android.
- Native Development
Native language is used for development and uses OS direct. The most enriched UI and UX can be created and is flexible, efficient, and fast. An app can be created in the app and runs directly on the OS and not on the Virtual machines, browser or run time on the OS.
Android uses android studio for native app development. The native programming language used by android studio is Java.
iOS uses x-code for native app development. The native programming language used by android studio is Objective C.
- React Native Development
React Native is a technology focused solely on building mobile apps using the platform node.js, Android Studio/ Expo Client App. React Native uses ReactJS as the JavaScript library, which enables it users to have all its advantages. To build a cross-platform app with React Native, the language of the native platform needn’t be known by developers. They should be familiar with JavaScript and be familiar with the React syntax. They can also add a native component to the code.
The primary advantage of React native is the preservation of downward data flow. Which enables the core components to be edited sans impact of child components. User experience is positively affected and makes the UI development smooth giving it a native look and feel.
In comparison with JavaScript frameworks like AngularJS or MeteorJS, React Native is UI-focused, like JavaScript library than a framework. The end UI is immensely responsive and smooth due to the JavaScript interactions with the native environment. This means the app will have faster load times than a typical hybrid app, and a smoother feel.
ReactJS is a JavaScript library which supports both front-end web and run on the server, for building user interfaces and web applications. React Native on the other hand is a mobile framework that compiles to native app components, allowing you to build React native mobile applications (iOS, Android, and Windows) in JavaScript that allows you to use ReactJS to build your components, and also implements ReactJS under the hood.
In this article, we will be discussing about the Platform Node.Js and Expo XDE and how these are used for creating mobile app using React Native Development method.
1)Mobile App development using Node.Js
a)Install React Native: The initial step in app development using Node.Js is installing React Native. To install react Native, use the command line user interface of Node.Js. The command is:
“npm install -g react-native-cli”
b)Go to Project Folder: Using the React Native command line tools enables you to generate a new React Native project called “MyProject”.
c)Run react-native run-android: Once a new folder is created, then run the react-native run-android inside the newly created folder.
- react-native init MyProject
- react-native run-android
One of the common issue is that the packager may not start automatically when you run react-native run-android and the alternative for this is to start it manually using react-native start.
Now let’s see how to create a simple signup page using Node.Js
Following code set, is to create a simple sign up page having components email, username and password text inputs and a button (and perhaps a title to make everything look professional).
Before that we need to import all necessary components in React Native. The below code is required for the process:
Register.js
————
import React, {Component, PropTypes} from ‘react’;
import {
View, Text, Image, StyleSheet, ActivityIndicator
} from ‘react-native’;
import Environment from ‘./environment’;
import {Input, Button, Logo, Heading} from ‘../components’;
import Icon from ‘react-native-vector-icons/FontAwesome’;
import {Actions} from ‘react-native-router-flux’;
export default class Register extends Component {
state = {
username: ”,
email: ”,
password: ”,
loading: false,
message: ”
}
handleRegister() {
this.setState({ loading: true, message: ” });
var params = {
login_name: this.state.username,
email: this.state.username,
password: this.state.password
};
var formBody = [];
for (var property in params) {
var encodedKey = encodeURIComponent(property);
var encodedValue = encodeURIComponent(params[property]);
formBody.push(encodedKey + “=” + encodedValue);
}
formBody = formBody.join(“&”);
var proceed = false;
fetch(Environment.CLIENT_REGISTER_API, {
method: “POST”,
headers: {
‘Content-Type’: ‘application/x-www-form-urlencoded’,
‘device_id’:’1234′,
‘device_type’:’android’,
},
body: formBody
})
.then((response) => response.json())
.then((responseData) => {
console.log(responseData);
if(responseData.data.length===0) {
this.setState({ message: responseData.error})
this.setState({ loading: false });
}
else {
Actions.profile();
}
})
.done();
}
render() {
return
{‘Sign up’}
<Input label=”Username”
icon={}
value={this.state.username}
onChange={this.handleChangeInput.bind(this, ‘username’)}
/>
<Input label=”Email”
icon={}
value={this.state.email}
marginTop={23}
onChange={this.handleChangeInput.bind(this, ’email’)}
/>
<Input label=”Password”
icon={}
value={this.state.password}
marginTop={23}
onChange={this.handleChangeInput.bind(this, ‘password’)}
secureTextEntry
/>
{!!this.state.message && (
{this.state.message}
)}
{this.state.loading && }
}
}
const registerStyle = StyleSheet.create({
registerContainer: {
flex: 1,
backgroundColor: ‘transparent’,
paddingTop: getPlatformValue(‘android’, 10, 30),
},
formContainer: {
flex: 1,
paddingLeft: 15,
paddingRight: 15,
marginTop: getPlatformValue(‘android’, 5, 34)
//backgroundColor: ‘#ffffff’
},
activityIndicator: {
justifyContent: ‘center’,
alignItems: ‘center’,
height: 25
}
})
- Basic styles are defined in the Register.js itself.
- Button ‘Create’ calls handleRegister method, where we do the registration process by using API. If successfully registered the page is redirected to Profile page.
- React-native-router-flux is used for react native routing using FontAwesome icons.
- The ActivityIndicator is used to indicate the loading action.
- API links are saved in environment.js
environment.js
module.exports = {
CLIENT_REGISTER_API: ‘Your register API url here’
};
- We can provide router information in the render method of App.js as follows:
- After editing the code, open the Expo App from your device. After the packager is ready from the Expo XDE, use “share” or “device” buttons to view the changes.
- Enable ‘Hot Loading’ from device for fast editing & debugging. Hot loading keeps the app running and allows us to inject new versions of the files that you edited at run-time. This way, you don’t lose any of your state which is especially useful if you are tweaking the UI.
- Now use the “Share” or “Device” buttons to view your project
2)Mobile App Development using Expo XDE
Expo is a set of tools, libraries and services which let you build native iOS and Android apps by writing JavaScript. Expo XDE is a development environment, can be used to create mobile applications.
An Expo project is a React Native project. Expo XDE can be used to create mobile applications in a matter of minutes. For Expo Application, we have command line and Expo XDE tools. The following is the process:
1)Run Command Lines:
Following are the command line codes
- npm install exp –global
- exp init your-project-name
- cd your-project-name
- exp start
2)Run the Code:
Once the app has started, the next step in the process is to run the code: exp build:android or exp build:ios android and iOS respectively.
Since this caters to both android and iOS and you choose to build for iOS, provide Apple ID, password and Apple Team ID as required.
3)Finish Building
After the above process wait for it to finish building. The process may take a few minutes and you can check up on it by running exp build:status. When it’s done, you’ll see the url of a .apk for the Android or .ipa (iOS) file for apple devices and this is your app.
How to Use Expo XDE for Development?
The process flow for development with Expo XDE is as follows.
a)Install Expo XDE
We should have Expo XDE installed on our development machine and the Expo client on an iOS or Android physical device or emulator.
b)Account Creation:
Upon opening XDE you will be prompted for a username and password. Fill this in with your desired username and password and hit continue “” if the username isn’t already taken, then we will automatically create the account for you.
c)Project Creation
Press Project and select New Project, then choose the Tab Navigation option since that will give us a good starting point, then enter the name of your project in the dialog that pops up. Give name for your project, and press create.
XDE is now initializing a new project in selected directory: it copies a basic template and installs react, react-native and expo.
You’ll see that XDE shows you a URL like http://4v-9wa.notbrent.mynewproject.exp.direct:80- feel free to open this up in your browser, you will see that it serves up some JSON. This JSON is the Expo manifest. We can open our app by opening the Expo app on our phone typing this URL into the address bar. Alternatively, press Share, enter your phone number, and press Send Link. Open the message on your phone and tap on the link to open it in Expo. You can share this link with anybody else who has the Expo app installed, but it will only be available if you have the project open in XDE.
Use Cases of ReactJs and React Native:
- Bloomberg
Bloomberg, the online magazine chose React Native for developing its mobile app and have mentioned in their post on the Tech at Bloomberg that “the first tool that truly delivers on the promise of cross-platform native app development.”
- Airbnb
Due to the simplicity in code refactoring, the iteration, the reusability of the component, Airbnb opted to switch to React Js and uses it for both web Instagram apps and mobile.
To enable web visitors to access the social platform, they built a web site, a one-page app. Since the web app could be optimized and seemed comfortable and quick for the users it was used for both web Instagram apps and mobile.
- Netflix
In combination with Gibbon, a rendering layer, Netflix adopted ReactJs. In 2015, Netflix chose React due to its one-way-ticket model of declarative approach to programming and data flow.
Parting Thoughts
React Native requires Bridge components to be written for each platform to use them. It brings it back closer to a hybrid framework. But in the case of React Native, you needn’t be anxious about the platform specific behaviors in providing the most seamless experience for your users. With Native development, developer will be working with his familiar tools like classic HTML and CSS. But in the case of React Native, knowledge on styling and creating user interfaces using their own HTML-like components is necessary.
