Creating and styling components

It’s time to create some real components! Let’s start with the home surface.

I like to 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>:

// …
  headerTransparent: true,
  headerTitleAlign: "left",
  headerTitleStyle: {
  paddingTop: 140,
  paddingBottom: 40,
  textAlign: "left",
  fontWeight: "bold",
},
// …

As we analyzed the home surface before, we know we need to create two parts of this surface: a list of avatars and a list of cards with images...