React Native – The Future of Mobile

React Native – The Future of Mobile

What is React Native and its future in the mobile app development? Using React Native, you can build mobile apps that are indistinguishable ....

What is React Native and its future in the mobile app development? Using React Native, you can build mobile apps that are indistinguishable ....

Are you looking to build a mobile application and debating which technology to pick? React Native is one of the most popular mobile framework and thousands of apps are already built using React Native. Big companies like Facebook, Uber, Instagram, Tesla, and many more are using React Native to build their cross-platform mobile apps.

Small startups also are leveraging React Native. I have been working on React Native for the past two years and have used it to build various applications.

Let me give you a brief overview of what it is, and some of the most appealing aspects of React Native.

Below is a snapshot of the most liked aspects of React Native, from the recent State of JavaScript survey of 2018. This gives you a quick overview of all the good things in React Native.

https://2018.stateofjs.com/mobile-and-desktop/react-native/#likes
Written in JavaScript

When I started writing my first React Native app, I did not have any previous mobile development experience. I knew JavaScript, and that was all I needed to get started. The good thing about React Native is that web developers can leverage their knowledge in JavaScript to write mobile application.

This is one of the most liked aspects of React Native. It attracts a lot of web developers into the space of mobile development.

Uses React

The other impressive aspect of React Native is that the underlying framework is React. React Native is uses React and create native mobile applications. Those of you in the web development world are aware of the huge popularity that React has attained over the years.

React Native uses the same concepts as React and wraps the components around native mobile components instead of the web components. If you are a React developer, then learning React Native shouldn’t take you more than a couple weeks.

Builds Native Cross Platform Apps

Unlike other frameworks that build web view, React Native is used to build truly native mobile apps. With React Native the underlying widgets are all native components, therefore giving the user a superior experience. This is another feather in the cap of React Native.

What strikes me the most is that you are coding in JavaScript and React to build a native mobile app. This is one of the reasons that apps built using React Native has a superior user experience in comparison to many other frameworks.

Code Once for both iOS and Android

For small companies and smaller teams this is a huge benefit. You do not have to maintain multiple code-bases for both iOS and Android. You don’t need to know Objective-C, Swift or Java. Instead you can use JavaScript and React to build cross platforms native apps.

From my experience about 95% of the code is shared between iOS and Android. This is great, because you don’t have to maintain multiple code bases, multiple teams and multiple knowledge sources. Instead you have one team and one code base to tackle both platforms.

This is a huge win for small companies, since it can save them tons of money in terms of team size, and development time.

With this the development, testing and debugging turnaround time is much shorter when compared to native development.

Backed by Facebook

When a choosing a tech stack, it is good to evaluate the backers of the technology. React Native is backed by Facebook just like React. Being backed by a huge corporate like Facebook, builds trust in the community. React Native is completely open-sourced and anyone the community can contribute to it. But the core contributors are from Facebook and the company is heavily invested in this technology. They have also built many of their products using React Native which shows their confidence in this framework.

Great Developer Experience

Photo by rawpixel on Unsplash

Overall, the developer experience with React Native has been amazing. With features and tools like Hot Reloading, React Native Debugger, Over the Air updates, React Native has set itself apart from other frameworks. The developer velocity is quite high, and you don’t have to waste time on monotonous tasks after leveraging the great tooling options.

The last two years of React Native development has been great for me and I would highly recommend this framework to developers who are interested in mobile development.

What needs to improve in React Native?

Now, everything can’t be perfect about a framework. Just like any other framework, React Native has its problems too. Here are some areas of trouble and the team is continuously working towards making it better for the community.

Let’s see what the State of JavaScript 2018 survey results are for the most disliked aspects of the framework.

https://2018.stateofjs.com/mobile-and-desktop/react-native/#dislikes

Errors

Due to support to cross-platform capabilities, React Native developers may run into errors and bugs unrelated to their code. Most of these are errors from XCode compatibility, MacOS compatibility, Gradle/Android Studio issues, etc. Nevertheless, the developers are thrown off when they see errors that they do not understand.

I personally wouldn’t call these error-prone code, but I see these as compatibility issues. Most of the errors that I have seen are not on the code level but related to compatibility with several ecosystems that are needed to support cross-platform capabilities.

