React Native through the lens of a React Web App developer
I have recently started converting a few of my React web apps to React Native and I’ve really enjoyed how straight forward the process has been. Most of the learning has just been finding out which HTML tags correspond to which React Native components. Any logic of state or loading of external resources can stay the same, because you’re still using React (at least for the use of Hooks which is what I’ve used so far). I though I would share what I’ve learned so far for anyone else who wants to convert their web app to Native. I’ve barely cracked the surface with React Native, so this will mostly just go over components that can replicate your HTML and bring your web app to a mobile app.
<View>
The first component I’m going to discuss is the View component. Most of your components you will make are going to contain one or more Views. This is essentially your <div> tag in HTML. It is a container that will hold your other components and information you want to display. By default, Views have a flexbox style of layout. For web apps the default flexbox flex direction is row, however in React Native the flex direction is column by default. So if you are converting an app you may have to take care to switch the direction back to row manually. If you have not used much flexbox styling before in your web apps this is a great place to learn! I hadn’t had much experience with it, mostly just using libraries for styling, but through converting apps to React Native, I’ve got a much greater grasp on it.
<Text>
The next most or maybe equally important component that I’ve learned is the Text component. Because React Native is not HTML you can’t just type text between your View tags and have it shown on the screen. You want to wrap all text into a Text component which is also where you can add any styling to the text.
<StyleSheet>
I’ve already talked a bit about styling, so it’s probably best to talk about the StyleSheet component next. Because this isn’t a web app, there isn’t any CSS sheet that you’ll use to modify the style of different components and HTML elements. You are able to style inline on each component, but as your component grows you’ll want to use the StyleSheet component to set up style classes. This can get repetitive as you have to attach the styles to each component individually, but you can also set up templates instead (an example of this can be found in the React Native Text documentation under Limited Style Inheritance). By creating a variable, typically named styles, that holds a StyleSheet object, you can set up different keys for different styles. The styling names are basically the same as CSS, though with camel case names instead of kebab case.
<FlatList>
Often in a web app, we will gather an array of data and then use a map to display it on the page. You can do this in React Native as well, but I ran into some issues with scrolling once the data outgrew its View. What I learned is an option instead, is to use a component called FlatList. Creating a FlatList to display the data is very similar to using map, but fixed the scrolling issue and with the key extractor prop allows you to avoid any annoying React key warnings.
<TouchableOpacity>
The last component I’ve been using is the TouchableOpacity component. This component is designed to respond to touches, by making the opacity dim when pressed. Because of this reaction, they work well as buttons. Similar to buttons, you can give it a function to fire off when it is interacted with. On a button you would use its onClick to determine the action to take, but with TouchableOpacities (and I think everywhere else you would use an onClick) you use an onPress.
Learning just these five components allowed me to replicate pretty much all of the look and functionality of my simple web apps. I look forward to continuing to playing around with and learning React Native in future projects. For an example of a completed conversion, please see the code below for the movie component of my OSCARS checklist web app (using Material-UI for styling) and the converted movie and nomination components for the React Native version.
Web App:
React Native: