Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.


    Build a Reusable React Native UI Component

    Tyler McGinnisTyler McGinnis
    react-nativeReact Native
    0.3 - 0.53
    0.14 - 16

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



    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson




    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.