Going React Native: Differences Between Mobile And Web Development In React

Image for post
Image for post

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.

I was encouraged by the fact that React Native uses the same architecture as React and allows developers to write mobile apps in JavaScript. This meant that I wasn’t learning an entirely new framework or language. But I was still wary of trying React Native because I couldn’t help but think: how similar could they really be? After all, a phone is a vastly different environment from a browser.

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.

UI Components

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.

Controlled Form Input in React Native

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 TouchableOpacity or TouchableHighlight wrapped around whichever components you would like to include in your button. But overall it’s a fairly shallow learning curve.

Styling With JavaScript

The other major difference between React and React Native is in how you style your components. In React Native, everything is done in JavaScript, including style.

React Native StyleSheet

As you can see, the syntax is just like writing in-line style in JSX. The major difference is in the numeric values after height, margin, fontSize, etc. In React Native, there are no units like pt or px.

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:

Flexbox with Three Components

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 'row'. The alignContent and 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 faced the additional UI challenge of trying to squeeze a bunch of buttons around a PDF

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.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store