I'm gonna open up the side directory here and inside of the components directory I'm gonna right-click on that and then I'm gonna click New File and create a directory called navigation and then inside of it, a file called BottomTabBar.tsx. Once I have that, I can copy all of this code, we're eventually gonna get rid of most of it, and move that BottomTabBar code into that file.

Now to refactor this just a little bit, I wanna export the BottomTabBar as a default so I can get rid of this const and the function declaration. I can just say export default and now that means that we can import this BottomTabBar from any file that we want. I'm going to get rid of all of that there and now open up the container component. Let's get rid of the BottomTabBar and the interface, that also is going to allow us to get rid of TouchableOpacity and the Text components. Then all we have to do is import our BottomTabBar.

So I'll say import BottomTabBar from, this is gonna be a relative path, so I'll say ../ and then you can see we have that navigation directory and then the BottomTabBar. I'm just going to import that. Hit Save and if everything's still working then we should still see all of those links there, and that's all working properly.

Container.tsx

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

import BottomTabBar from "../navigation/BottomTabBar";

interface IContainerProps {
  children: any;
  navigate: (arg: string) => void;
}

export default (props: IContainerProps) => {
  return (
    <View>
      {props.children}
      <BottomTabBar navigate={props.navigate} />
    </View>
  );
};

If you click on any of those, they should still be working, so we're good to go.

Now that we have that organized properly, let's talk about adding our own custom styles. You've already seen a little preview of how styles work when we auto-generated the application. Our original app.tsx component had an example of how to use styles. So we're gonna start by mimicking that, then we're going to branch out and we're going to actually create a directory for all of our styles later on, but for right now, I'm gonna keep them all in this file.

Working with styles in React Native is very different than working with styles in, say, a web application. In a web application, you have the ability to create CSS or SASS stylesheets. In an application like React Native, you have to actually create components, and work with components and then have different parts of your application call those styles.

We're gonna see how that works right here, I'm going to first bring in the StyleSheet component from React Native. Now also note that this is StyleSheet, the second S is capitalized, so make sure that you name that properly or else you'll get an error. Then once you have that in place you can create a variable. So I'm gonna say const and I'm just gonna call it styles.

We're eventually gonna move this into its own file as well, but for right now, we're just gonna call it styles. The way you create a StyleSheet is by saying StyleSheet.create and that's a function, create's a function. And then you can even read right here in the text editor and it says that this creates a StyleSheet style reference from the given object.

The way that this works, it's gonna look a lot like CSS but it's not gonna be exactly like CSS. We're gonna call this function and then this function expects an object. We're gonna put curly brackets inside of it. Now inside of this object, we can start naming off the names of the styles. If you're coming from a standard web development or front end development background, then you can think of these as being very similar to class or id selectors. Here I'm gonna create a container, and this is not technically a class, but you can think of it that way if it's a little bit easier for you.

I'm gonna create this container attribute and this is gonna have a set of styles. In this guide, I simply wanna show this all working. I'm going to say container: { and then here we're gonna list out each one of the styles that we wanna use. I'm gonna create a background color. Now this is gonna look similar to CSS but it's not gonna be exactly like it.

Notice whenever you're using background color in CSS, it looks something like this. You'd say background-color. You're never gonna use a dash when you're working with React Native StyleSheets. It is all going to use camel casing. If you have something like background-color, then you're going to remove that dash in the middle and capitalize that next word. So you'll be seeing that throughout this entire course.

I'm gonna say backgroundColor and then let's just go with red, just to be able to see this working. I'm now going to copy that StyleSheet component and come down into the View. Now in the View component, we can open this up and pass in a style prop. I'm gonna pass in style={ because we want JavaScript to actually read this in and process it as JavaScript. And then I'll say styles.container. Now let's hit Save and you can see that worked perfectly.

Now our View, our BottomTabBar View now has associated colors. Let's stretch this out just a little bit, just so you can see how this works and you can see another example of it. Let's say that we wanted to put some margins, some margin at the top or something like that, or some padding. Let's do padding. If I wanna do paddingTop, I can do paddingTop, once again following the pattern that even though with normal CSS, this would be padding-top, now it's padding with a capital T top. Here let's say we wanna do 15 on the top and we wanna do 15 on the bottom.

BottomTabBar.tsx

const styles = StylesSheet.create({
  container: {
    backgroundColor: "red",
    paddingTop: 15,
    paddingBottom: 15
  }
});

Now if you hit Save, you'll see that that padding is automatically applied.

Great job if you went through this. You now know how to work with the StyleSheet function and the create function inside of React Native.

Resources

• Source code