If you’ve been keeping up with the Making Sense blog, you’ll know that we are huge fans of React Native. If you’re also a fan, here’s a beginner’s guide to creating your first application with this great technology. And in case you’re unfamiliar with this tech, here’s your chance to learn some of its helpful advantages that we’ve discovered here at Making Sense.
React Native, From the Beginning
When you want to create a React Native application you have two options:
- React-native-cli. This version is a lightweight package that should be installed globally (npm install -g react-native-cli) and allows you to create a React Native application based on the platform. Using the init command you can create a plain React Native app template with native iOS and Android projects that you can modify.
If you are new with React Native, your best approach will be to start using create-react-native and then use the ’detach’ feature provided by Expo. This allows you to convert a CRNA project into something similar to the plain project created by react-native init. The beauty of it is that you get access to the entire Expo SDK functionality.
Installing the Package
Let’s start installing the create-react-native package:
npm install -g create-react-native-app
Once the package is installed, you can start creating your project. Let’s called it “myFirstReactApp”:
The folder structure will contain an .expo folder with all the scripts related to it. In addition, it will contain the src folder, in which you will create all your frontend code.
Since we are using create-react-native, you will need to install the Expo client app on your iOS or Android phone and connect to the same wireless network as your computer.
Time to see the app! Let’s run the following commands:
- npm start (you will see a QR code on your terminal)
- Using the Expo app, scan the QR code from your terminal to open your project. This will open your app in your phone.
- If you want to try the “live reload” feature, you have to shake your phone. Then you will see the Expo Settings page. Tap the “Enable live reload” option.
- Make some changes in the App.js file. The app should reload automatically in the device.
Debugging Your Code
open up a Chrome tab with the URL http://localhost:19001/debugger-ui.
More Useful Commands
There are several other useful commands provided by create-react-native:
- npm test
Runs the jest test runner on your tests
- npm run ios
Like npm start, but also attempts to open your app in the iOS Simulator if you’re on a Mac and have it installed
- npm run android
Like npm start, but also attempts to open your app on a connected Android device or emulator. Requires an installation of Android build tools (see React Native docs for detailed setup)
- npm run eject
This will start the process of “ejecting” from Create React Native App’s build scripts. You’ll be asked a couple of questions about how you’d like to build your project
To run the iOS app:
- $ cd AwesomeProject
- Open ios/AwesomeProject.xcodeproj and hit run in Xcode
- Open index.ios.js in your text editor of choice and edit some lines
- Hit ⌘-R in your iOS simulator to reload the app and see your change!
To run the Android app:
- $ cd AwesomeProject
- $ react-native run-android
- Open index.android.js in your text editor of choice and edit some lines
- Press the menu button (F2 by default, or ⌘-M in Genymotion) and select Reload JS to see your change!
Well, that about covers the basics of using React Native to create an application. Hopefully, this will provide you with enough to get you started on your first project. If you’ve been inspired by this post, we’d love to know what you think. And if you’re feeling uncertain about your own project, contact us and I will be happy to help you. Good luck!