But now that you have at least an introduction down, let's see how we can start organizing our style sheets in a way that's a little bit more intuitive. Because many times, you're gonna be able to build out styles that can be shared across your entire application and so because of that, you wouldn't wanna keep those styles all in the same file.

So in this guide, we're gonna create a style directory. So I'm going to open up the side and come down here to the bottom. In the very root of the application, I want you to create a new directory here called styles, and this very first one, I'm gonna put in a directory that's called navigation.

The reason I'm gonna name it that is simply because I like the mapping. Whenever I'm creating the style directories, if I have something that is specific to a component, I like to place it inside of the same path that I did with the regular components. So I'm gonna say navigation and here, I'm gonna start with a lowercase, so I'm gonna say bottomTabStyles, just like this, and this is not gonna be a .tsx file. This is gonna be .ts file, so this is just gonna be a regular typescript file.

And now inside of here, what we can do, is we can bring these styles. So I'm going to copy this, I'm also going to copy the import statement.

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

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

So I'm going to copy that, paste this in and now we're not going to use any of these components except for the style sheet component, and then we're not going to have a variable here. Instead what we're gonna do, is starting at the right of the equals sign, I'm going to delete everything, and I'll say export default, and then this is going to export this entire set of styles.

Now inside of our bottom tab bar, now we can get rid of this styles variable. We can get rid of the StyleSheet import, and now we can do our own import. So here I can say import bottomTabStyles from, and then this is a relative import, so I'll say ../../styles/navigation/bottomTabStyles. Once again, you do not need to use the .ts file React Native and the application's going to know that automatically.

Now the only change we have to make is copy bottomTabStyles and then place that down in our view component.

BottomTabBar.tsx

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

import bottomTabStyles from "../../styles/navigation/bottomTabStyles";

interface IBottomTabBarProps {
  navigate: (arg: string) => void;
}

export default (props: IBottomTabBarProps) => {
  return (
    <View style={bottomTabStyles.container}>
      <TouchableOpacity onPress={() => props.navigate("Feed")}>
        <Text>Feed</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => props.navigate("Search")}>
        <Text>Search</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => props.navigate("PostForm")}>
        <Text>Form</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => props.navigate("Account")}>
        <Text>Account</Text>
      </TouchableOpacity>
    </View>
  );
};

So now if you hit save, it's gonna refresh and you'll see everything is working. You can reload it and see that now our styles are all working properly. I'm really happy with this, I think we're coming along nicely. We've already been introduced to quite a few of the core components, such as the view component, the buttons, and now the style sheet component. So I think we're moving along nicely.

In the next guide, we're gonna start to create our color guide and the color schema for the entire application, and you're gonna see how you can leverage some pretty cool JavaScript in order to share those colors across the app.

• Source code