So this is gonna be a pretty quick guide where we essentially just create a few placeholder screens and later on in the course, we're actually gonna fill them up but for right now, let's just create those. I'm gonna go to the screens list here and I'm gonna create a couple new ones. The first one is going to be the AccountScreen.tsx. And then the next one is going to be the PostFormScreen. So PostFormScreen.tsx,

This is the naming that I like to follow. Whenever I'm creating an actual screen, I like to actually have the name Screen at the end and then if it's something simple like a component that will be embedded inside of the screen, then I don't use the screen name but that's just for my own personal preference. You may find something that works better for you.

Now, inside of here, let's just create the placeholder content. I'd recommend for you to pause the video right now and go and create these components by themselves so without following along. You already have a model with our FeedScreen on what to do and I'll even give you the hint that we're not gonna need to use the navigation on those other screens. So that's simply something we're using inside of here to learn how navigation works but I'd recommend for you to pause the video right now and just create some basic screens. They could just say have the View and Text that say the name of the screen. So if you do that, pause and come right back.

I'm gonna start building these out. So the very first thing I need to do is import React from react. And then I need to import the React Native components that I'm gonna work with. So can say View, and then Text and these are gonna be from react-native, and then from there, I'm simply going to create the function. Now, remember, there are a number of ways that you can create these functions. The key is that you have to export whatever you've created or else React Native and the rest of the application is not gonna have access to it. I'm gonna say export default, I'm not going to name it, I'm just gonna use an anonymous function here and you also have to be cognizant that you always need to return whatever type of code you're writing here.

So I'm gonna say return and then in parens, I'm going to return the View wrapped up with a Text tag here and this is just gonna say Account screen and that's all that I need to do for the Account screen.

AccountScreen.tsx

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

export default () => {
  return (
    <View>
      <Text>Account Screen</Text>
    </View>
  );
};

Now, the reason why I wanted to do this and show it to you was just so you got used to doing this over and over again. The only way that you're really going to get to the point of mastery is by repeating through this process until it just kind of becomes second nature to you. So that's the reason why I wanted you to go through it and work on it yourself.

Now, for the next one, we can just copy and paste it and this is just gonna be our Post form screen, hit Save and you can test this out. So if you wanna be able to perform the navigation, then you can go and you can go in to do exactly what we did. Remember when we added in our Search screen and we called Search? Well, you can't simply call Account screen yet because you first have to go to the routing system we created and add these components and list them out. So let's go and do that so that we can test it. So I'm gonna open up the router file and now we need to import these two components.

So the very first one was going to be the AccountScreen. And I'll copy this, paste it in and then the next one is gonna be the PostFormScreen. Now we've imported our two new screens, all we have to do is add them to the AppStack. So here I'm going to add the Account and we're just gonna call it Account, and then AccountScreen, and then PostForm and add the PostFormScreen component.

router.tsx

const AppStack = createStackNavigator(
  {
    Feed: FeedScreen,
    Search: SearchScreen,
    Account: AccountScreen,
    PostForm: PostFormScreen
  },
  {
    initialRouteName: "Feed"
  }
);

Now, once I've added those we've registered those components inside of our AppStack. Now because we've done that, we can go to the FeedScreen and now I can come here, instead of saying Search, I could say Account, hit Save. And I still have the text here that says Search. You could change that too. But just for testing purposes, I can click that and let's see, there we go. Okay, you may have to hit Refresh just to get the router items registered and you can see that now that's working. It even pulls in the correct header and this header once again is pulled in.

It's simply the name that we've provided for that component. And that is all working perfectly. I'm gonna switch this back to Search and we are all good to go.

So we've created the base set of screens that we're going to be calling from our bottom tab navigation bar. So now that we have those screens built out, now in the next few guides, we're gonna see how we can build our own bottom tab bar completely from scratch.

Resources

• Source code