Styles Exercises
Exercise time: 40 minutes
Button Component
Even though iOS and Android have different
design guidelines, many apps have a consistent
UI across these platforms. We’ll be taking the
same approach in our app.
So, build a Button component with round
corners. Test this component in App.js.
- Background color: primary color
- Path: /components folder
Welcome Screen
Now that you’ve learned how to style your
components, it’s time to improve the welcome
screen of our app.
- Replace button placeholders with the Button
component.
- To make the Register button green, extend the
Button component to support different colors
as follows:
<Button color=“secondary” />
- Tagline should be be separated from the logo.
- Optionally, you can make the background
blurry by setting the blurRadius prop of
ImageBackground.
Card Component
We’ll display our listings using cards. So, build
a Card component that can be used as
follows:
<Card
title=“…”
subTitle=“…”
image={require(“…”)} />
- Background color: #fff
- Test the card on a View with background
color set to #f8f4f4.
- Use jacket.jpg for the image. I’ve included it
in the supplementary materials in this lesson.
Listing Details Screen
This screen shows the details of a listing. In the
future, we’ll improve this screen and add a
contact form and a map to this screen.
View Image Screen
Replace the icon placeholders with
MaterialCommunityIcons.
- Close icon’s name: close
- Delete icon’s name: trash-can-outline
