Search⌘ K
Home
Courses
Simplifying State Management in React Native

Creating and Styling the Feed Surface

Explore how to build the Feed surface of your React Native app by creating and styling components such as ListOfAvatars and ListOfCards. Learn to use FlatList for horizontal and vertical lists, handle placeholder elements, import images, and apply basic React Navigation styling. This lesson helps you understand organizing and rendering components within a parent view to form a cohesive screen.

We'll cover the following...

It’s time to create some real components! Let’s start with the home surface (which is also our “Feed” surface).

Creating the home surface

We will work from top to bottom, so we will start with the header. Our free design template includes the app name (“Socially”) and a bell icon at the top of the “Feed” surface. We won’t be implementing notifications in our example app, so we’ll overlook this part of the design file. Adding styles to the header is done through React Navigation. We will add the following properties to <Tab.Navigator>:

Javascript (babel-node)
// ...
// Making the header transparent for a modern design
headerTransparent: true,
// Aligning the header title to the left
headerTitleAlign: "left",
// Styling the header title with additional spacing, left alignment, and bold font
headerTitleStyle: {
  paddingTop: 140,      // Adjusting top padding for title positioning
  paddingBottom: 40,   // Adjusting bottom padding for title positioning
  textAlign: "left",   // Aligning text to the left
  fontWeight: "bold",  // Applying bold font style
},
// ...

As we analyzed the home surface before, we know we need to create two parts of this surface:

...