Now, I'm gonna break this into a few different guides, because there can be a little bit of confusion on how to configure the top navbar. So in this guide, we're simply going to address the styles that we're going to use, and then, later on, I'm gonna show you in the next guide, how you can actually integrate custom components directly into the top navbar.

Let's start by opening up the router file, once again, that is located in your utilities directory, and inside of here, we're gonna start adding some customization. So if you go into this app stack variable here, you can see this is where we're creating that stack navigator, and we already have one configuration item, which is where we're telling it, what the initial route name is, but we actually have a wide assortment of different variables and different data, that we can pass inside of this object, if you went through early on in the course if you went through that react navigation documentation that I mentioned, then you might already have a few ideas, and you may have even played around with it a little bit.

So in this guide, this is where we're gonna be able to add some custom styles. The very first thing that I'm gonna do, is I'm gonna add a new attribute here, right after the initial route name, and let's also give ourselves a little bit of room, and I'm gonna call this default navigation options because we're using TypeScript, it is telling us what some of those options are, that's the name of the key we're gonna use. So default navigation options is an object, so this is where we pass in a list of any kinds of defaults that we want the navigation, the top navigation bar to have.

So for that, I'm gonna start off by adding curly brackets, and now let's start with a header style. So for this, I'm gonna say header style, not header shown, header style, and then inside of here, I'm gonna pass in a background color. So we're eventually gonna bring in one of our custom ones, but for right now let's just say background color, and let's just say black, just to make it easy so that we can see a change, we're eventually going to switch it to our dark color, and that's the first thing.

router.tsx

initialRouteName: "Feed",
defaultNavigationOptions: {
  headerStyle: {
    backgroundColor: "black"
  }
}

Now let's also add what's called a tint color. So that is not gonna be inside of this header style key-value pair, instead, it's gonna be nested inside of the default navigation options. So after header style, and you close that off, then type what is called the tint color, or it's actually the header tint color like it was recommending, and here, let's just say, let's just go with a hash and then fff, hit Save, and let's see what this looks like, and there you go, you can see our top navigation bar now has a black color with a white text.

router.tsx

initialRouteName: "Feed",
defaultNavigationOptions: {
  headerStyle: {
    backgroundColor: "black"
  },
  headerTintColor: "#fff"
}

Eventually, I'm gonna show you how we can slide in our own components so that we can use an icon up here, but this is looking really good. If I click on any of these, you can see that the tint color, which is the way they really say the link color inside of React Native and also inside of swift and some of the other platforms out there, this tint color or this link color, is now all white, so this is working really nicely, I'm really happy with how that is coming along.

Now to finish this up, I just wanna replace black, with our own color palette. So we can do this, because this is just normal JSX code or TSX code, this is normal code that you can use just like normal JavaScript, so I'm gonna say I want to import dark from our color palette, so I can just say from, and then ../styles/colors.

router.tsx

import {dark} from "../styles/colors";

Now I'm gonna replace black with our dark color,

router.tsx

initialRouteName: "Feed",
defaultNavigationOptions: {
  headerStyle: {
    backgroundColor: dark
  },
  headerTintColor: "#fff"
}

hit save, and now you can see, it might be a little bit subtle to see on the video, but this is now showing the dark color, we're not just at that pure black that we had before. So that is an introduction to how you can start styling that top navigation bar in React.

Resources

• Source code