The post will show you how you can easily create Build iOS App with React Native and Expo. First, we’ll go through the process of installing React Native to your development machine.
What is Expo?
That means you don’t need to use Xcode or Android Studio, or write any native code, and it also makes your pure-JS project very portable because it can run in any native environment containing the Expo SDK.
Expo mobile app lets you preview projects built on Expo. You can test your projects as you code, and share them with anyone if you’d like.
Install Expo app on your phone.
Setting up development environment
The only thing that we’re going to need to set up to get started with Create React Native App and build mobile apps on any platform is Node.js.
Yes, that’s right.
No Xcode or Android Studio, no SDKs or anything like that.
Whether you have OS X, Windows or Linux there is only one simple step:
- Go to https://nodejs.org, download and install Node.js version for your platform.
After you done open your Terminal app and execute the following to make sure Node.js was installed:
This command should output Node version that you just installed.
How to create React Native App?
Install it execute the following in your Terminal app:
npm install -g create-react-native-app
That will install Create React Native App globally.
The above command lets you create React Native apps with no build configuration. It uses Expo SDK, which means you can run your apps directly on your phone with Expo mobile app.
You must be wondering how does this really work, no problem I have this sorted for you:
- First, you create a new app with Create React Native App.
- Then, you launch Expo mobile app on your phone and scan a special QR code outputted by Create React Native App to run the app on your phone.
- You start coding, and the app automatically refreshes every time you make changes.
Let’s try it out
Build iOS App with React Native and Expo
All sounds good but let’s try and create out React Native app.
Open you Terminal and execute the following commands:
Already covered this 😉
npm install -g create-react-native-app
Then let’s create out first App and called it MyAwesomeApp
A lot of things will be downloaded on the terminal but don’t worry, once it’s done you, should see this.
Now, let’s follow the suggestion and execute these two commands to switch to the newly created directory and launch the development server:
cd MyAwesomeApp npm start
Once the development server is up and running, you’ll see this. That’s a QR code you need to scan with Expo mobile app to run the app on your phone.
Get you phone and make sure it’s on the same WiFi network as your computer. Launch Expo app and on the main screen tap Scan QR Code. Then point your phone’s camera at the QR code in the terminal.
Next step open the project folder in your favourite editor, I have Atom and try editing App.js file, and you’ll see your changes being made right away on your phone.
How to connect to the debug mode?
To access the Developer Menu shake your phone. This menu has a few functions useful for debugging.
[alert type=white ]
Don’t Miss out
React Native and CodePush Experience
Running on app on simulator
If you wish to run you apps on either iOS or Android simulators, you can still do so. But in this case, you will have to install either Xcode for the iOS Simulator or Android Studio with SDKs and a Virtual Device for Android.
Launch your app on the iOS Simulator by executing:
npm run ios
Or on an Android Virtual Device by executing:
npm run android
Demo source code
You can find the source code on my github account here
Hopefully, you’ve learned a lot about creating your first react native app as well as regarding Expo!
Subscribe to get notified about new tutorials. And if you have any questions or ideas for new tutorials, just leave a comment below the post.