How I learned react native in 1 day?

Excited, Umm!!

OK. As a frontend web developer, switching to the mobile platform is a bit nervous and uncomfortable initially, but in my case. it is even worse. Suddenly I got a call from one of my connections and they ask me to build a couple of screens in react native with some basic functionality. I think twice and finally said OK, Because I haven't touched react native before.

BTW, I do plain react all day... every day!

I heard from many people that react on web and react in mobile is more or less the same. A little confidence was gained for 2 min. But I know it takes a little effort to finish the task.

I jumped straight into the code editor and started coding react native.
What do you think, did I succeed?

Hell Nooooo!!!!

I got stuck at the beginning itself even positioning things properly. It took me 2 hours to debug the code for simple navigation.

Later I realized, Probably the syntax might same in both, But implementation is a bit different.

React web

 function Mock(){
  return (
     <div>
        <p>React web</p>
     </div>
   )
 }

React native

 function Mock(){
  return (
     <View>
        <Text>React web</Text>
     </View>
   )
 }

The above code snippets will tell you the similarity between react and react-native.

Then the most exciting part begins. I opened react-native documentation without giving it another thought. But Setting up react native in our local system is time-consuming. Thanks to my connection, I was supposed to work on a remote system where the project is already created.

In the documentation, I only search 2 topics

• Navigation
• Flexbox

All the styling part is pretty normal and easy to do. As you can see in the above code snippets.
Even a non-react web developer can play with CSS styling.
Once I have gone through topics, I have got a good understanding and even create some mockup screens in the stack. expo.dev tool. It is really helpful when practicing react-native. It is an online editor specially made for react-native.

A confident me.. going back and connect to the remote system.
This time.. you know what happens!

Happy connection and happy me :)
Happy coding!!

Moral

“If somebody offers you an amazing opportunity but you are not sure you can do it, say yes – then learn how to do it later!”