React Native is a cross-platform mobile application development framework that Facebook created in 2015. React Natives uses JavaScript as the underlying programming language, and it aims to help developers can build native mobile apps for both Android and IOS devices with a single codebase.
In this post, I’ll introduce some of the key concepts and components.
What is Cross-Platform Development
Cross-platform development is the art of writing software that runs on different platforms; you write your codebase once and share it across different platforms. Cross-platform development provides you with a broad target audience since you have various options for running your codebase. For example, one app can be shared across both Android and IOS devices, resulting in a broader user base.
Features of React Native
Lets look at some of the features of React Native.
Write Once and Use Everywhere
React Native uses the write once and use everywhere approach; this means that the code written in React Native can be used to build native applications that work on multiple platforms.
Large Community Base
Since React native is based on JavaScript, it has a significant adoption rate and a large community base. JavaScriptis the most popular front-end programming language and is used to power almost all websites.
Third-Party Packages and Plugins
With React Native, you can use third-party plugins and packages to enhance the capabilities of your application. In fact, many open-source JavaScript libraries found on NPM can be used with React Native.
Fast Refresh
Fast refresh is a React Native feature that allows you to get near-instant feedback for changes in your code. With the fast refresh feature you can see each UI change immediately as you update your code.
Ability to Build Cross-Platform Apps Quickly
With React Native, you don’t need to learn IOS or Android programming unless you are building a complex app. This means that you can develop your app entirely in JavaScript and share the code in different platforms that work in IOS and Android.
It Doesn’t Need a Compiler
React Native has a hot reload feature that lets you see your results after every change you make in your code, unlike a native app where you have to compile your code every time you make your changes.
Easy to Debug
React Native leverages Chrome and Safari developer tools hence letting developers detect and solve errors quickly.
Some of the popular apps build with React Native include:
- Skype
- Salesforce
- Discord
- Bloomberg
- Wix
- Uber Eats
- and many more
How Does React Native work?
Unlike in React, which renders to the web’s DOM, React Native renders to native iOS or Android views: This allows developers to build native iOS and Android applications just by using React Native.
React vs React Native
React and React Native are pretty similar since they both use JavaScript; however, they are also different.
- React is used to develop web applications, while React Native is used for creating mobile applications.
- When it comes to setup, React requires setup tools since it is a framework, while React Native comes bundled with all the tools required to build applications.
- React does not support live reload, while React Native supports live reload.
- React uses all the elements provided by the HTML spec such as
<div>,<span>, and so on while React natives introduce new components for use:<View>and<Text>.
How to Set Up a React Native Development Environment
Let’s assume you wanted to create an android and IOS app; you would have two separate development environments, ie. Xcode and Android Studi. However, with React Native, you only need one tool to support both versions.
Expo CLI
Expo CLI is a command line app that allows developers to build cross-platform apps without touching Android Studio or Xcode. Expo enables you to run projects built by Create React Native App without compiling any native code. Expo will also let you get an application up and running with almost no configuration.
How to Install Expo CLI
npm install -g expo-cli
Expo App
Once you have the Expo CLI installed on our development machine, the next requirement is to install the Expo Go app on an IOS or Android device to run your apps. The Expo go app allows you to open up apps that are being served through Expo CLI. You can install it from the following links depending on your device.
- Android Play Store—Android Lollipop (5) and greater.
- iOS App Store—iOS 11 and greater.
To create a new app with Expo, run the following command
expo init my-app
React Native Components
Let’s looks at React Native components and how you would typically use them in your React Native app.
The View Component
View is the fundamental building block of any React Native interface. It maps directly to the native view of the application.
<View> </View>
The Text Component
Text is another fundamental component and is used to display text in your application.
<View> <Text>Hello World!</Text> </View>
The TextInput Component
This component is used by users to input text in your application via the keyboard. It also comes with valuable properties such as autocorrect, auto capitalize, and auto focus.
<TextInput
onChangeText={onChangeNumber}
value={number}
placeholder="My text here"
keyboardType="numeric"
/>
The ScrollView Component
ScrollView is used to render all the content at once and display it when it is required. For example, you can use a ScrollView to display a very long list of items.
<ScrollView >
<Text
VERY LONG TEXT
</Text>
</ScrollView>
The FlatList Component
A FlatList is used to display data from props. It overcomes the problem of slow rendering for long lists of components.
<FlatList
data={ }
renderItem={}
/>
The SectionList Component
A SectionList is similar to a FlatList except the data is organized into sections.
<SectionList
sections={DATA}
keyExtractor={(item, index) => item + index}
renderItem={({ item }) => <Item title={item} />}
/>
The Image Component
An Image component is used to display an image
<Image source={require('./cat.png')} />
The ImageBackground Component
ImageBackground is used to display a background image.
<ImageBackground source={uri:'https://unsplash.com/photos/06MHFfYv6YY'} style={{width: '100%', height: '100%'}}>
<Text>IMAGE TEXT</Text>
</ImageBackground>
The Button Component
A Button is used to display touchables.
<Button
title="Press Me"
/>
The Switch Component
A Switch is a controlled component that renders a boolean input.
<Switch
value={this.state.switchValue}
onValueChange ={(switchValue)=>this.setState({switchValue})}/>
Other important components include:
KeyBoardAvoidiingViewActivityIndicatorAlertDimensionsLinkingModalPixelRatio- RefreshControl
StatusBar
Summary
Expo CLI allows you to scaffold and get up running with minimal configuration without the need for Xcode or Android Studio. Other advantages of Expo include:
- ability to test on your own devices
- no lock-in
- requires little time to build an app
Conclusion
React Native development takes much of what you’re used to from web development and takes it to native development.
When developing native apps, it’s important to note a few differences between IOS apps and Android apps. For example, while android uses Material Design, IOS uses Human Interface Design.
For example navigating between screens is different in IOS and Android; Android devices have a navigation bar at the bottom of the screen while IOS devices have a back button.
You’ll have to take these little differences into your design if you want users to view your app has having a true native interface.
