What is React Native?

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:

Facebook
Instagram
Skype
Pinterest
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:

KeyBoardAvoidiingView
ActivityIndicator
Alert
Dimensions
Linking
Modal
PixelRatio
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.