What you need to know about React-Native as you navigate its waters
React-native is a framework for building mobile apps that run on native devices(iOS and Android) using React(Native) and Javascript. For your information, react is a javascript library, not a framework. React-native uses the same design as React, letting you compose a rich mobile user interface from declarative components. With React Native, you don’t build a “mobile web app”, an “HTML5 app”, or a “hybrid app” but rather a native app.
Environment setup
The following are the things you need to install to set up the environment for react-native.
- Node.js, a runtime environment for javascript. Not because we are going to write any Node.js code but because it is distributed with NPM, a package manager you need to install packages. Additionally, it provides a development server that allows you to live update the app while it is running on a simulator or live device.
- Expo CLI or React-native CLI to help you create a react-native app. The choice between which tool to use to create your app depends on your requirements for development. This video by Ben Awad gives a detailed list of the pros and cons of both tools to help you decide on which approach to take. Something to note is that react-native CLI will require Xcode (for people using Mac OS)and Android studio installed before getting started while Expo CLI allows you to start a project without installing and configuring Xcode or Android studio. It is also important to note that you need to configure the
ANDROID_HOME environment variableas you are setting up your development environment. You can visit the react-native docs for a detailed guide on how to do this.
Below are the commands to create a react-native app using expo CLI and react-native CLI respectively
$ expo init projectName //Expo-CLI
$ react-native init projectName . //React-Native CLITesting or running react-native app
Run the commands below inside your react-native project folder to start it locally.
$ react-native run-ios //for iOS
$ react-native run-android //for android
ORnpm start //if you are using expo-cli
enter a for android or i for iOS
- Run the app on iOS or Android phone
Expo client apps make it easy to run your React Native app on a physical device. Install Expo client apps on iOS or Android phone and start your application locally. On Android, use the Expo app to scan the QR code from your terminal to open your project. On iOS, follow on-screen instructions to get a link.
- Run app on a simulator
Open Android studio and configure AVD(Android Virtual Device) manager to add the different virtual devices you want to test your app on. Launch your application on an Android simulator by using the commands above to start the application.
Styling
In react-native, applications are styled using javascript. All components accept a prop called style. Style names and values usually match CSS except names are written in camel case e.g fontSize rather than font-size
StyleSheet component allows you to write style sheets understood by react-native by creating objects that can be assigned to the style property of elements and where you can point to properties of your style object
React Native uses Flexbox to position elements and create layouts.
State management
State works the same way as it works in React. The state is used to handle data that changes. You can use state containers or libraries like Redux or MobX to manage the entire application state just like in React.
Every react-native element has its own set of properties & events(onPress, onTouch) that could trigger a change in state.
Debugging
Finding and fixing errors in your react-native application can be done using the following In-App developer tools or standalone applications.
In-App developer tools
Below are some of the noteworthy In-App developer tools you can use to identify bugs.
- In-app errors(displayed with a red background) and warnings(displayed with a yellow background) displayed inside the app while in development builds.
- Element inspector. You can access the Toggle element inspector in the simulator by using
Command + Don iOs andCommand + Mon Android to access the different in-app debugging tools of the developer menu. Command translates to Ctrl on a windows operating system. These tools can help you inspect CSS eg colour and padding, Performance, Network connections and requests, Touchables.
Debug JS code remotely.
Once this option is selected, the react-native application is opened on http://127.0.0.1:19001/debugger-ui/ in google chrome and the following debugging tools are supported for React-native
- Console.log() to display JavaScript values in the debugger window
- React Dev tools to inspect the React component hierarchy, their props, and state.
- Breakpoints. You can set breakpoints in your code. At each breakpoint, JavaScript will stop executing, and let you examine JavaScript values.
React Native Debugger
Install it as a stand-alone version to get advanced debugging capabilities eg accessing elements and state of components
Navigation between screens
Managing the transitioning between multiple screens is handled by a navigator using any of these 2 libraries
- React-navigation. This provides an easy to use navigation with the ability to present common stacked and tabbed navigation patterns on both Android and iOS. You just install react-navigation and react-native-gesture-handler, link your react-native to react-native-gesture-handler and add screens to your app.
- React-native-navigation. This allows you to achieve a native look and feel on both Android and iOS.
Linking third-party libraries
React native has a small core library and depends heavily on third-party libraries to fill in major functionality aspects such as camera, maps.
To use such libraries, you need to install/download the react-native library and link the library dependencies to your app project. This can be done automatically using this command below or manually depending on your requirements
$ react-native linkMaking HTTP requests/ Networking
To load or post resources from a remote server, one can use one of the following options
- FETCH API provided by react-native. Fetch API provides the capability to make requests to a remote server by simply passing the URL to fetch eg fetch(‘https://api/v1/data.json’), specify additional headers, or change the request method, handle the Promise returned by the fetch and catch errors
- Networking libraries like Frisbee and Axios
- Websockets
Publishing the app
Publishing Android applications
Publishing your android application makes it available to users. This requires two main tasks namely:
- Preparing the application for release
This requires one to build a release version of the application that users can download and install on their Android-powered devices.
Configure the app for release by removing all logs, android debuggable attributes, providing values for the android version and version name.
Build and sign a release version of the application, thoroughly test the release version on different devices before distribution, check if all application resources such as graphics, image files are included in your application and finally prepare all remote servers and services your application depends on.
- Releasing the application to users
In this step, you publicise, sell and distribute the application to users. There are several ways to release the application. These include realising the application through an app marketplace such as Google play store and Galaxy store, website, or by directly sending the application APK to users.
Publishing Android to Google play store requires that all apps be digitally signed with a certificate before they can be installed. In order to distribute your Android application via the Google Play store, it needs to be signed with a release key that would be used for all future updates.
Publishing iOS applications to App store
You need a paid apple developer account. This comes at a fee of $99 a year. You also need to create an iTunes connect account to enable you to submit and better manage the application. Before submitting your app, review it to ensure it conforms to Apple’s requirements and guidelines in terms of security, performance, business, design and law.
Configure the app for distribution by providing the following information in iTunes connect.
- An icon to represent distinguish your app from the other apps
- Screenshots and app previews to visually communicate the user experience
- Metadata. This should be a detailed description of your app name, version number, app category and any additional keywords
Once all the necessary information has been provided, upload the app using Xcode and submit it to the store for review by the Apple team before release.
References
