Scribd
Upload
6 views

Styles Exercises

Uploaded by

favourayuba341
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
6 views

Styles Exercises

Uploaded by

favourayuba341
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 5

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

You might also like