When creating an app, you often need to reuse certain UI elements. Adding styling to the components directly without grouping these elements into components can lead to inconsistencies. It’s a good practice to create custom components that apply this styling within your app.
Creating custom components is similar to React. We can create a function and render it as a component. When creating a custom component, it’s important to think about the features it needs to support. Components with just a single or a few features are easier to reuse in multiple places.
Breaking your design into smaller reusable components is subjective. There is no “one size fits all” solution. To read more about the process of breaking up the design, read the Thinking in React guide.
Let’s start by customizing our previous box examples.
Instead of applying the inline styles every time we need a box, move a single view with fixed dimensions and background color to the
Great, we have a reusable custom component!
Now we need to add a property to allow changing the color of the box.
Add a property called
color to the box component that sets the background color.
Awesome! With that property, we support changing the color to individual boxes.
Now implement this
Box component in our
App using the same colors red, green, and blue.