Common React Native App Layouts: News Feed

Welcome back to this series, in which you're learn how to use React Native to create page layouts commonly used in mobile apps. The layouts you're creating won't be functional—instead, the main focus of this series is to get your hands dirty in laying out content in your React Native apps. 

If you're new to laying out React Native apps or styling in general, check out my previous tutorial:

To follow along with this series, I challenge you to try recreating each screen by yourself first, before you read my step-by-step instructions in the tutorial. You won't really benefit much from this tutorial just by reading it! Try first before looking up the answers here. If you succeed in making it look like the original screen, compare your implementation to mine. Then decide for yourself which one is better!

In this final tutorial of the series, you'll create the following news feed page:

news feed page

News feed layouts are used to present information in such a way that it can be easily scanned. Most of the time it's presented in a list format with the title, excerpt, and optionally a preview image that represents each news item. 

Here are a couple of examples of this type of layout being used in the wild:

news layout hacker news app
news layout Medium app

Project Setup

The first step, of course, is to set up a new React Native project:

Once the project is set up, open the file and replace the default code with the following:

Create a src/pages folder and create a News.js file inside it.

You'll also need the react-native-vector-icons package. This is specifically used for the back icon in the header.

Open the android/app/build.gradle file and add a reference to the package:

Do the same with the android/settings.gradle file by adding the following at the bottom:

Open android/app/src/main/java/com/react-native-common-screens/ and import the package:

Lastly, initialize the package: 

Creating the News Page

Okay, now that you've tried to code the layout yourself (no cheating, right?) I'll show you how I built my implementation.

You must have noticed the trend by now. I've arranged these according to difficulty—or at least according to what I found difficult! So this final screen is basically the big boss among the other screens that you've created so far. Fret not, though, as I'll still be guiding you step by step.

You will need a few images for the preview image of each news item. I've added some images in the repo that you can use if you want.

Start by adding the boilerplate code: 

This time there's a new component named NewsItem (src/components/NewsItem). As the name suggests, it is used for rendering each news item. We'll come back to it later, but first take a look at the constructor() function. Just like the gallery screen earlier, this uses the state to store the data source for the news items. The titles and summaries are from the New York Times, but the images are from Google Images (and are labeled for reuse by their respective owners).

The content is divided into three parts: the header, the instruction text, and the news items. The header is very similar to the header from the calendar screen earlier; the only difference is that instead of three, there are only two visible elements. (If you want a refresher on how the calendar screen was made, go ahead and read over that tutorial.) 

I say "visible" because there are actually three elements—the last one is just hidden! This allows for easy centering of the text in the middle. If you just have two elements in the header, it's tricky to figure out how to divide space between the two elements and still have the middle one appear centered. But if you have three elements, each one can have the same flex value, and you can just use textAlign to position text or alignItems to position View components.

The renderNews() function is the one which loops through all the news items in the state and renders them using the NewsItem component.

Next up is the code for the NewsItem component. Start by adding the boilerplate React component code. As you've seen earlier, this component accepts the keyindex, and news as its props. You only really need the index and newskey is just React Native's way of uniquely identifying each row in a list. You need to supply it every time you use for rendering; otherwise, it will complain. 

When you use functional components, the props are passed as a single argument. Below, the individual props are extracted using destructuring assignment, so { news, index } basically extracts the news and index properties from the props. From there you can get the number to be rendered.

If you look at the screenshot from earlier, you can see that each news item can be divided into two groups: one that displays the news text (number, title, and the excerpt), and one that displays the feature image. 

That solves the problem with the feature image since it's just one element. But for the news text, you still have to divide it further. As you may have noticed, the number is in the same position even if the title has a pretext (e.g. "Gray Matter"). The pretext also has a different styling from the title and the number. 

Using this knowledge, you can deduce that the number, pretext, and title shouldn't be lumped together in a single container. Furthermore, the pretext, title, and excerpt look as if they're vertically stacked so you can put them inside a single container. Only the number should be brought out. With that, you'll arrive with the following markup:

The getPretext() function allows you to conditionally render a Text component only when a news item has a pretext in it.

Here's the onPress function. All it does is alert the news title, but in a real app this should navigate to the actual article:

At this point, the page will now look like this:

news page initial look

Now, add the following styles to the News page:

I'll no longer be walking you through what each line of code does since it basically applies the same concepts you've learned in the previous tutorials in this series. Here's what the page will look like once the above styles are applied:

News Page news page styles applied

Next, add the styles for each news item. Each news_item has a flexDirection of row so that the news text and the featured image are all on a single line. news_text occupies two-thirds of the available space, while news_photo occupies the remaining space.

News page text and preview image aligned

Next, you need to add the styling to fix the issue with the text overlapping with the preview image. You can do that by assigning a flex value to the children of the news_text. A flex value has already been assigned to news_text, but since a View has been used inside it, you also need to assign a flex value to those so that they won't go over the bounds of their parent View

We'll assign a flex value of 0.5 to the number, while text_container will have a value of 3. With these values, the text_container will occupy six times as much space as the number.

News page added text alignment styles

Now all you have to do is to add the final touches to style the text:

And don't forget to export the component!

Final Thoughts

That's it! In this final part of this series, you learned how to implement the layout commonly used in news pages. This tutorial brought together all the things that you've learned in the previous parts of the series. You've used both flexDirection: 'row' and flexDirection: 'column' to complete the styles for each news item. You also used your knowledge in aligning images for the preview image.

If you have tried to implement these layouts on your own, failed, and then tried again, you should already have enough skill to implement any kind of layout. You can apply the things you learned in here to implement even the complex layouts that you commonly see in popular apps. If you want more practice, try recreating the layouts you see in popular apps such as Facebook or YouTube. 

How did my solution compare to your own? Let us know in the discussion forum below. And in the meantime, check out some of our other tutorials on React Native and Flexbox.



Related Articles