As a React.js developer, what is React Native like?
August 30, 2021 - 3 min read
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
column while in browsers it is
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
onClick is called onPress - When adding an
onClick to a button you would get an error! In React Native the prop is called
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.
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.