Employee Directory: Sample Application with React Native and Node.js

Over the past few years, I’ve built many versions of the Employee Directory application as a way to explore new languages and frameworks. In this post I’ll share a version of the Employee Directory sample app built with React Native.

React Native is a framework for building native mobile applications using JavaScript. It uses the same programming model as React, with one key difference: instead of rendering DOM elements in a browser window, a React Native application renders native components in your mobile platform UI system (i.e. UIKit on iOS). In other words:

• In React, you render your components using React components like <div> and <ul> which are wrappers around DOM elements.
• In React Native, you render your components using React Native components like <View> and <ListView> which are wrappers around native components.

The Sample Application

The Employee Directory application allows you to search for employees by name, view the details of an employee, call, text, or email an employee, and navigate up and down the org chart.

Watch the Video:

Highlights:

Employee Directory uses the following React Native features:

• Page navigation using Navigator and NavigationBar
• List management using ListView
• Styles using StyleSheet
• Other components such as <View>, <Image>, <TextInput>, <TouchableOpacity>, <TouchableHighlight>, etc.
• The Fetch API to load resources from a remote URL

Installing the Application

1. Follow the React Native getting started instructions to install React Native. Make sure you select your Mobile OS and Development OS, for the right instructions. The instructions below assume ios.
2. Create a new React Native app named EmployeeDirectory:

   react-native init EmployeeDirectory
   cd EmployeeDirectory
   react-native run-ios
   

3. Clone the sample app repository:

   git clone https://github.com/ccoenraets/employee-directory-react-native
   

4. Copy the app folder from employee-directory-react-native into your EmployeeDirectory project folder
5. Open index.ios.js. Delete the existing content and replace it with:

   import {AppRegistry} from 'react-native';
   
   import EmployeeDirectoryApp from './app/EmployeeDirectoryApp';
   
   AppRegistry.registerComponent('EmployeeDirectory', () => EmployeeDirectoryApp);
   

6. Hit Cmd + R to refresh the app in the emulator

Mock and REST Services

The app comes with two interchangeable implementations of the data service:

• The Mock service implementation (employee-service-mock.js) uses in-memory data and is used for prototyping or testing purpose.
• The REST service implementation (employee-service-rest.js) uses fetch to access Node.js-based REST services hosted on Heroku. You can find the source code for the Nodes.js services in this GitHub repository.

The application uses the mock service by default. To use the REST service instead, open EmployeeList.js and EmployeeDetails.js, and replace:

import * as employeeService from './services/employee-service-mock';

with:

import * as employeeService from './services/employee-service-rest';

Source Code

The source code for the React Native application is available in this GitHub repository.
The source code for the REST services is available in this GitHub repository.

Additional Resources

If you are new to React or ECMAScript 6, check out my React and ECMAScript 6 tutorials:

• ECMAScript 6 tutorial
• ECMAScript 6 Data Access tutorial
• ECMAScript 6 React tutorial

And/or check out my React sample apps:

• Real Estate Application built with React
• Belgian Beer Explorer built with React (hosted live here)
• Trivia application built with React (hosted live here)