A blog for technology, SEO tips, website development and open source programming.

Build iOS App with React Native and Expo

0 4,397

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?

Expo is a platform on top of React Native that lets web developers build truly native apps that work on both iOS and Android by writing them once in just JavaScript.

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 Application

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.

AppStorePlayStore

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 XWindows or Linux there is only one simple step:

After you done open your Terminal app and execute the following to make sure Node.js was installed:

 node -v

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:

  1. First, you create a new app with Create React Native App.
  2. 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.
  3. 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

create-react-native-app MyAwesomeApp

A lot of things will be downloaded on the terminal but don’t worry, once it’s done you, should see this.

Expo Success Screen

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.

Expo will connect to the development server, pull JavaScript bundle and run the app.

Just amazing?

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

React.js First Attempt

[/alert]

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

Conclusion

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.

 

Leave a Reply

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More