Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Challenge: Adding Styles | Basic Concepts
Foundations of React Native
course content

Course Content

Foundations of React Native

Foundations of React Native

1. Introduction
2. Basic Concepts
3. Common Principles
4. Advanced Concepts

Challenge: Adding Styles

Challenge time!

Now, it's your turn to implement styling into our current app. Follow these steps:

Steps

  1. Import StyleSheet from react-native;
  2. Initialize styles with StyleSheet.create();
  3. Specify the following class names with their respective properties and values:
    • container: flex: 1, justifyContent: "center", alignItems: "center", backgroundColor: "#00FFAB", flexDirection: "row",;
    • text: fontSize: 18, color: "#913f92",;
    • image: marginLeft: 10,.
  4. Apply the created class names to the appropriate UI elements:
    • Apply container to the View;
    • Apply text to the Text;
    • Apply image to the Image.

We should see the following result after implementing those changes.

Execute the command in the terminal to copy the project and start working on the challenge.

Go to the createdd folder where the project files are located.

Install the necessary packages.

To start the app and see the initial appearance, run the following command in the terminal:

If you encounter any difficulties during the challenge implementation, we recommend checking the following recording with a step-by-step guide on how to do everything. Good luck!

In Practice

Everything was clear?

Section 2. Chapter 6
We're sorry to hear that something went wrong. What happened?
some-alt