This will automatically run the iOS Simulator even if it’s not opened. To run the project, type this: $ yarn start We’ve already created a project named expo-tinder. You can build beautiful applications easily.

We’re going to build something that looks like this: Make sure to update expo-cli if you haven’t updated in a while, since expo releases are quickly out of date. To make sure we’re on the same page, these are the versions used in this tutorial:

If it’s not installed already, then go ahead and install it: $ yarn global add expo-cli If you don’t have yarn already installed, install it from here.Īlso make sure you’ve already installed expo-cli on your computer. Throughout the course of this tutorial we’ll be using yarn. You can get a list of all the properties in the styling cheatsheet. Styles in React Native are basically an abstraction similar to that of CSS, with just a few differences. You also need to have a basic knowledge of styles in React Native. Instructions on how to do this can be found here. You’ll also need the Expo client installed on your mobile device or a compatible simulator installed on your computer. Prerequisitesįor this tutorial, you need a basic knowledge of React Native and some familiarity with Expo. Get an entire collection of React Native books covering fundamentals, projects, tips and tools & more with SitePoint Premium. Want to learn React Native from the ground up? This article is an extract from our Premium library. We’ll be making a total of four screens- Home, Top Picks, Profile, and Messages. We’ll also be making use of a lot of dummy data to make our app. Since this is just going to be a layout tutorial, we’ll be using Expo, as it makes setting things up much easier than plain old react-native-cli. We’ll then learn about a UI framework called React Native Elements, which makes styling React Native apps easy. In this tutorial, we’ll be cloning the most famous dating app, Tinder. Even though React Native makes it easier than its native counterparts, it still requires a lot of work to get a mobile app to perfection. Making pixel-perfect layouts on mobile is hard.

Tinder emulator mac