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

Already subscribed? Sign In

Autoplay

    Build a Reusable React Native UI Component

    Tyler McGinnisTyler McGinnis

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

    react-nativeReact Native
    0.3 - 0.53
    reactReact
    0.14 - 16
    Code

    Code

    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
    Transcript

    Transcript

    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.

    Discuss

    Discuss