App

Create a React Native app with Expo

Apps, News

I’ve been an app developer for years but recently had to work on a project that required me to create a React Native app with Expo. Expo is pretty easy to set up and use but I definitely found a few holes in the documentation online, so I’ve documented the steps to help you build an Expo app.

In summary this post will tell you how to :

  • Create a new Expo app project
  • Create a git repo and push your code into it
  • Run and debug an Expo app

The next post will show you how to :

  • Set up basic navigation (a Stack Navigator) using ReactNavigation
  • Add Tab navigation to your Expo app, and combine it with the StackNavigator
  • Add Drawer Navigation to the app
  • Apply some styling

I’m using Visual Studio Code on a PC to create this Expo app – I’m presuming that you’re already familiar with Visual Studio Code and the fundamentals of app development. I’ll also presume that you know the basics of using a command line tool and using Git repos. For all of this you can use CMD or Git Bash. I prefer Git Bash but it does occasionally have some issues with Expo, so bear that in mind and try CMD if that happens.

Get Started creating your app – Install the Expo client

The very first time you create an Expo app you will need to install the Expo CLI. In your command line tool of choice (Command or Git Bash), type:

npm install --global expo-cli

If you get an error message about npm not being recognised, then you haven’t yet got node package manager installed, and you will need that. In which case follow the instructions here – https://www.npmjs.com/get-npm and then try again.

You will also need to install the Expo client on your Android and / or iOS device.

1. Set up your new Expo project

Expo have plenty of documentation available at https://docs.expo.io/ so some of the process of creating a new React Native app with Expo is covered – do take a look. I’ve summarised the key required steps here. In summary. At the command prompt, navigate to the folder where you want your project folder to be, and type:

expo init my-project

….. where my-project should be the name of your new app. For this example we’ll call it myapp, so :

expo init myapp

Once you’ve typed that on the command line and pressed return you’ll see a question prompt asking you what type of project you want to set up. Choose the basic option from the Managed Workflow section and press return.

You’ll see lots of packages being installed. Once it’s finished type this on the command prompt:

cd myapp

That moves you into the directory of your new app. Type npm install to ensure React Native is installed. So your project framework is created, now you need to set up a git repo.

2. Set up a git repo for your Expo app

Create a new git repo for this project on github – I’ve now created a repo called myapp. Now we need to tell the local repo to connect to this remote repo. Presuming that you are still in your new project root directory with the command line tool open, type –

git remote add origin https://github.com/yourNameHere/myapp.git

… press return, and then type this to push your project code so far –

git push --set-upstream origin master

At that point you’ve created your blank Expo project, created a git repo and pushed your Expo project to the master branch. It’s worth checking that the Master branch in this new repo in github is showing that you just pushed your new Expo project code to it.

3. Test Your Expo App build Setup

Before we go any further, let’s make sure your basic Expo app set up is working ok. So first of all you need to start expo, by typing this in your project root on the command line:

expo start

You’ll see the Expo window open in your browser. With the camera of your device, scan the QR code and follow the prompt to open the Expo client. Please note it defaults to LAN, but quite a few routers are configured to block your local IP address, mine included. If you select Tunnel, the QR code will reload and it should run fine.

At this point you’ll see the code start to load on your device and you’ll see a basic app home page on your device. You can leave this running while you start to edit your code……

4. Edit your Expo app

Now go back to Visual Studio Code and open your Expo project, then open the App.js file, it will look like this:

Now change the text that says “Open App.js to start working on your app!” and change it to some of your own text, then save the file. This change will automatically be pushed to the Expo client, so if you now look on your device, you will see your new text. And that’s all the basics of how to create a React Native app using Expo.

5. Continue to create your React Native App with Expo!

If you want to just download an Expo skeleton app then download from my github repo here – https://github.com/EmilyChristy/expo-skeleton

Setting up your Xamarin development environment in Visual Studio

Apps, Software Development, Xamarin

