Simplifying State Management in React Native/

...

/

Creating and Styling the Feed Surface

Creating and Styling the Feed Surface

Learn how to build app’s home surface by designing the header and creating components for avatars and image cards, each styled per the design.

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

Press + to interact
// ...
// 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 ...