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
- 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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
(Locked)
Responding to touches2m 30s
-
(Locked)
Using a touchable highlight3m 23s
-
(Locked)
Extracting a custom component3m 16s
-
(Locked)
Importing a custom component2m 10s
-
(Locked)
Using a flat list2m 20s
-
(Locked)
Creating a form3m 27s
-
(Locked)
Collecting input4m 26s
-
(Locked)
Creating a custom hook3m 20s
-
(Locked)
-
-
-