I have around 1 year of personal experience with React (personal projects and some freelance), and I had heard about React Native for a long time. But it always seemed so scary, because creating a mobile app has to be insanely hard, right??

Well, that was my thoughts going into my first React Native project. Then, when I started looking at the documentation, I quickly realised that it is actually not so different from "website React". I started becoming more optimistic.

Hello world by Expo

So I started coding. After some back and forth, I managed to spin up an expo project. And it wasn't even that hard. Expo is an extremely good option for people who just want to get started with React Native and see that "Hello world" on your phone for the first time. You can even publish the project online and your friends can see the app on their own phone. All for free.

Anyways, since I had started on this project on regular React before, I knew exactly what I had to do in my Native app. All the components, folder and file structure, custom hooks, everything was already created, so this should be easy, right? Right?

Wrong.

The differences in UI

All of the logic, functions and custom hooks were no problem. It was basically just copy paste all the way. But the UI? The easy and perfect Material UI (or MUI) design my app had, that was gone. And it was not coming back easy. It was a few problems that was (and still is) pretty hard:

- Finding a good UI framework:

This made my appreciate the website React ecosystem so much more, because you have and extremely large numbers of ui frameworks/libraries to choose from. And they are filled with components. I started using React Native Elements as my UI library, but I quickly found out that was not enough. They have a lot of the basic UI components, but not nearly enough. So for me, I am using a mix of React Native Elements and CSS.

- The React Native core components:

The are many new components that you need to get used (I am not), like View, ScrollView and FlatList that are gonna take some time to learn.

- CSS properties:

There are also some differences in the css properties you can use in React Native compared to the browser. As I am a fresh web developer who only has experienced the modern css with flex, grid and all the other good stuff that all the browsers understand, it is not the same with mobiles. Some of the css properties are not there, and many others have different names.

- IOS/Android compatibilities:

React Native is really good when it comes to this aspect. I can write react code, and both operating systems can understand it almost perfect. But just almost. There are times when you have to do a little JS to render different components/css styling depending on which operating system the phone is using.

Learn by failing

As this is my first React Native app, I am very satisfied and happy to see how far my app has come. It is definitely hard getting started, and a lot of information to absorb at. But that is often the case in web development, and that is also one of the reasons I love the journey. There is so much to learn. Can't wait to dive deeper into React Native and not just copy/pasting UI code from Stackoverflow.

If you have any comments, questions or I wrote something wrong, don't hesitate to comment/get in touch.