What is React Native?
React Native A set is a set of many libraries. It gives access to the corresponding native. This means appeals designed with the technology will have passage to native platform underlines like camera, user place, etc.
Benefits of React Native
React Native application development advantages
- Code Reusability
- Hot Reloading
- Modular Architecture
- Huge Community Support
- Easily Customizable
- Live Reloading
- Pre-built Components
- Faster Time to Market
React Native decreases coding accomplishments, encourages faster testing & bug fixing, therefore speeding up the development method by 30%. You can hire react native developers for the next app development project.
React Native Demo Application Tutorial
So, finally, let’s create a mobile app with react native. This app will help users browse through a list of employees and see details about them. Moreover, this app allows users to search for an employee by name.
Initially, we will install React Native on our computer system. You can skip these steps if you already have react-native on your system. Now, follow the steps mentioned below:
- First, we need to install Homebrew.
- Once Homebrew is installed, install Node.js by typing following in the Terminal.
- Now, we need to install watchman. Watchman is a Facebook creation to watch files. React Native uses it to recognize code changes in app files just to rebuild the code.
- After this, install React Native CLI with the help of npm- node package manager.
- From Terminal, navigate to your working folder and initiate the project by running the following command:
CLI will create the structure of the project. And if we talk about the starter react native app, it is in index.ios.js for iOS and index.andoid.js for android. Once you create an application, just open Employee.xcodeproj and run the application.
Once this build process is complete, it will take you to the following screen in the simulator:
This welcome screen hints us on how to open developer tools and how to reload this app. You can easily open this app by pressing command + control + z and reloading this app by command + R.
Developing Our App
Let’s start. It will be a simple employee listing app with extra search functionality. We will try to emphasize learning the logic rather than styling the components.
Application structure is something as shown in the following image:
To make it easy, we will mock the entire data that we need for our app in API folder.
Containers and components folders separate application building parts (components). The concept is simple: separating presentational and stateful application components makes reusability considerably easier and promotes separation of concerns.
The presentational components in the components folder are all included. They have an impact on how things appear. Data flow and modifications are handled by components in the containers folder.
Now, just open index.ios.js and add the following:
AppRegistry defines the entry point to the app and gives you the root component. Now, we will test app.js container.
This app will show a tab bar with two items: Employees and Search. To add this functionality, we will use a specific react native component named as TabBarIOS. Moreover, we need to create a TabBarIOS.item component and pass as children our custom component that handles tab route (EmployeesTab and SearchTab components).
Now, pass methods like _employeesOnPress and _searchOnPress as onPress handlers to the corresponding components and they are responsible for handling the state for selected tab.
Adding Tab Components
Let’s create EmployeesTab and SearchTab components. They are quite like each other and wrap the NavigatorIOS component that makes the routes for the tabs.
Employees List View
We will create a ListView with all the employees available in the Employees container component. We load the data and set up the dataSource for the ListView on the componentDidMount lifecycle hook, which is called when a component is loaded/mounted onto the UI view. The data is then passed to the EmployeesList presentational component, which is in charge of rendering the ListView, via props.
We use the ReactNative ListView component and pass the *dataSource* and *renderRow* functions. *renderRow* is in charge of the appearance and behaviour of List item rows. We’re using the TouchableHighlight component, which is a wrapper for making views respond to touches properly.
When a row is pressed, the _rowOnPress event is fired, and the opacity of the View is reduced, allowing the underlying color to show through and darkening or tinting the View. In addition, the navigator object receives a new route with (EmployeeDetails) props.
Now, we will work on the search tab so that users can search for employees by name. Create a Search.js container component. Whenever a user types in the search box, it means we are querying the API. In this case, return data is displayed automatically. Please note that we are using EmployeesList component to display results, which is a great example of react native components reusability.
Finished App Screens
In this tutorial, you learned about creating an app that enables users to search employees by their name. In case you are planning to create an app for your business, you can contact several react native mobile app development companies in the market.