Switching to React Native: What It Is & Short Tutorial

If building a mobile application has crossed your mind, you probably heard of React Native. Well, what exactly is it? And is it related to React? In this article, I will be explaining what React Native is and how to implement it. In the end, we will create a simple toggle switch button app to officially celebrate your transition!

What is React Native?

When programming a mobile app, you would normally use Java (for Android) or Swift/Obj-C (for iOS).

In 2015, however, React Native was introduced as a framework that allows you to conveniently build mobile platforms with React. Thanks to this new creation, companies could now maintain the same codebase across both iOS and Android platforms.

Is React Native related to React?

Yes! React Native uses React! If you normally code in JavaScript or know React, React Native makes building mobile applications easier, as it already uses React for your starting point. However, the syntax is a bit different and may feel unfamiliar at first. But as learning any new language goes, you’ll soon get the hang of it and learn to love it!

Here’s a simple React component:

Now, here’s a simple React Native component:

Because there is no DOM in React Native, there are no longer any HTML tags like <div> or <p>. Instead, React Native has its own version of tags, such as <View> or <Text> as an equivalent.

Another interesting thing to note is StyleSheet. While you would normally style in a separate file, CSS is more commonly coded and placed at the bottom of the same component file in React Native. Properties are also camel cased (fontWeight) instead of kebab-cased (font-weight). More on StyleSheets later!

Installing React Native

There are two ways to install React Native. You could either use Expo CLI or React Native CLI. Expo CLI is popular among beginners as Expo is a platform that lets you run and preview your React Native app easily.

To develop apps with Expo, you would need to download both the Expo CLI to create and serve your project and the iOS/Android app, Expo Go, to run it on your phone. Please refer to the official documentation to install Expo.

But, for the purpose of this tutorial, we will simply be using Expo Snack, which allows us to run Expo projects on our browsers.

Click on this link to get started!

Let’s Code!

To get started with React Native, we will be adding a simple toggle button to our App.js file using React state hooks. Let’s first write a basic starter code and walk through it together.

We are importing the Text, View, and StyleSheet components from the react-native package, which are part of React Native. We then create and export a functional component that renders a View, which is needed to build a UI and display content. Inside, we have a Text child component, that renders “Toggle Me”.

To style components, we usually use StyleSheet.create and store all our CSS variables in a single stylesheet, called styles. We then wrap any of the components we want styling on, with a style prop and set them equal to the matching CSS variable. You can name the CSS variable any name you want.

As a result of the style variable, text, “Toggle Me” has a font size of 30, font weight of 300, a font color of black, and a margin of 10 at the bottom.

Adding Switch Component

Now, let’s import our star of the show: the Switch component!

We are using React state hooks to declare a new state variable, isEnabled, with an initial value of “false”. In addition, we have rendered our Switch component right under Text. It takes in a boolean prop called value, which we have it set to isEnabled, or “false”. Switch also accepts onValueChange prop, which is an anonymous function. When invoked, the value prop will change to the new value that was passed in.

This means, we are updating isEnabled each time we click on the switch button, giving us that toggle on and off feature!

Bonus: Adding Finishing Touches

So far, you have mastered the Switch component, dabbled with hooks and state, and gotten a feel for React Native! To spice things up just a little, let’s add some styling and a finishing statement to our app to conclude our mini tutorial!

Link to Expo Snack

Conclusion

And that’s it! Congratulations, you’ve successfully switched over to React Native! I hope you enjoyed reading and learning the basics of this cool framework. I can’t wait to see what amazing mobile applications you’ll build in the future!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store