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.
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.
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.
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:
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 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.
