Build a Reusable React Native UI Component

[00:00] There's nothing dividing each of these items from one another. What we're going to do is we're going to create another reasonable component that we'll use for each view to separate the different items in our list. Let's create another folder called "Helpers," because we're going to have a few of these.

[00:14] Inside this folder, let's create a separator.js file. Then we're going to require React. We're going to get view and style sheet equals React. Then, I'm going to have just a small styles object. We're going to do StyleSheet.create. Separator height is going to be one. Let's do background color E4E4E4, a flex of one, and a marginLeft of 15. We get that nice iOS feel.

[00:53] Now, we're going to create a class called "Separator," which is going to extend React component. Then, all we're going to render is this view which has a style added to it, then, of course, module.exports=separator.

[01:12] Now, what we could have done is we could have created this styles sheet over and over again for each component we use to separate it, separator in. What I like to do is just create a component. What we can do is inside of our profile page, we can require Separator.

[01:33] Now, right here, we can throw in this separator component. What it'll do is we're mapping over this. For each one, every time we throw out a title and that value, we'll also throw in a separator. Let's see if this worked.

[01:53] There we go. There's our separator, now. What's nice about this is now we can use this. We will use this and every other component that we build.