This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

React Native: Build a Separator UI component

2:02 React lesson by

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

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

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

Avatar
Peter

I started getting an error "cannot adjust current top of stack beyond available views" which drove me crazy for about an hour. After painstakingly comparing my code to the github repository, I realized I misspelled "Separator" (actually you misspelled it :-) ) and when it came time to use it in render, I spelled it correctly. The two names didn't match and I got that error.
http://stackoverflow.com/questions/30007008/react-native-on-ios-cannot-adjust-current-top-of-stack-beyond-available-views

In reply to egghead.io
Avatar
Tyler

Hi Peter. Good catch. Sorry about that. Looks like the video got it right but not the repo. I made the fix.

In reply to Peter
Avatar
Charles

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

Thanks

Avatar
Tyler

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.

In reply to Charles
Avatar
Charles

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?

Avatar
Charles

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

In reply to Charles

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.

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.

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.

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.

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.

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.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?