Transitioning from one domain to another is often overwhelming and confusing, whether you are looking for a job switch or want to get your hands dirty with certain technologies or like me, wants to explore.
In this blog, I'll briefly share how I got started with my first mobile app project. The problems I faced and the fixes.
In the beginning, I personally started with the simplest things like HTML, CSS and JS . With time I wanted to get started with MERN stack so, as suggested by most experienced people I learnt React and it didn't stop there. It took me couple months to be able to make a project with both client in React and server in Node , MongoDB as the database.
After making some projects, contributing to open source repositories, events like Hacktoberfest, participating in Hackathons, I thought of doing something different. Native mobile apps were out of option as I don't use macOS and Android Studio is ought to destroy my laptop for real ! Sorry , jk.
There were 2 options for me to get started with cross-platform app development. They were flutter and react native. For flutter, dart language is used. I, being familiar with React chose react native.
So, I found out from youtube and the official docs that react native is nothing different than react itself. We use react in web with the help of react-dom. In case of react native, we don't use the typical dom element tags like div, p, section, a, etc but we use pre-defined elements which are then converted to native elements for android and ios respectively. This is what happens over the hood.
To create a project, I used the explo-cli. It was suggested to use expo cli because it helps in a lot of ways :
- Not much manual configurations required to get started, which helps a beginner to actually get their hands dirty instead of fixing configuration bugs.
- Super fast. Expo makes the react project running in couple of minutes. This saves a lot of time for a beginner, who can focus on things which are more important.
- Now, the fun part. The app can be developed without android studio, xcode on your smartphone only. Expo go app is required to remotely develop the app.
How did I use Expo go ?
So, once I had created the project using npx create-react-native-app app-name
Note that, I couldn't use expo init, the cli asked the users to migrate to
npx create-react-native-appinstead.
Then, I moved inside the project dir by using cd my-app. I used the expo start command to start the metro builder. The UI for metro server is no longer shown so everything is to be done from the cli. I had installed the Expo go app and scanned the QR code shown in the terminal.
Note that, ios users need to scan the QR with their camera app.
That was it, my project was running on my smartphone !! Whenever I changed the contents in my VSCode, it was instantly reflected to screen on my smartphone.
There are few things to remember while using the expo go app
The remote device (smartphone) needs to be connected to the same WLAN network with the local setup (computer).
If there is an error, like java socket timeout, using the commandexpo start --tunnelwould fix it. This might be slower option but it works. This command requires a dependency@expo/ngrok.
I haven't gone through the debugging part yet, so I cannot tell. Apparently errors in code are reflected on the mobile screen, so one can fix it most of the time.
So, this was my experience. It might have been too long but I tried to keep it simple and to the point. Hope this could help my fellow developers to get started with their react-native journey.
If you find any problem or want to add something, comment down below so we work on it.
Top comments (0)