Creating your project with Expo

Creating your project with Expo

In this lesson we start from the absolute basics. We are going to install all the necessary libraries and set up our project.

If you have previously worked with JavaScript, then you probably have Node installed on your device. If not, please visit the Node JS website and install it.

If you want to check your current Node JS version, simply use this command in your terminal:

I recommend using Node JS version 10 since it is the one I'll be using in this course.

For creating our React Native project we are going to use Expo which is an open-source platform for making native apps for Android and iOS using JavaScript and React.

There is also a way to create projects using React Native CLI but it has some drawbacks and if you are a beginner, I would not recommend doing it that way just yet.

Expo simplifies most of the time-consuming work like building your app and releasing it to the App Store and Google Play. It also doesn't require you to modify any of the native code using Xcode or Android Studio.

Before creating the project we need to install Expo command line tools, using this command:

Once this is done we have all the tools we need to create our project.

Open the terminal at your desired project destination and run this command:

When creating our project we have a few templates to choose from. We are going to select blank. If you prefer TypeScript there is also an template for you.

After a few minutes, your project will be ready!

You should see the following output.

It is always a good idea to check if you are able to run your app and see if it works.

If you want to open app on an iOS simulator, you can run the following command:

You can also open the app on an Android emulator, by running the command:

Since I am on Mac I prefer using the iOS simulator because it performs better and loads faster.

After a successful build, you should see your application.

If everything works, take a look at the project in your editor.

  • Starting at the bottom we have our package.json file where we can see a list of all available scripts and currently installed dependencies. Installing any new library will update this file.

  • In every Expo project we also have an app.json file, which contains all the metadata for our app, like the app's name, bundle identifiers and more. During this course we are going to edit this file several times.

  • Lastly we have our App.js file which is an entry point for our application. We will start building our application from here. As you can see, changing text inside the <Text/> component immediately changes content in our app. We can delete the <StatusBar/> component since we are not going to use it in our project.

One thing I like to start with is creating a src folder where all our components and screens will be.

At this point we are almost ready to get started with our application.

In the next lesson we are going to add some of my favorite libraries that make the whole experience of developing apps more pleasant and elegant.

Thank you and see you in the next lesson!

Start a new discussion. All notification go to the author.