React Native has always been in my learning list for a very long time. I have been working with React around 2 years, so I thought it would be a good time to learn React Native and see why it has become so popular.

In the first few weeks before learning React Native, I did some research about learning and what would be needed to learn it efficiently and build my own apps which I can publish to the play store and app store. Many of the articles online use an online application called Snack, which is good if you are beginner. The next few weeks I bought and started learning this Udemy course React Native - The Practical Guide [2021 Edition].

I learned React from the same instructor and he is very good in explaining the concepts so well. He teaches every concept so well that even people who are very new to this concept can understand. But knowledge about React is crucial for a good learning experience.

Learning Struggles

I faced a few struggles in setting up the development environment, because for building iOS apps you need a MacBook which kind of took some time to get. So i focused only on developing only for android apps, because I could grasp the basics and try to build a real world app that works.

Firstly I focused on building a basic app and trying out various React Native built in Components. React Native has a variety of Components that we can use, that has a mapping with the iOS and Android native inbuilt classes. For example, View component from RN can be mapped as UIView in iOS and android.view in Android. This mapping is done by React Native which is very cool.

Understanding these concepts without prior knowledge of Java, Kotlin or Swift is really hard, it bring more complexity as the App grows. But soon I came to realise that I need to keep the React and React Native concepts and not confuse with the Android or iOS concepts. As this is the whole feature of React Native. Beginners like me who dont know any of the Mobile platform languages can easily grasp the concepts via React Native.

Knowing Java, Kotlin, Swift really adds extra value to your experience because you can always Eject your React Native apps in Android Studio or Xcode. You can add your own modules in the android project and then export them as React Native and you can use those functions in Javascript. Like this link provides a much more better understanding of that concept.

If you want to develop apps only for iOS you surely need a mac book, but if you want to also develop for Android on the same macbook, then it is recommended to buy a Macbook with Intel chip. Because the M1 chip is having trouble with the Simulator that exists in the Android studio. It will not be able to run without an Intel Chip. The developers have recently released a beta patch for that issue, but has still not been made live. But surely in the future developers would fix that issue.

Writing styles for individual components is really time consuming, so applying the concept of reusability will save a lot of time, when you are initially setting up the app. Like you could use external libraries for design. But I prefer my own styles. I also wanted to experiment with Tailwind CSS for React Native. It really works well. It has the similar development experience to React with TailwindCSS. I have written an article to that as well, that you can checkout here. One issue with working with Tailwind CSS in React Native is that it doesn't autocomplete your class names in VScode even though you have the extension installed. You need to know a few class names to use or you can always refer the the Tailwind CSS documentation.

Achievements

After few weeks of learning and experimenting I made a very small Android App in React Native, that I had published to the Play store. Post Viewer, is an app that just populates the JSON placeholder posts and when you click on the post it shows the post in detail and you can go back to the main page. I did a lot of experimentation on this app. Using this app as my experimenting ground I have started working on another App which will soon be available for people to use. It is more like a personal app idea that I had before when developing React web apps.

Conclusion

In conclusion Learning React Native as a whole is not hard, if you are good with React. Expo and Snack are very good tools that elevates the development experience. Its okay if you dont own a Macbook or an iPhone. If you are a learner then these blockers should not stop you from exploring.

One of the testing application that I found very helpful was Lambda Test. I have always used them for testing my React Apps. Recently they released a Beta for Mobile App Testing. All you need to do is sign up and you can use a limited number of mobile devices for testing both in Android as well and iPhone devices. Which is really helpful if you just want to see how you app will look.

There were few more tools I had used, I just want to share those as they could anyone else out there who may need it.

1. Miro - Prototyping and Brainstorming Tool
2. Figma - Popular UI Prototyping Tool
3. Framer - Similar To Figma, but has more tools for Mobile phone design