There are so many app developers globally but quite a good number of them are not cross-platform mobile app developers.
React-native by Facebook has now made it possible for anyone who wants to write for both apple iOS and Android OS simultaneously. That is what it means to be a cross-platform developer. When you can write for the two most popular mobile operating systems at the same time.
Powerful mobile applications are usually billed to be written/developed using native languages. React-Native is from React–A JavaScript Framework. Native applications are very powerful applications. They are able to do so many great things without being limited in anyway at all.
Introduction
Prerequisites​
To work with React Native, you will need to have an understanding of JavaScript fundamentals. If you’re new to JavaScript or need a refresher, you can dive in or brush up at Mozilla Developer Network.
While we do our best to assume no prior knowledge of React, Android, or iOS development, these are valuable topics of study for the aspiring React Native developer. Where sensible, we have linked to resources and articles that go more in depth.
Interactive examples​
This introduction lets you get started immediately in your browser with interactive examples like this one:
The above is a Snack Player. It’s a handy tool created by Expo to embed and run React Native projects and share how they render in platforms like Android and iOS. The code is live and editable, so you can play directly with it in your browser. Go ahead and try changing the “Try editing me!” text above to “Hello, world!”
Optionally, if you want to setup a local development environment, you can follow our guide to setting up your environment on your local machine and paste the code examples into yourÂ
App.js
 file there. (If you are a web developer, you may already have a local environment set up for mobile browser testing!)
Function Components and Class Components​
With React, you can make components using either classes or functions. Originally, class components were the only components that could have state. But since the introduction of React’s Hooks API, you can add state and more to function components.
Hooks were introduced in React Native 0.59., and because Hooks are the future-facing way to write your React components, we wrote this introduction using function component examples. Where useful, we also cover class components under a toggle like so:
- Function Component
- Class Component
Core Components and Native Components
React Native is an open source framework for building Android and iOS applications using React and the app platform’s native capabilities. With React Native, you use JavaScript to access your platform’s APIs as well as to describe the appearance and behavior of your UI using React components: bundles of reusable, nestable code. You can learn more about React in the next section. But first, let’s cover how components work in React Native.
Views and mobile development​
In Android and iOS development, a view is the basic building block of UI: a small rectangular element on the screen which can be used to display text, images, or respond to user input. Even the smallest visual elements of an app, like a line of text or a button, are kinds of views. Some kinds of views can contain other views. It’s views all the way down!
Native Components​
In Android development, you write views in Kotlin or Java; in iOS development, you use Swift or Objective-C. With React Native, you can invoke these views with JavaScript using React components. At runtime, React Native creates the corresponding Android and iOS views for those components. Because React Native components are backed by the same views as Android and iOS, React Native apps look, feel, and perform like any other apps. We call these platform-backed components Native Components.
React Native comes with a set of essential, ready-to-use Native Components you can use to start building your app today. These are React Native’s Core Components.
React Native also lets you build your own Native Components for Android and iOS to suit your app’s unique needs. We also have a thriving ecosystem of these community-contributed components. Check out Native Directory to find what the community has been creating.
Core Components​
React Native has many Core Components for everything from controls to activity indicators. You can find them all documented in the API section. You will mostly work with the following Core Components:
REACT NATIVE UI COMPONENT | ANDROID VIEW | IOS VIEW | WEB ANALOG | DESCRIPTION |
---|---|---|---|---|
<View> |
<ViewGroup> |
<UIView> |
A non-scrolling <div> |
A container that supports layout with flexbox, style, some touch handling, and accessibility controls |
<Text> |
<TextView> |
<UITextView> |
<p> |
Displays, styles, and nests strings of text and even handles touch events |
<Image> |
<ImageView> |
<UIImageView> |
<img> |
Displays different types of images |
<ScrollView> |
<ScrollView> |
<UIScrollView> |
<div> |
A generic scrolling container that can contain multiple components and views |
<TextInput> |
<EditText> |
<UITextField> |
<input type="text"> |
Allows the user to enter text |
In the next section, you will start combining these Core Components to learn about how React works. Have a play with them here now!
Because React Native uses the same API structure as React components, you’ll need to understand React component APIs to get started. The next section makes for a quick introduction or refresher on the topic. However, if you’re already familiar with React, feel free to skip ahead.