&Yes - Devlog 1 - Setting Up Environment

Previously: The Beginning

React Native Research

So to get me off the ground, I am a big fan to have a quick glance at a topic via Youtube videos. All the information available rarely sticks just by watching a video, but it is a nice way to get a bird's eye view.

Found this tutorial, which gave me a rough understanding of how to setup my environment:

React Native's documentation is also a great source of information if you prefer reading:

Creating repo

I am not going to go into setup up your device with IDE, Node, etc. But if you have all that setup creating a repo is almost too easy. It only takes two commands to get a repo setup on your computer.

First, install via npm:

npm install -g expo-cli

Then create a repo with the name of your choice:

expo init and-yes

I chose to init my repo with tabs (TypeScript) because I prefer Typescript and as I am completely new to react-native I thought it would be good to start off with just a bit of a skeleton.

Running the app

Expo will take a few minutes to initialize your repo and install the required npm packages. Once completed I have a repo with some sample components to get me started. I can run one of the following commands to run my app:

As I have not setup Android Studio or Xcode locally yet, I therefore can't emulate a mobile device at the moment. Meaning i can't run "npm run android" or "npm run ios". I will set this up later, but the Youtube video I linked at the top, gives a nice step-by-step guide on how to do this.

This still leaves me with two ways to run the app. I can run it in the browser locally with:

npm run web

This opens the simple init app with a couple of tabs and not much else. It's all very dark as I am a big fan of dark mode ?? If you do this you might have an app that will burn your eyeballs with bright white light ??

Another option is to run it on your own device with an app called "Expo Go", if you have this then you can run:

npm start

This gives you a QR code:

On my iPhone I can simply scan this with the camera:

This will open Expo Go, install the app, and voila:

Yay, I have an app ?? Well, at least the base framework, this was probably the easiest step.

Node package versions

One last thing that I am going to do is to lock all the version dependencies in my package.json file. This is not a mandatory step, but a strong preference. If the version number is prefixed by ^ or ~, the node framework will automatically pick up any minor version upgrades available when you run npm i. You can read more here about how it does this exactly (https://nodejs.dev/learn/semantic-versioning-using-npm).

By default, a lot of the dependencies are set to allow minor upgrades. I have spent too many hours of my life trying to figure out why my code stopped working. Just to find out that some minor release did not support my OS or introduced a bug for my specific setup. Hence, I am going to be very static and lock myself in. I can later look at how to review any new versions in an automated way.

I had to bump some of the versions after removing the ^ and ~, your IDE should give you a hint as to what version to bump to.

That was all for this time! ????

Stay fresh and remember to enjoy life!

Next: Product Board and Ideas