Back to Articles

Gotchas for Web Developers Trying Out React Native

Published 2019-12-21

When I started working with React Native, I had a good understanding of how the React worked in the HTML browser context. Since I was familiar with React patterns, I thought I might have an easier time getting started with React Native development. I felt like that was true, but I wanted to share a few things I ran into while getting started.

Note: when I refer to "native code", I mean iOS/Android non-React Native JavaScript code. If your React Native project is an un-ejected/Expo project (ugh Expo is great I have such an appreciation for it), just ignore my fourth point and the bonus one, as it doesn't apply for you (yet).

  1. The inspector sucks

    • The in-app inspector in React Native is significantly harder to move around than the one for React Web.
    • You can use react-devtools to get a somewhat more workable tooling that works like the React browser extension, but it's not feature-complete either. You'll still need to debug with Safari for iOS sometimes and wrangle with the weird WiFi/host/port settings to switch between debugging in a simulator and a real device.
    • The React virtual DOM tree is going to have a lot more noise, since many library (or even core) components are made up of other components. You'll see all the abstractions in the tree.

  2. Throw out concepts of primitive HTML elements for React Native because they aren't the same.

    • React Native has its own "base" components that you'll build layouts with.
    • On the surface they seem like "equivalents", it's not really helpful to say "this HTML component is this in React Native" since you can't rely on them having the same behavior. To illustrate how this falls apart quickly:

      • View for divs
      • Text for spans
      • Image for imgs
      • ImageBackground ?
      • TouchableOpacity ??
      • ScrollView ???
    • Although a little time-consuming, I recommend spending some time playing with the base React Native components. It's helpful in building a new mental model for layouts in React Native.
    • Also, a lot of common mobile application UI/UX patterns are available out-of-the-box, so you can spend your time building features and not recreating native mobile experiences. https://facebook.github.io/react-native/docs.
  3. Somewhat related to above, not all CSS rules apply. To name a few:

    • Display types are flex or none. There's no inline, so get used to Flexbox properties.
    • The default flexDirection is column and not row.
    • Some properties that would "pass through", as you would expect to be able to do in the browser, doesn't in React Native.

      • An example is the inability to style children text color in a parent View.
    • Also to be accurate, these are not CSS but "Layout" properties in React Native. Many properties have familiar names with similar behavior, but you'll come across new ones like paddingVertical or aspectRatio. https://facebook.github.io/react-native/docs/layout-props
  4. Stay in JavaScript-land for as long as possible

    • Working in JavaScript-land in React Native is kinda like a warm cozy comforter in the winter that you don't want to leave.
    • React Native as a framework really shines when you can work within it. Mainly because working outside of it with native mobile code is so, soooo painful.
    • The native module abstraction (https://facebook.github.io/react-native/docs/native-modules-setup) is not very friendly, so expect to spend more time on it when you really need to implement your own bindings.
  5. Bonus: Keep your project up-to-date with the latest version of React Native

    • This isn't because your project will break overnight, but because eventually you will want to upgrade.
    • I found that upgrading React Native skipping several versions is sometimes a very painful exercise with a lot of fuzzing with native code. It's hard to track down what is breaking and what needs updating.
    • React Native has a tool to help with upgrading (found https://facebook.github.io/react-native/docs/upgrading), but it is a fairly manual process. You'll need to sift through all the diffs, determine what parts are project-specific, old React Native boilerplate, or new React Native boilerplate, and mash the project-specific and new boilerplate parts together.

Final Thoughts

React Native has its quirks, and even with prior React experience it still has a somewhat substantial learning curve. However, I actually found developing in React Native a pleasant experience overall, dare I say fun. Give it a shot!