Going React Native: Differences Between Mobile And Web Development In React
After learning how to use React at Flatiron School’s software engineering bootcamp, the first thing I planned to do after graduation was to check out React Native.
It turns out that building mobile applications in React Native is incredibly similar to building web applications in React. The only significant difference (for the first-time user anyway) is in how you code the compositional elements of the user interface.
Because we’re no longer in the browser, we’re not able to use JSX to build our interface. Instead, we use prepackaged components built by the good people behind React. These components emulate JSX in a lot of ways and are pretty simple to use.
Ignore what’s going on with the
style prop for now. The important thing to notice is that the
TextInput is controlled just like a form input is in JSX. I’ve also wrapped the input in a
View component, which is React Native’s version of a
div. All UI components are imported from the
react-native module. You can take a look at all of the basic components in the documentation, as well as iOS- and Android-specific components.
This takes a little getting used to. For example, to create buttons you use either
TouchableHighlight wrapped around whichever components you would like to include in your button. But overall it’s a fairly shallow learning curve.
As you can see, the syntax is just like writing in-line
style in JSX. The major difference is in the numeric values after
fontSize, etc. In React Native, there are no units like
This is a little bit of a limitation, but I think the
Dimensions component (used in line 19 of the above example) solves a lot of the problems that stem from that limitation. With
Dimensions, you can easily access the height and width of the window to build responsive interfaces.
Flexbox or Bust
If you take a look at
inputContainer at the bottom of the above example, you’ll see an interesting property called
flex. In CSS, you have a choice between grids or flexboxes. In React Native, there are no grids, only flexboxes.
The value assigned to the
flex property determines what fraction of the flexbox the component takes up. Let’s take a look at an example to see what I’m talking about:
The sum of the items’
flex values is 6 (the container’s
flex value is not included). Therefore,
itemOne will occupy one-half of the flexbox (3/6),
itemTwo will occupy one-sixth (1/6), and
itemThree will occupy one-third (2/6).
Unlike CSS, React Native flexboxes default to
'column'. This is why I’ve set the
flexDirection explicitly to
justifyContent properties, in my example, are centering the items vertically and horizontally.
For more on flexboxes, check out the React Native documentation as well as the ever-helpful CSS Tricks.
Phone vs. Browser
While the differences I’ve outlined above take some getting used to, the most significant difference between React and React Native for me stems from the inherent differences between how a user interacts with a mobile application versus a web application.
In mobile development, you have a lot less real estate than in the browser. And you end up using that real estate differently than you do in the browser because the user is interacting with their fingers rather than a cursor.
This interaction is a lot less precise so you have to provide a lot more space for buttons. This in turn limits the amount of options you’re providing to your user in any given screen. You can see how the UI/UX decisions and tradeoffs change in this new environment.
I think it’s really helpful to start with the Expo client app. There are limitations to using this, but it allows you to immediately use your application on your own phone and see how your UI translates.
Overall, my experience transitioning from React into React Native was much smoother than I had anticipated. I’m blown away by how powerful a tool React is for development and encourage anyone who feels comfortable with the fundamentals of web development in React to try their hand at mobile development with React Native.