From React to React Native with Expo

If you have written React code you already know React Native Expo to a great extent. Let's explore how building mobile applications with Expo is easy with the concept you already know from basic React

The Easy Parts

You might be curious, why are we starting with the easy parts? How is this going to help you use your valuable React skill to build mobile applications? In the same way that React has been, and still is, a powerful tool to build web applications. Expo is equally important for building apps for multiple platforms (Android, iOS, and web).

The React Native team officially recommended the use of Expo ( a React Native framework) to build applications. It’s similar to what you would call Nextjs/Remix for the web.

One of the critical easy parts of Expo is the development environment and tooling. Let’s cover them point by point.

• Web based IDE - You can setup a project in minutes using Expo Snack and learn how to use the framework from the browser without setting up XCode/Android Studio.

• The simplicity of file based routing using Expo Router routing library that was created by Evan Bacon - You just get the same experience as the App Router in Next js .

• Another easy part is building, updating and Submitting your application to Apple App Store and Google Playstore. It offers less complex configuration with many defaults handled by expo.

Simplified Blueprints

When building mobile applications in React and most javascript frameworks, we think of the UI in smaller chunks (components) that can be put together and give us the full product. This approach allows to simplify building in Expo, we structure components that encapsulate the complexity and we organize them in order to build easy to maintain applications.

But what is a component in Expo?

This code block may look familiar to you:

const App = () => {
  return (
    <View>
      <Text>Hello World!</Text>
    </View>
  );
};

When the JSX above is transpiled it becomes:

const App = () => {
  return React.createElement(
    View,
    null,
    React.createElement(Text, null, "Hello World!")
  );
};

So we can say that Expo relies on Babel just the same as React to transpile the JSX into Javascript code and also we just see that the component above here is just a function that returns react elements.
This idea of components is what makes react simple, flexible and easy to maintain.

React Native provides many core components for everything as documented in their API section and we’ll just look at a few.

---

1. <View> : This in the web is similar to <div> and supports the same layouts as flexbox, accepts inline-styling, has some touch handling and accessibility controls. This belongs to <ViewGroup> in android and <UIview> in ios view.

2. <Text> : This is similar to the <p> tag in web, and <TextView> in android and <UITextView>, that is used to display text/strings of text and even handles touch events.

3. <Image>: This is similar to the <img> counterpart HTML syntax also <ImageView> and <UIImageView.

4. <ScrollView>: This enables us to have the generic scrolling effect in a screen that contains longer content.

5. <TextInput>: This is one that allows users to enter text and is similar to the <input type=”text”> in HTML. In android its <EditText> and in ios its <UITextField>.
   
   Let’s take a look at how combining the core components above here will look like in code and in a sample application:
   
   You can also run it in your browser here

   

   
   This simple block code gives us the following UI:

   

Conclusion

We can see that React Native and React share essentially the same underlying model. This is just an introduction to my weekly dev content on React Native. If you are curious about building multi-platform applications please subscribe to receive insights on more topics.

If you’ve made it till here. You can now update your resume and subscribe 😅.