As a React.js developer, what is React Native like?
August 30, 2021 - 2 min
If you are a React developer you may have considered using React Native, one of the most popular frameworks for creating cross-platform mobile apps. Let's look at how the developer experience for React Native compares to React.js.
Some key differences
No more divs - everything is a View component - Because we are no longer in the web browser, we can't assume all HTML is valid, including the div element. Instead you can think of the <View />, imported from react-native, component as its equivalent.
Everything uses flexbox by default - Yes, everything has display:flex and there is no grid! And if you try to use display: inline or display: block you'll get an error. The only other valid display option in React Native besides flex is none. Also the default for flex-direction is column while in browsers it is row.
Instead of pixels, use numbers or percentages - Instead of giving that text a font-size of 12px you would use a number, like 12 or a percentage, like 8%.
onClick is called onPress - When adding an onClick to a button you would get an error! In React Native the prop is called onPress.
No more inspect element tool - Because we don't have all the fancy devtools of the browser, debugging can be harder, especially without the inspect element tool to debug styling. However, there are still many debugging options that cover most areas.
Web component libraries won't work - Your favorite component library in the web will not work in React Native, since the web uses HTML that won't work in React Native. The component library I landed on is React Native Elements but there are mulitple options.
Some things are the same
react-router-native exists - If you want to continue to use a routing framework similar to React.js, you'll be happy to know react-router has a native version that works the same way.
You can also use styled-components - If you're used to using styled-components you can use it in the same way. However, using React Native's StyleSheet, the standard way to add styling in React Native, might be easier in many cases.
Conclusion
At the end of the day you are still going to be writing "React" code with props, state, hooks, and JSX. To me it feels about 95% the same as writing normal React code where the main differences are related to styling.