Shaping up with React Native
- May 28, 2019
- Posted by: Bhoomi Bhalani
- Category: Web Development
React Native is a framework for cross-platform mobile app development for iOS and Android. If you want to save time, money, and staff resources significantly, then React Native is the ideal business solution. This progressive technology provides traditional and modern methods of hybrid mobile app development.
For several years of work, the framework was used in world-famous apps such as Skype, Instagram, Airbnb, Walmart, SoundCloud Pulse, UberEats, Tesla, Tencent QQ, Baidu Mobile, and many others.
Why such popularity? Let’s gets started with their benefits.
- It allows performing development faster and Therefore, It costs less.
- It Provides Cross-Platform. It means that it’s possible to get an app for two platforms at once — iOS and Android.
- Focus on UI and Access to Native API out of the Box
- Single Code Base for iOS and Android.It means that a single code base is deployed to
- multiple mobile operating systems. Components are reused anytime at any level into existing code without you rewriting it and recompiling the app.
- Compatibility of 3rd Party Plugins, Smoother Running, and Less Memory Needed
Starting with EXPO
- Install Node.JS
- Install expo cli
npm install expo-cli --global
- Create your react native project
expo init my-new-project
You will be asked to choose a template. Press Enter to choose Blank.
Press Enter to choose Blank.
Input your App Name
- Run your react native project
You should see something like with a QR code generated in the terminal.
Running your Application
This step will be divided into two: Android & iOS part.
Click here to download the Expo client app to your Android device.
Open Expo then click the “Scan QR Code” and Scan the QR code in our terminal.
As soon as the QR code got scanned, it’ll automatically load and bundle/compile your project to run it in your device.
- iOS — iPhone
Click here to download the latest Expo client app to your iOS device.
With iOS 11, there is now a scan feature added to the camera. We can use this to scan the QR code and open the Expo client app.
Open up your camera app, then scan the QR code in our terminal until a notification badge pops on top telling us that we can open it in Expo client. The QR Scan has been removed in Expo for iOS
However, if you’re not in iOS 11, there’s still an alternative way but not with scanning:
— Open your Expo client app and sign up/login.
— Open another new tab in your terminal and navigate to your react-native project directory and run.
expo send -s firstname.lastname@example.org
use the email that is logged in your expo app.
This will send an email to you with the link, clicking this link will open the app in expo. Then it’ll have your project up and running on your iPhone.
That’s it! you got your react-native running in Android/iOS devices. You can read about basic component and communication in my next blog.