From the course: Learning React Native

Unlock the full course today

Join today to access over 22,600 courses taught by industry experts or purchase this course individually.

Extracting a custom component

Extracting a custom component

From the course: Learning React Native

Start my 1-month free trial

Extracting a custom component

- React allows us to isolate our code into reusable components. In the last lesson, we composed several components to created a single color button. So some button that displays the name and swatch of a color and is also clickable. Clicking on the color button actually changes the background color. Let's move this code into a reusable component called the color button. I'll create a function for the color button and we will copy and paste the entire touchable highlight and we'll return it from the color button function. Every color button can't be yellow, so we're going to need to take in the color from the color button as a property. I'm going to add a property called background color. I'm not going to hard code the background color of the swatch to be yellow. We'll get that from the prop. Additionally I'm not going to display the word yellow. I'll display the value of the incoming background color property. Now we…

Contents