What is React Native
The key difference between React Native and other JS mobile frameworks such as Ionic or Cordova is that the result is a hybrid native application rather than a hybrid web application utilizing web views. React Native does still use a JS engine to execute your application code; but compiles your views into native code and uses a bridge to communicate between threads. As such, it will look and feel like any other native application and benefit from both great performance and access to device APIs.
Why would you use React Native
React Native allows you to target both iOS and Android platforms with cross-platform code utilizing the technologies and patterns your web development team are likely familiar with already. Creating a screen is as simple as writing a react component that accepts props and uses react-native specific tags such as
<View>. Developers can use packages such as Redux to store application state and CSS Flexbox to layout content.
React Native uses native UI elements to enable delivering a native user experience, something that hybrid web frameworks struggle to achieve. This is particularly evident with animations and form inputs.
Because React Native allows a vast amount of code sharing between web, iOS and Android platforms the amount of code and resources required to develop cross platform should decrease. More importantly you will not necessarily need specific mobile application developers as your developers will be able to work on all target devices with the same familiar web technologies.
Getting started with React Native
The quickest and easiest way to get started with React Native is via the expo cli. Expo is a toolchain built around React Native allowing you to get started quickly without needing to set up Xcode or Android studio. allows you to get up and running in minutes and provides access to a large number of device APIs and useful packages to build an application. To do so, simply run:
npm install -g expo-cli expo init my-expo-app # make project choices cd my-expo-app && npm start
This will install the Expo cli, initialize a project and start the development server. All you need to do now is make changes in your favorite IDE and see them reflected on your simulator or mobile device. The main drawback of using expo is that you are not able to use any custom native modules which are not provided by the expo client app.
Using react-native cli
Assuming you already have Xcode and/or Android studio installed, you can create an initial React Native application by running:
npx react-native init my-cli-app Cd my-cli-app && npx react-native run-iOS
If you do not already have cocoa pods and watchman installed you get prompted to do so. Once you’re up and running, you should have a similar setup as with the expo approach though you will be able to open up the Xcode project in order to work with custom native modules and to build and release your application.
Using TypeScript with React Native
But what about TypeScript? You may have noticed during your set up with the expo cli that there’s an option provided for TypeScript in the initialization wizard. Simply select TypeScript and you get a TypeScript React Native project set up and ready to go.
If you are using the react-native cli then there is a specific TypeScript template that you can use to get up and running:
npx react-native init my-ts-app --template react-native-template-typescript
Building and releasing your app
If you have used Expo to build your application, then you are able to use the expo build tool to build and package both your iOS/iPadOS and Android apps. This is pretty straightforward and uses a cloud-based build platform to create your application binaries. You can then upload these binaries to the appropriate app stores or send links to your testers for testing via TestFlight, etc.
If you have used the React Native cli or ejected from expo then you will need to use Xcode and Android studio to perform your application builds before uploading them to their respective app stores.
Performing the release itself, as with any native app, can get rather tedious as you will need to create screenshots, perform code signing, and more. Luckily you can use fastlane to automate most of this process. Fastlane allows you to set up specific rules for beta or app store releases and automates testing, screenshot generation, code signing and even uploading your app to the app store for review.
If you’re not using expo then OTA updates are still available via a service such as Microsoft App-Center codepush, but this requires additional setup and configuration.
When You Shouldn’t Use React Native
React native is a great solution if you’re looking to get into native mobile development and wish to utilize your team’s existing React and web development skills. The limits of this approach will largely depend on your needs; if you want to use advanced device hardware interaction you may find that there is not a suitable package or API available to achieve this and thus you will have to write a custom native module to use with your app. With that in mind, you may still need to write some Objective-C and Java code to achieve your goals.
React Native significantly reduces the amount of code you need to write to serve iOS/iPadOS and Android apps but in some cases you may find you need to write specific code for either environment due to differences in native components. For example, when creating a select / picker, the appearance will differ between iOS/iPadOS and Android as the former renders a scrolling wheel whilst the latter generates a drop down menu. These kinds of differences will require custom logic to render and behave correctly based on your needs and will draw on the knowledge and skill of your development team.
Now that you’ve gotten started, you’ll want to continue building out your application with architectural features such as a data store, routing and a component library.
react-navigation provides a routing solution for React Native applications allowing you to create several different app layouts and navigation paradigms including headers, tabs and stack containers. This is a great way to build out your app screens and views in a consistent way that will grow with your application.
For a data store, if you are already familiar with Redux you may consider redux-persist for your React Native application. This works well as the backing store for your app as well as adding the capability to serialize parts of your store to storage on the end user device. This allows your application to save authentication tokens and favorites to the device once the app is closed so that the user can resume where they finished when they reopen an app.
React-native-elements provides a collection of UI components to use in React Native applications to achieve consistent appearance and functionality across both iOS/iPadOS and Android. These include components such as cards, inputs, lists, avatars and badges. Using a package such as this will help iron out the differences between your target platforms and enable your team to build your app in the shortest possible time.
If you need help architecting or building your next mobile app, please contact us to discuss how we can help!
Originally published at https://www.sitepen.com on April 6, 2020.