The React Native team is actively working towards making this better, and I am sure some of these issues will be a topic of the past very quickly.

Fast Changing

Upgrading the project has not been fun at times. This is one of my biggest complaint. Obviously things are much better today, than it was a year ago. The last few upgrades have been quite smooth for me. With a young framework like React Native, the pace is fast, and hard to catch up with sometimes. My recommendation to teams that are using React Native is to keep the project updated with the latest React Native version at all times. Do not wait for several months to upgrade your project, because things would have changed a lot with a span of few months.

Things will slow down a bit in a year or so, once React Native is considered a more mature framework.

Future of React Native

https://2018.stateofjs.com/mobile-and-desktop/react-native/

Overall, React Native is hot and trending. It has been adopted widely across several companies for the mobile development. Although there are some pain points, people still like it and are using it widely. I hope the framework keeps up with the momentum and gets better by the day.

If you are a team of JavaScript developers hoping to build a mobile app, React Native is the best bet for you. If you are a company with a smaller team and have to ship mobile apps cross-platform, React Native is definitely your right choice.

Are you are interested in learning React Native? You need to learn React first before diving into React Native.

I hope you enjoyed this article. Watch this space for more interesting tech articles and share it with your friends and team.

React Native Tutorial - Build Android and iOS App from Scratch

React Native Tutorial - Build Android and iOS App from Scratch

React Native Tutorial - Build Android and iOS App from Scratch. Getting started tutorial on building an Android and iOS app from scratch using React Native. React Native is a modern Javascript framework backed by Facebook that use to make Mobile Apps (Android/iOS) development easier for Javascript developer. In other words, React Native is React.js mobile apps development version.

A comprehensive step by step tutorial on building Android and iOS app from scratch using React Native

A comprehensive getting started tutorial on building an Android and iOS app from scratch using React Native. React Native is a modern Javascript framework backed by Facebook that use to make Mobile Apps (Android/iOS) development easier for Javascript developer. In other words, React Native is React.js mobile apps development version. For more information about React Native definition, features, etc, you can find in their official documentation.

Shortcut to the steps:

  • Install React App Creator and Create A React Native App
  • Add Navigation Header and Home Screen
  • Load World Cup 2018 Data from API
  • Display List of World Cup Matchdays
  • Display World Cup 2018 Matchdays Details
  • Run the React Native World Cup 2018 App

In this React Native tutorial, we are creating an app that listing the World Cup 2018 matches using the free open public domain football data for the world cups in the JSON format.

The following tools, frameworks, and modules are required for this tutorial:

  • React Native
  • Node.js (NPM or Yarn)
  • Worldcup JSON data
  • Android Studio or SDK for Android
  • XCode for iOS
  • Terminal (OSX/Linux) or Command Line (Windows)
  • Text Editor or IDE (We are using Atom)

Before start to the main steps, make sure that you have installed Node.js and can run npm in the terminal or command line. To check existing or installed Node.js environment open the terminal/command line then type this command.

node -v
v8.11.1
npm -v
6.1.0
yarn -v
1.7.0

That's the Node and NPM or YARN version that we are using. In this tutorial, we will use Yarn commonly.

Install React App Creator and Create A React Native App

The Create React Native App is a tool for creating a React Native App. To install it, type this command in your App projects folder.

sudo npm install -g create-react-native-app

Then create a React Native App using this command.

create-react-native-app reactWorldCupApp

That command will create a React Native app then install all required modules. The app or project folder will contain these folders and files.

Next, go to the newly created React App folder.

cd reactWorldCupApp

This React Native App is running via Expo app, before running on your Android or iOS device, make sure you have to install the Expo App to Android or Expo Client to iOS. Of course, that app is available in the App Store. So, we assume that you have installed the Expo App in your device then type this command to run the app.

npm start

or

yarn start

You will see this barcode and instruction in the terminal or command line.

To open the app in the Android device, open the Expo App first then tap on Scan QR Code button. Scan the barcode in the terminal or command line then you will see the React Native Android App like this after waiting for minutes the build process.

For iOS Device, press s from the keyboard to send React Native App URL to your Email or SMS. Enter your phone number or Email address (We use an email address) then press Enter. You will get this email to your mailbox.

