In this section, we're gonna start to dive deeper into some more advanced concepts on how we can build our mobile applications using React Native. And we're gonna start getting into how we can customize our own components. Then we can create reusable components that we can call anywhere in the application, and really take advantage of using the React library, and the component-based architecture that React offers.

So far in this course, we have used a number of these React Native components, like text, and view, and buttons, with touchable opacity. In this guide, what I wanna do is, I want to show you how we can create our own custom component. And we're gonna be able to call it the same way that we call the view tag right here, and we're gonna be able to wrap content inside of that, and start adding our own custom styles.

In this guide, I want to simply start with the first part of that, which is to create a custom component that we can use, and then reuse throughout the application. We're gonna call it a container, and it's gonna be a layout that we can use on any screen that we need. So let's start by opening up the file system here.

You can see that we have all these directories, we don't have the Component directory yet, so that's gonna be the very first thing that I create. And I'm gonna use the same approach I used earlier, where I click on New File, and I'm going to type here, Components slash Layouts slash and then I'm gonna call this Our Container, so, Container.tsx.

File Structure

components/layouts/Container.tsx

And now you can see the directory, both directories are located at the root of the application. If you happen to click on one of these other directories and then click the document plus icon like you saw me do in the last section, then you might have the file added to the wrong directory, or nested inside of it. So just always be wary for that, 'cause that will cause an error.

So now with that in place, I'm gonna close the side out, and let's create this component. I'm first going to import React from React like normal. And then from there, I'm going to import a couple React Native components, so I'm gonna import View, and Text from React Native. Now with that in place, let's create our interface.

Container.tsx

import React from "react";
import {View, Text} from "react-native";

It's always a good practice whenever you're using tools like TypeScript, to be able to start with your interface, because this is your way of describing the shape and the behavior of how other components are gonna interact with your component you're building. So I'm going to create an interface, and I'm gonna call this IContainerProps. And then from there, we're only going to have one prop that gets passed in, and it's gonna be called children, and it's gonna be required and then this is just gonna be of type any.

So what this is gonna do is, when I come down here and I build out this component, it's going to force me to only call props Children. And if I try to call anything else, then it's gonna throw me an error, which in this case is what I want. So, now let's create the component itself. I'm gonna say Export Default and I'm just gonna make this a fat arrow function, anonymous function, and I will be passing our props in Interface here in a moment. But for right now, let me just build this out.

So I'm gonna say return. And then I'm gonna use parens, and inside of those parens, I'll add a view and inside of view, I'm going to add a placeholder text component, this is just to prove that our container is working. So here I'm gonna say, I'm in the container. And then from that point, I'm going to call our props Children. So let's pass in that interface.

So I'll say this component accept props, and it's going to follow the interface of IContainerProps. And then inside of the component itself, I'll just call props.Children.

Container.tsx

import React from "react";
import { View, Text } from "react-native";

interface IContainerProps {
  children: any;
}

export default (props: IContainerProps) => {
  return (
    <View>
      <Text>I'm in the container!</Text>

      {props.children}
    </View>
  );
};

Now, if this is a little bit fuzzy on what's going on right here, do not worry, we're gonna walk through exactly how this works. And I think it really helps to see how it works by visualizing it inside of another component when we call it. So let me open up our feed screen component here. And instead of the view tag, what I'm gonna do is I'm going to bring in our new custom container tag. So I can say import container from and this is gonna be a relative path.

So I'm gonna say ../components/layouts/Container. So I'm gonna bring that in and now what I can do is, because of this container tag, it already has a view tag inside of it. So I'm going to wrap this entire component inside of our new custom container tag. So I'm gonna be able to get rid of this view tag, and this is now going to be what wraps up all of the content on this screen.

FeedScreen.tsx

import React from "react";
import { Text, View, TouchableOpacity } from "react-native";

import Container from "../components/layouts/Container";

interface IFeedScreenProps {
  navigation: {
    navigate: (arg: string) => void;
  };
}
export default (props: IFeedScreenProps) => {
  return (
    <Container>
      <Text>Feed screen</Text>

      <TouchableOpacity onPress={() => props.navigation.navigate("Search")}>
        <Text>Search</Text>
      </TouchableOpacity>
    </Container>
  );
};

If the concept of props Children was a little bit confusing, the way you can visualize this is that when we're using this container tag that we created, it's the same exact thing as using a view tag. So when React Native created a view tag, they are calling, at some level they're calling props Children because when you create a tag, or when you call a tag, just like this, and you don't close it right away, any of the content inside of it is what are called the children of that tag or of that component. So in this case, feedScreen is one of the child elements inside of the container component. Now this touchable opacity with the link to the search page, that is also in the container, and it's one of the child components.

So hopefully that kind of makes sense on what props Children does. It's just a way of being able to slide in anything that you call inside of that parent component. So container is a wrapper, so we're gonna be able to place styles, we're gonna be able to place content. As you can see, when I hit save there, even though we don't have that I'm in the container content anywhere on the feed screen, now you can see, if you look in the simulator, it now says that.

So that means that this is working. And the really cool part about this is let's go to the search screen. So, we're already linking to the search screen, so let's actually go to it, and let's bring in our new container.

So I'm gonna say Import Container from, and let's go grab that from Components, Layouts, Container. Now, inside of the component itself, I'm gonna get rid of view, hit save.

SearchScreen.tsx

import React from "react";
import { Text, View } from "react-native";
import Container from "../components/layouts/Container";

export default () => {
  return (
    <Container>
      <Text>SearchScreen</Text>
    </Container>
  );
};

And now, if I go and click on our Search link, you can see it still says I'm in the container.

So if you're curious on why this is such a big deal or why this is so cool, imagine, and you're not gonna have to spend a long time imagining 'cause over the next few guides we're gonna start building it out. Imagine you wanna build out a bottom tab bar, that's a pretty common thing that you build in applications. You wouldn't wanna write all of the identical code inside of each one of your screens. But by creating a container component, you're able to share all of that functionality and share common elements across any screen that you call it from, so it's very flexible.

This is one of the biggest things I could really push when it comes to learning React, is the benefits of using these reusable components, and becoming really good at knowing when to use them and when not to. And so hopefully the more times you see me doing it throughout this course, you're gonna start to get a feel for how that works. So with all of this in place, in the next few guides, we're gonna start building out our bottom tab bar.

Resources

• Source code