Build a Reusable React Native UI Component

Tyler McGinnis
InstructorTyler McGinnis

Share this video with your friends

Send Tweet
Published 7 years ago
Updated 3 years ago

In this lesson we'll create a reusable React Native separator component which manages it's own styles.

[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.

Charles
Charles
~ 7 years ago

Could you tell us how you get autocomplete at 1:30?

Thanks

Tyler McGinnis
Tyler McGinnisinstructor
~ 7 years ago

I cut out the part of me typing it all out so the video flows easier and the viewer doesn't have to sit and watch me type :) I agree though, that would be an awesome IDE feature.

Charles
Charles
~ 7 years ago

Thanks for the quick reply!

I have another question. I had React.propType.object.isRequired instead of React.PropType.object.isRequired (minor typo) and it was really difficult for me to debug. The exception error did not give me any information about whereabouts the error was occurring. The stack trace was useless. The exception I got was "Cannot read property 'object' of undefined." Is this just the current state of React/React-native or am I missing something?

Charles
Charles
~ 7 years ago

Nvm! I was able to locate what was causing the error by Enabling "Pause On Caught Exceptions" on Chrome Debugger and stepping through it.