First steps with React Native Expo CLI

I hope this article will help you to avoid struggling from the first seconds of working with react native app 🤞.

When I came up with the idea for the final project, I thought it would better to do a mobile app (I wish I knew before what it would cost me 🤦🏻‍♀️😆). I was unfamiliar with mobile development when I started this journey, which is why I decided that the easiest way (for newbies 🤷🏻‍♀️) is to use Expo CLI instead of React Native CLI. Additionally, due to time limits, I only used iOS platform, and focused on the main goal and functionality, rather than doing less but covering both platforms. I will tell you everything that I now know based on this experience.

If you did not install React Native yet:

1. Check that you have installed:
   • node (version 12 or higher),
   • npm/yarn,
   • code editor.
2. Then you can run on your terminal: npm install -g expo-cli or yarn global add expo-cli.
3. Create a new project: expo init YourProjectName (you can choose any template you want, I did the first one - blank).
4. Then go to your project folder cd YourProjectName, open your code and run it: npm start or yarn start.

You can open expo developer tool in the browser (first link) and manage your process from there, or you can open it on you mobile phone, just install Expo Go and scan the QR code.

If you do not want to use your phone each time you need to check your progress, you need to install Xcode, and after running npm start command press I button, it will open iOS simulator (for Android simulator you need to install Android Studio).
Installing Xcode can take some time, it took around 1 hr. Then tap Xcode on navbar -> Open Developer Tool -> Simulator. If you want to choose another type of device, then tap File on navbar -> Open Device -> choose whatever iOS device you want.
Yeey, now you can see your first result :)

You can tap R button to reload your simulator.

If you are working not only with front end, but also back end, you need to connect them to avoid CORS issue. If you add
"proxy": "http://localhost:3000"
to your client's package.json, then your client will know your server api and allow you to make requests to it.

Here is a React native documentation - https://reactnative.dev/docs/environment-setup
and Expo - https://docs.expo.dev/

Good luck!