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

Challenge: Adding StylesChallenge: 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.

If you haven't saved our previous progress or prefer to start from the beginning, you can use the following GitHub repo as an entry point.

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
course content

Course Content

Foundations of React Native

1. Introduction

GreetingCourse ObjectivesCourse PrerequisitesEfficient Learning

2. Basic Concepts

Setting up the ProjectReact Native ComponentsView and Text ComponentsImage ComponentStylingChallenge: Adding StylesTouchableOpacity ComponentScrollView ComponentRendering Data ListsChallenge: Interactive Resort ListQuiz

3. Common Principles

StatePropsChallenge: Props and StateNavigationStack NavigatorTab NavigatorHooksQuiz

4. Advanced Concepts

Switch ComponentActivityIndicator ComponentModal ComponentTextInput ComponentChallenge: Dark/Light Mode Toggler with Activity IndicatorQuiz

Foundations of React Native

Challenge: Adding StylesChallenge: 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.

If you haven't saved our previous progress or prefer to start from the beginning, you can use the following GitHub repo as an entry point.

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
some-alt