Creating and Styling the Feed Surface

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