In order to develop apps using Xamarin you have to decide what your development environment will be, and whether to develop on a PC or a Mac primarily. My Xamarin development environment of choice was to do all my coding on my PC in Visual Studio 2015. I then use my Mac Mini on the same network to run my IOS simulators on, and connect my IOS test devices to. It’s important that the installed SDK versions for Xamarin match on both the PC and the Mac or you can run into compilation or deployment problems down the line.

I’ve been developing apps using C# in Xamarin for a number of years now, up until now as a side project. But as Xamarin was bought by Microsoft earlier this year, and the annual license is now free, it seemed the right time to start focusing on Xamarin a little more.

During the process of getting all of this setup and up to date, I ran into a number of issues which, from the Google searches I did, seems I’m not the only person to have these problems. I’ve collected a rough and ready list of some of the errors and their solutions to hopefully save others a bit of the time it took me to eventually get to a stable working system.

During this process you may need to know a couple of key things –

1. Find the IP address of your Mac on the network
2. View your Xamarin log files
3. Update the Xamarin and XCode installs on your Mac
4. Update the Xamarin and SDKs on your PC.

This post will help you do each of those, and if you still haven’t got up and running by the end of this post you can turn to both the Xamarin forums and Stack Exchange for help.


Find the IP address of your Mac on the network

In the top right hand corner of your Mac screen you’ll see the little Wifi symbol that shows your Mac is connected to a Wifi network – click on this symbol while holding down the Ctrl key on your Mac and you’ll see some extra info appear in the dropdown list, including the IP address of your Mac on the network.

Xamarin setup process and common error messages

Typically at some point you’ll have a problem getting your PC to connect to your Mac. This wouldn’t be a problem in itself apart from the fact for some reason the useful error messages are hidden deep within the Xamarin log files. Incidentally it’s vital that your PC and Mac are on the same Wifi network. I had issues at one point because my laptop had autoconnected to a BT Openzone Wifi network and the Mac was on the normal office one. Just a simple point that’s easily overlooked. Presuming it’s not that, you will need the log files! Using the instructions below to get to the log file you are likely to find a message like:

“The installed Xamarin.iOS (version 10.0) on the Mac macname.local (192.168.x.xx) is not compatible with the local Xamarin.iOS 10.2.”

Which is just telling you to update whichever systemis behind and then you will be able to connect to your Mac no problem..

1. Error occurred in the designer agent. Object reference not set to an instance of an object – designer won’t load. Can happen for a number of reasons. In my case when I went on to my Mac and opened XCode / Apple developer account there was a license agreement dialogue box that needed to be accepted by me. Once I’d done that everything worked fine.

2. Failed to create the a fat library. The solution to this was to go to the Mac and open Xcode. An update had been installed and it was waiting for me to accept a new user agreement. Once I’d done that and returned to Visual Studio on the PC I could build the project no problem.

Xamarin related updates

There’s a series of places that updates need to be ‘triggered’ when you’re using Xamarin – the PC, the Mac, and if you are debugging on a device, then the device environment itself.

Updates are located in Visual Studio on the PC. On the Mac there’s system updates which might include Xcode, that need to be kept up to date. You’ll also have Xamarin Studio installed on your Mac, and that has an updater that will need to be run as well by clicking the File > Check for updates button.

On your device you need to go to follow the normal process for updating your version of IOS. I’m only developing on Apple devices at the moment until I’ve got more comfortable with the full development cycle.

Diagnosing problems and using the Xamarin log files

The log files can be located by going to Help > Xamarin > Open Logs in Visual Studio and then browsing to the relevant folder location as follows:

Mac – ~/Library/Logs/Xamarin-[MAJOR.MINOR]
Windows – %LOCALAPPDATA%\Xamarin\Logs (on Windows 10 this will be something like C:\Users\Bob\AppData\Local\Xamarin\Logs)

If you don’t see the folder you may have to tell File Explorer to show hidden files as they could be hidden by default.

Also in Visual Studio pay close attention to the output window. Top left of that window is a dropdown that says ‘Show output from ‘ and then there are several options:

– Build
– Build order
– Debug
– Xamarin
– Diagnostics

You find different type of information in each and they are often worth trawling through if you are encountering problems.