Choose open in Expo URL then open in your browser, that will be redirected to Expo App. In Expo App welcome screen, shake your phone to open the React Native App. Now, you will see this screen in your iOS device.

This step for development purpose, we will show you how to build for production at the end of this article.

Add Navigation Header and Home Screen

Above generated React Native App just show blank app with plain text. Now, we will show you how to add the Navigation Header and Home Screen for your app. So, it will look like the Native App. In the terminal or command line type this command to install React Navigation (react-navigation) module.

yarn add react-navigation

Next, create a folder for components and React Native components files in the root of the app folder.

mkdir components
touch components/HomeScreen.js
touch components/DetailsScreen.js

Open and edit components/HomeScreen.js then add this React Native codes.

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

class HomeScreen extends Component {
  static navigationOptions = {
    title: 'Home',
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Home Screen</Text>
        <Button
          title="Go to Details"
          onPress={() => this.props.navigation.navigate('Details')}
        />
      </View>
    );
  }
}

export default HomeScreen;

Open and edit components/DetailsScreen.js then add this React Native codes.

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

class DetailsScreen extends Component {
  static navigationOptions = {
    title: 'Details',
  };
  render() {
    return (
      <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
        <Text>Details Screen</Text>
        <Button
          title="Go to Details... again"
          onPress={() => this.props.navigation.push('Details')}
        />
        <Button
          title="Go to Home"
          onPress={() => this.props.navigation.navigate('Home')}
        />
        <Button
          title="Go back"
          onPress={() => this.props.navigation.goBack()}
        />
      </View>
    );
  }
}

export default DetailsScreen;

Next, open and edit App.js then add replace all codes with this.

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { createStackNavigator } from 'react-navigation';
import HomeScreen from './components/HomeScreen';
import DetailsScreen from './components/DetailsScreen';

const RootStack = createStackNavigator(
  {
    Home: HomeScreen,
    Details: DetailsScreen,
  },
  {
    initialRouteName: 'Home',
    navigationOptions: {
      headerStyle: {
        backgroundColor: '#f4511e',
      },
      headerTintColor: '#fff',
      headerTitleStyle: {
        fontWeight: 'bold',
      },
    },
  },
);

export default class App extends React.Component {
  render() {
    return <RootStack />;
  }
}

When the files are saved, the Expo app will refresh the React Native App automatically. Now, the app will look like this.

Load World Cup 2018 Data from API

To load World Cup 2018 data from API, open and edit components/HomeScreen.js then add constructor function before rendering function.

constructor(props){
  super(props);
  this.state ={ isLoading: true}
}

Add function for load API JSON data which the JSON response set to the dataSource.

componentDidMount(){
  return fetch('https://raw.githubusercontent.com/openfootball/world-cup.json/master/2018/worldcup.json')
    .then((response) => response.json())
    .then((responseJson) => {
      // console.log(responseJson);
      this.setState({
        isLoading: false,
        dataSource: responseJson.rounds,
      }, function(){

      });

    })
    .catch((error) =>{
      console.error(error);
    });
}

The response from API holds by dataSource variable that will use in the view in the next step.

Display List of World Cup Matchdays

We will use the List and ListItem component of React Native Elements (react-native-elements) module. First, install react-native-elements using this command.

yarn add react-native-elements

Open and edit again components/HomeScreen.js then replace all imports with these imports of React, Component (react), StyleSheet, ScrollView, ActivityIndicator, Text, View (react-native), List, and ListItem (react-native-elements).

import React, { Component } from 'react';
import { StyleSheet, ScrollView, ActivityIndicator, Text, View  } from 'react-native';
import { List, ListItem } from 'react-native-elements';

Next, replace all render function with this React Native rendered template which the ActivityIndicator load only if the state status is loading. The list that gets from the data source displaying to the ListItem after mapping the array of the data source.

