What is React Native?
React Native is a mobile development framework written in JavaScript. It uses React.js which is a JavaScript library for building user interfaces. It also has its own special components that know how to communicate with the native device’s platform so you can build a user interface. Mobile devices don’t use HTML tags so React Native gives us those components that can render our user interface. It gives us access to the device’s API like the device’s camera, and more.
It gives us everything we need to create a real mobile app that we could have in the IOS and Andriod app stores.
All you need is basic knowledge of JavaScript and React.js and a computer you enjoy coding on.
Expo
Expo is one of the two ways you can create a React Native App, the other being React Native CLI.
Expo is a free third-party service that gives you a managed app development platform. It takes away some of the complexities of developing the app and is more convenient. It gives you wrappers for common device features you need like the camera or a map. Though you are limited by the Expo Ecosystem, it removes some of the control you would have if you built a raw React Native CLI.
I’d recommend Expo for people getting started. If you ever feel like you need more control you can always switch to React Native CLI.
Getting Started
Download NodeJS
Check if you already have NodeJS downloaded by entering node -v on your terminal. If not, go to nodejs.org and download the latest version and walk through the installation process.
Get the Command Line Tool
Enter npm install expo-cli --global on your terminal which will install the Expo CLI tool that will help you create and manage your React Native projects globally on your computer.
Create your Expo Project
In the folder or directory you want your project to be in, run:expo init <enter your project name here>
- You will be asked what kind of template you want to use, choose “blank”
- Choose if you want to download dependencies with Yarn or NPM (doesn’t matter much but I used Yarn)
Starting up your project
cd into your React Native project folder open it on your favorite IDE (ahem VScode) and on the terminal, run:expo start
As long as your working on your project, make sure to leave this command line running.
This will open up a new tab or window with the Expo Development Tools. It’s a window that allows you to run your app on different devices or simulators and manage part of your app where you can see warnings.
Running your App on your Device
Download the Expo app on your personal device.
(If using an iPhone) Navigate to the Expo Development Tools tab or window that just opened up and scan the QR code shown using your phone’s camera.
This will prompt you to open the Expo app.
Without even signing up this will take your app and compile it onto your Expo app so you can interact with it.
React Native Project Folder
We’ll ignore everything right now and only focus on the App.js file. The code looks quite similar to the code we see when you use React to create our web application. We still use Class and Function components, and we still have React imported.
The difference is that we’re also importing things from the react-native library which gives us special components that are compiled to the native platform’s widgets. Remember, mobile applications don’t recognize HTML.
React Native does not use CSS for styling, it uses JavaScript with CSS-like property names from the react-native library.
Check out React Native’s core components here!
Running your App on a Simulator
I recommend using a device simulator during the development process. You can also use your own personal device to see it run on a real mobile device but in my opinion, using a simulator makes things easier because everything is on my computer screen AND I can test my app on different mobile devices.
- Install Xcode
Open up the Mac App Store and search for Xcode. Install it if you don’t have it already. This may take a bit of time to install. - Check Xcode Command Line Tools
Open Xcode “Preferences” then go to “Location” and make sure that the most recent version of Xcode is selected in Command Line Tools. - Launch Your Simulator
Open Xcode “Open Developer Tool” → “Simulator”
This will launch a simulator that will begin booting up (you can always change your simulator device). - Launch Your App on Simulator
On your Expo Development Tools click “Run on iOS simulator” and it will open the Expo App and launch your project in that app, all on a simulator.
And there you have it! You should have a basic React Native App running on a mobile device, simulated or real.
Happy Coding!!
