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.
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>
:
Get hands-on with 1200+ tech skills courses.