render() {
  if(this.state.isLoading){
    return(
      <View style={styles.activity}>
        <ActivityIndicator/>
      </View>
    )
  }

  return(
    <ScrollView style={styles.container}>
      <List>
        {
          this.state.dataSource.map((item, i) => (
            <ListItem
              key={i}
              title={item.name}
              leftIcon={{name: 'soccer-ball-o', type: 'font-awesome'}}
              onPress={() => {
                this.props.navigation.navigate('Details', {
                  matches: `${JSON.stringify(item.matches)}`,
                });
              }}
            />
          ))
        }
      </List>
    </ScrollView>
  );
}

Add style const before the export code.

const styles = StyleSheet.create({
  container: {
   flex: 1,
   paddingBottom: 22
  },
  item: {
    padding: 10,
    fontSize: 18,
    height: 44,
  },
  activity: {
    flex: 1,
    padding: 20,
  }
})
Display World Cup 2018 Matchdays Details

We will display World Cup 2018 Matchdays Details in the DetailsScreen. Open and edit components/DetailsScreen.js then replace all imports with this.

import React, { Component } from 'react';
import { StyleSheet, ScrollView, View } from 'react-native';
import { List, ListItem, Text, Card } from 'react-native-elements';

Next, replace all render function with these lines codes.

render() {
  const { navigation } = this.props;
  const matches = JSON.parse(navigation.getParam('matches', 'No matches found'));
  console.log(matches);

  return (
    <ScrollView>
      <Card style={styles.container}>
        {
          matches.map((item, key) => (
            <View key={key} style={styles.subContainer}>
              if(item.group) {
                <View>
                  <Text h3>{item.group}</Text>
                </View>
              }
              <View>
                <Text h3>{item.team1.name} vs {item.team2.name}</Text>
              </View>
              <View>
                <Text h5>{item.date}</Text>
              </View>
              <View>
                <Text h4>{item.score1} - {item.score2}</Text>
              </View>
              if(item.goals1.length > 0) {
                item.goals1.map((item2, key2) => (
                  <View key={key2}>
                    <Text h4>{item2.name} ({item2.minute})</Text>
                  </View>
                ))
              }
              if(item.goals2.length > 0) {
                item.goals2.map((item3, key3) => (
                  <View key={key3}>
                    <Text h5>{item3.name} ({item3.minute})</Text>
                  </View>
                ))
              }
            </View>
          ))
        }
      </Card>
    </ScrollView>
  );
}

Add StyleSheet const before the export code.

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20
  },
  subContainer: {
    flex: 1,
    paddingBottom: 20,
    borderBottomWidth: 2,
    borderBottomColor: '#CCCCCC',
  }
})
Run the React Native World Cup 2018 App

To run the application in Expo App, you can find in step 1 of this article. If there's no error found, you will see the result like this.


Next, to run or build as the Native App, type this command to install React Native CLI first.

sudo npm install -g react-native-cli

Next, eject the project from the Create React Native App by type this command.

npm run eject

You will get questions like below, make it the same with the one that we choose.

? How would you like to eject from create-react-native-app? React Native: I'd like a regular React Native project.
We have a couple of questions to ask you about how you'd like to name your app:
? What should your app appear as on a user's home screen? React World Cup
? What should your Android Studio and Xcode projects be called? ReactWorldCupApp

Next, to run the Native iOS or Android App in the Simulator, type this command.

react-native run-ios
react-native run-android

That it's for now. Any suggestions are open for next React Native tutorial. You can find the full working source code in our GitHub.

Build an iOS and Android App using React Native

Build an iOS and Android App using React Native

A comprehensive step by step tutorial on building Android and iOS App from scratch using React Native. Build an iOS and Android app in 15 minutes using React Native. Create native apps for Android and iOS using React. React Native combines the best parts of native development with React, a best-in-class JavaScript library for building user interfaces.

Build an iOS and Android app in 15 minutes using React Native

A comprehensive step by step tutorial on building Android and iOS App from scratch using React Native.

The Difference Between iOS And Android App Development Using React Native

In this <a href="https://www.cmarix.com/the-difference-between-ios-and-android-app-development-using-react-native/?utm_source=SB" target="_blank">blog</a>, learn how the in-app features from design elements to testing tools, React Native development for iOS and Android mobile app platforms offer several key differences that developers need to know about.

In this blog, learn how the in-app features from design elements to testing tools, React Native development for iOS and Android mobile app platforms offer several key differences that developers need to know about.