Reworking a web app with React Native, Part 2: Presentational Components and Static Pages
I’ve been working for almost two months building a React web app, and while it’s still a work in progress, I wanted to start teaching myself React Native to work on building an app version as I go along. You can read more about getting started with installing React Native in Part 1.
In this post, I’m going to focus on walking through making basic updates to my app, using the home page as an example. In my web app, the home page was several presentational components, including some information about the app and the nav bar.
First, I’m just going to tackle the information on the home screen. I’m working on this project already familiar with core React concepts and having built out a basic web app, so it’s pretty simple for me to follow along with scaffolded React Native code. In upcoming posts, I’ll be looking more closely at key differences between React and React Native and how to create components strategically, but for the purposes of this post, I’m really just going to get the information updated.
What’s there so far
Right now, as a reminder, I’m using Expo. This allows me to view changes on my phone, rather than using something like an iOS or Android simulator on my computer, although both of those options will work as well.
This is the default screen when you create a new project.
Then, I opened up the code to take a look at it and start working through which components were connected to which functionality, and start figuring out next steps.
Like this, there is a distinction between components and screens. I may end up restructuring my files later, but for now, I’m going to go along with the pattern that’s here and work on just updating the home screen file.
And finally, here’s what the web version of my app looks like on the welcome page.
I want to convey the same information (all the text will be the same), and then work on styling it in a way that makes sense and is easy to read, which I’ll cover in an upcoming post.
Updating Text
First, I focused on just getting some of the text on the page to update, working within the structure of the existing component.
This portion of text corresponds with the following screenshot on mobile.
I deleted some of the text that was there, and simply copy and pasted the text from my web app into the location.
My screen did not automatically reload. When this doesn’t happen, you can click a link for help. The link suggested downloading Watchman (which I already installed) or simply closing and reopening the app.
That did the trick for the first update. I then shook the phone, which opens the developer menu, and disabled and then re-enabled live reloading. This solved the problem going forward.
Formatting Notes
There’s some great documentation about getting going with formatting your text with React Native here.
One of the first problems I ran into was this very red but not particularly helpful error screen when I tried to add more text into the main body of the screen.
I realized that the problem was that I was using <br></br> tags to split up sections of text within the component like this:
When really I should have continued to use the <Text></Text> tags. Formatting and padding can be added later below.
Essentially, the text on the home screen (or any static screen) should follow a pattern something like this.
<View style={styles.container}>
<ScrollView
style={styles.container}
contentContainerStyle={styles.contentContainer}>
<View style={styles.welcomeContainer}>
<Text> WELCOME TO LEVEL </Text>
</View> <View style={styles.getStartedContainer}>
{/* {this._maybeRenderDevelopmentModeWarning()} */} <Text style={styles.getStartedText}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text> <Text style={styles.getStartedText}>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</Text></View>
There aren’t too many functions in the home screen component, but one that I found unnecessary was _maybeRenderDevelopmentModeWarning(). This function is responsible for checking to see whether or not Development Mode is enabled in Expo, and links to information about how it might affect the speed of your app as you’re developing it.
For the sake of writing efficient code and eliminating unnecessary lines right away, I deleted it and commented out where it was called in the component. I find deleting extra code as soon as I come across it helpful when using a scaffolded app, although it is important to be sure you’re not deleting a function that might be used elsewhere in your program in a non-obvious place.
I also added a quick title (again, without any real formatting) and got rid of the image icon. I am planning on creating my own design to add in later, but now, I’m mostly concerned with getting information on the page.
And finally, all my text on the screen!
And that’s pretty much it! Getting the simplest presentational information updated on the screen is not too difficult, and it’s a great place to start.
Coming up in future posts
- A closer examination of differences between building out components with React vs. React Native, and structuring files
- Navigation Bar
- Forms
- Styling
