node -v will do the trick. Once we figured that part out, we can install Expo CLI using the following command
npm i -g expo-cli . Since we are using VS code, I would recommend some important extensions for our React Native app development. React Native Tools developed and maintained by Microsoft, it is a very popular and useful tool to help us debug our React Native app in VS code. React-Native/React/Redux snippet is also a very useful extension to help us with typing shortcuts when we are coding. Prettier-Code formatter is also one of the very popular extension in VS code to give better visualization for our codes. Material Icon Theme is another tool that can give us better visualization and icons for our files.
Once we have installed all the necessary pre-requisites, we can initiate our app by
expo init #Name of our app . In our code snippet above, we can see that once we execute this command line, we will be given a few choices of workflow template. For simplicity purpose, we are going to use Managed workflow, which takes care a lot of things behind the scene and makes our learning / app development phase much easier. We won’t see the iOS or android project files using managed workflow blank. We can see from the code snippet below that app.js imported react and few different components from react native. By default in React Native, it uses functional component because it will be simpler and lightweight. We can also incorporate Hooks into React Native, which synergizes well with functional components.
In the code snippet shown above, we can tell that function App returns a JSX expression. We have a View component, which serves like a
<div> in HTML, and we also have a Text component, which acts like a
<p> in HTML. In react native, we cannot use any HTML elements, therefore we use the components that react native provides us with. StyleSheet is another important component, which is very self explanatory by its name, it helps us with the styles and how our app will look like. With a given example shown below, we are creating a stylesheet with an object called container that defines some properties for our app’s styling. ( Note: these properties are not CSS properties, although it does look like CSS at first glance)
Once we start using React Native, we can run our app by using
In apple app store, we first need to find and install Xcode. Once Xcode is installed, we can simply start our simulator from Xcode under Open Developer Tool option, and select Simulator. Once we open our iOS simulator, we can use the tool bar to select Open Simulator and what kind of virtual device we want to use. Currently I am using a iPhone 12 Pro Max as my simulator for the react native app. Once we have the simulator opened up, all we need to do is go back to the Metro Bundler page, and select Run on iOS simulator to load our app onto the simulator. We can also go to our VS code terminal and type i to start iOS simulator app.
Next let’s take a look at how to setup the Android emulator for our app. First thing first, we need to install Android Studio. Once installed, we need setup the android studio by following a standard installation, this will help us pre-determine most of the SDK components that we need to install on our android studio. The image shown below is the standard SDK components that will be downloaded with android studio. Once the installation is completed, go to android studio, open Configure on the bottom right side of the android studio, select SDK manager and we will see all the previous mentioned SDK components that were installed on android studio.
For MacBook users, we need to have another additional steps to properly load our android emulator. Head to website docs.expo.io, on the side menu, select managed workflow and then android studio emulator. This will give us the instructions to properly run a android emulator on MacBook. Follow the exact instructions provided to add the Android SDK location to our app PATH. Once it is completed, we can go back to Android Studio and Configure, select AVD Manager, which stands for Android Virtual Device Manager. Once we opened it, we can create a virtual emulator, the easiest device to use for emulator would be the latest Pixel phone with Google Play Store available. Once the virtual device is ready, we simply go back to the Metro Bundler to select Run on Android device/emulator, or press a in our VS code terminal to connect with the emulator.
I know I have merely scratched the surface of React Native mobile app development, there are a lot more to be learned and a lot to be explored! I will include some resources and links for further reading and learning! Thanks for reading and have a wonderful day!
Introduction · React Native
Welcome to the very start of your React Native journey! If you're looking for environment setup instructions, they've…