Learn how you can use React Native with Expo to make mobile applications

Intro to React Native with Expo

In our previous example, we used the `<Text>` component to render text.
There are a few other components like `<Text>` which ship with React Native; we call these _core components_.
React Native knows how to render these on a specific platform because they are tied to a _native component_ counterpart.

By creating components and rendering them, you tell React Native what to render.
The JavaScript with the components is bundled in your app and executed in a separate thread from the native UI.
This JS thread instructs React Native what it needs to render.
Splitting this into a JS thread and a UI thread allows the platform to understand what needs to be rendered without blocking the actual interface components.


To visualize these two threads, consider a highway with only a single lane for traffic.
With both slow and fast traffic combined on this lane, some traffic might slow down others.
Adding another lane allows the faster traffic to run independently of the slower traffic.
While JS isn't necessarily slow traffic, it can still block the UI thread and cause stuttering in visible animations.

Besides the visible UI components, the native UI thread is also handling native API requests.
Some functionality, like GPS location, needs to be requested from the native APIs.
If your JS code uses this kind of functionality, it interacts with the native API using _native code_.
The data from this native code is sent back to the JS code and handled in your app.

Information flows from React-like JavaScript to the JS thread, back-and-forth to the UI thread, then finally the actual result is rendered as a native application.

Native Rendering

Well done! In this lesson, we covered some basic concepts from Expo and React Native:

- React Native is a library that uses React for mobile app development to create performant apps with JavaScript.
- Expo is a platform for universal React apps that contains React Native and helps you iterate fast, without any native platform knowledge.
- Components in React Native have a _native component_ counterpart that is rendered on the native platform.
- Expo and React Native runs your React JavaScript in the actual app, in a different thread from the UI to keep your app running smoothly.
- Just like React, Expo and React Native uses the _entry point_ of your app to render it on different native platforms.
- Because different native platforms aren't identical, some components behave differently on some platforms.


Review

All apps in Expo and React Native are made out of _components_.
These _components_ are small reusable pieces of your app, all working together.
Each of these components usually has a single responsibility. 
It can vary from rendering styled text, or rendering other pre-styled components to create a form.

Just like normal React, your app all descends from a single component.
This component renders all other components in your app, from screens to simple text.
Instead of rendering this component to DOM, Expo and React Native renders it for you using a concept called the _entry point_.

Render a Component

React Native is a library built with the same API as [React](https://reactjs.org/).
It uses the same _declarative UI paradigm_ but renders directly to native components.
You can write your app once in React and run it on multiple native platforms, like Android and iOS.

While "native" is part of the name, it's not pure native app development: Expo and React Native still use JavaScript to run your app.
Instead of rendering this JavaScript with a web engine, they use the actual _native components_ from the platform.

> Note: Without Expo or React Native, pure native app development would require you to learn the platform language and tooling like Android Studio for Android and Xcode for iOS.

By using React, you can reuse prior web development knowledge to create mobile with the native features of traditional mobile apps.
It also allows developers to share most of the code on all platforms, resulting in faster development.
But, to get from idea to app, basic knowledge of the native platforms is required.

The unique elements used when rendering a simple React Native app in Android and iOS.

What is React Native?

A lot of Expo and React Native code can be reused across multiple native platforms, but there are some differences you should be aware of.
_Native components_ may look different because of the platform-provided design guidelines.
On iOS, Apple implemented their [Human Interface guidelines](https://developer.apple.com/design/human-interface-guidelines/) while Android provides their [Material Design guidelines](https://material.io/design).
Some of the _core components_ might look different on other platforms because of this.

Let's take a look at the `<Button>` component.
In this image, you can see how this is rendered on both Android and iOS.


There are also differences in the functionality provided by each platform.
Apple wants app developers to use their "Authenticate with Apple" feature, but this is not available on Android.
Because of that, it isn't always possible to provide a unified API for native functionality.


Android and iOS versions of the Button component

Cross-Platform Differences

[Expo](https://expo.io/) is a platform to make universal React apps that helps you develop, build, deploy, and quickly iterate on mobile apps.
It provides a range of tooling to make development with React Native even easier.
Although Expo isn't required to create React Native apps, it helps developers by removing the need for basic native knowledge.

- [Expo Go](https://expo.io/tools#client) is an app you can download on your phone to "view" your app in development.
- [Expo CLI](https://expo.io/tools#cli) is a tool to create, manage, and develop your apps.
- [Expo SDK](https://expo.io/tools#sdk) is a modular set of packages that provide access to native APIs, like `Camera` or `Notifications`.
- [Expo Snack](https://expo.io/tools#snack) is a web-based playground where you can write React Native snippets and run them in the browser, which you'll see in the next exercise!

You'll occasionally see Expo mentioned in the [React Native documentation](https://reactnative.dev/docs/more-resources#platforms-to-try).
We generally recommend that you use Expo when building React Native apps.
It's the easiest way to get started building your app, and there is no lock-in.
Once you start with Expo, you can always eject back to React Native only.

Expo and React Native

React Native vs. Android Studio, Xcode, and web development

Expo and React Native provide a comprehensive framework with a big community.
There are thousands of prebuilt packages that you can use directly in your app.
Just like every other framework, Expo and React Native aren't a silver bullet solution.

For most apps, Expo and React Native are a good choice:

- Apps built with Expo or React Native can run on multiple platforms. That means faster development and less code to maintain while sharing most of the code.
- It provides direct access to native functionality, allowing developers to make the app as performant as pure native apps.
- Getting started with Expo and React Native only requires basic web development and basic native platform understanding.

Big companies like [Bloomberg](https://www.techatbloomberg.com/blog/bloomberg-used-react-native-develop-new-consumer-app/), [Shopify](https://shopify.engineering/react-native-future-mobile-shopify), and [Coinbase](https://blog.coinbase.com/optimizing-react-native-7e7bf7ac3a34) are using React Native for their mobile apps. Coinbase started with native and moved to React Native [with great success](https://blog.coinbase.com/announcing-coinbases-successful-transition-to-react-native-af4c591df971). You can find more companies listed in the [React Native documentation](https://reactnative.dev/showcase)!


In some areas, React Native doesn't do well:

- Pure native apps have a higher performance ceiling compared to Expo and React Native apps.
- Expo and React Native are abstractions on top of the native platform. They need to follow the latest changes and functionality from the native platforms.
- Complex apps often require you to optimize and customize native code&mdash; that requires a good understanding of every platform you need to support.

Airbnb is one company that started with React Native but [later switched to a different toolset](https://medium.com/airbnb-engineering/sunsetting-react-native-1868ba28e30a).

Should I use Expo and React Native?

Mobile devices like smartphones and tablets are everywhere nowadays. Cisco forecasts that by 2023 there will be [5.7 billion mobile users worldwide](https://www.cisco.com/c/en/us/solutions/collateral/executive-perspectives/annual-internet-report/white-paper-c11-741490.html)! All big companies, even Codecademy, have mobile apps that put their services in the palm of your hand.

On mobile, there are two major platforms, Android and iOS. (There are a few others, but these two make up [for 99.4% of all devices](https://gs.statcounter.com/os-market-share/mobile/worldwide).)

Creating apps for these two platforms requires a lot of platform-specific knowledge, including multiple languages, multiple toolsets, multiple teams, and for iOS, you'll need a Mac.