Coming from a JS background and working with React JS for more than four years can give any web developer enough confidence to start developing native applications using React Native. And indeed, React Native documentation is way better than what original React for web documentation used to be a few years ago.
React Native has always been on my list of technologies I want to explore and learn well enough to become constructive. But I never got the chance to explore the technology deeply until my organisation’s requirement came up.
React Native seems familiar
Writing React Native code is easy for any React developer. There are a few things that differ and can take a few days to get familiar with them. The “Markup Mindset” of web developers can get them started with the UI part quickly.
Knowledge of CSS is 80–90% transferable with a few syntax differences and very few conceptual differences that developers eventually figure out on their own. React Native call its styling mechanism “Style Sheet” and is made in a way that makes it easier for web developers to style the UI.
Inertia of pages
In React Native, each screen has a name similar to the path/route for web pages. The concept of screens in the native world is similar to pages in the web world. But this similarity is just a visual similarity.
I don’t want to throw some code examples here but just for a glimpse here is a quick conceptual example.
- You have two applications, MyWebApp and MyNativeApp
- Both applications have two pages only, one with an input form and the other with a form submission success/failure message.
- Page one i.e. the form page is meant to fetch some validations on load. So in a basic scenario, you will put this API call into useEffect.
- Now you open the network tab in the developer’s console to see the API call.
- Your web application called the API on app load i.e. when /form route got loaded. You submitted the form and got a success message i.e. the second route /form-report got loaded. Now you pressed the back button i.e. you again loaded the /form page. Hence, the useEffect made another API call.
- Now you repeated these steps on your Native application and noticed that on going back from the form-report screen to the form screen, the API call wasn’t made. That is because the useEffect is not being initiated.
This is just one of the “strange” things for React Web developers.
These are just your first few days
Your “Oh”, “ah ha”, and “Gotcha” moments will keep on coming as you will spend more time with React Native.
Now, I am not a React Native expert but you will keep on hearing from me about React Native and that too through my web development experience.
I am open to discussion on the same on LinkedIn!