After I finished the Flatiron School’s software curriculum and had made a few web apps of my own using various technology like Rails, Javascript and React. After that mobile softwares eg: apps, like real App Store apps or Google Play store apps, seemed like the next logical thing to do. Although I wasn’t too eager to learn a completely new language so soon after the bootcamp, I found out that I can actually bring my previously learned Javascript and React concepts and start coding apps for cellphones using React Native. It’s been a pleasure and exciting to try and learn some of the things that React Native has to offer when it comes to the mobile development. I will explain in this post how I got started with React Native using ‘Expo’ and what was the process liked.
Since I am a mac user, the processes will be all for the Mac OS, I apologize to the Windows users in advance. The easiest way to get started with React-native is with Expo CLI. If you’re like me and coming from a React background, think of it as an equivalent to ‘create-react-app’. Just like in React, Expo CLI lets us create a React-native app within minutes. Before installing Expo CLI, I needed to make sure that the Node and NPM have been installed in my machine. As long as the node version is at least 12.x.x or higher you can proceed to install Expo CLI otherwise the Node version needs to be updated before using Expo CLI. I checked and made sure I’ve had the at least Node 12.x.x installed in my machine typing this code in the terminal:
node --versionAfter that I’ve used the terminal to install Expo CLI:
npm install -g expo-cliNext step was to initiate a brand new app:
expo init my-projectThis command prompted me to choose a template and I went with a blank template.
After sometimes the project directory was ready. To run the project I followed the terminal instructions and cd into the newly create project directory and used ‘npm start’ command and it ran the developer server for the project. ‘expo start’ works as well. This commands ran the metro bundler in the web browser at http://localhost:19002/ and provided me with a QR code and instructions on how to view the app in my phone. I used ios and android both. First I went to the app store and to play store for ios and android respectively and search and downloaded the expo client app for the mobile. For ios users it will be Expo Client and android user it’s Expo. After downloading and installing the client app in the mobile device I simply scanned the QR code and it bundled the javascript and ran the app in my mobile device.
Finally the App showed up on the device.
That was it and from that point it just matter of open the project with a code editor and shape up my app. The method here for rendering the app in an actual mobile device is actually a bit daunting when developing. In the next post I will explain how to install emulators to emulate the mobile screens in right at the computer. Thank you for reading any feedback will be appreciated.
