The good news is that if you are familiar with React and how to build React applications, building React Native applications is gonna become very familiar very quickly for you, so let's get started. Right here, as you can see, I'm in the App.tsx file, this is the main entry point for the application. Now, you may have noticed a few of the components, we've not really talked about these yet. If you are coming from a background where you have built a number of React applications, then you are familiar with creating components.

All of React applications are compiled by combining components, having them communicate with each other, having them render content, typically having them render HTML. Well, when we're building native applications, we're creating mobile applications, we can't use things like divs or spans or h1 tags or anything like that. We need to use components that can actually be compiled down and can be viewed on phones, on native devices. So when we see things like View and Text and these types of components, or StyleSheet, you can see, these are all coming from reactive-native.

At the end of the day, to really simplify things, reactive-native is simply a set of components and libraries that allow you to write your code, to write your React code in a way that a mobile device can understand it and so that's what we're doing right here. The main App function is just a component, it's a functional component and right now it's rendering what's called a View tag and then it's rendering a Text tag inside of that.

So let's create our own screen component. I'm gonna create a component here and I'm gonna call it FeedScreen. So I'm gonna say const FeedScreen and I'm gonna make this an arrow function so I'll say equals parens and this is just gonna be empty 'cause we're not passing in any props right now and I'm gonna make it a fat arrow component. Now, this is a function, so I'm just gonna have it return something, I'm gonna have it return a View tag.

Then inside of this, I wanna put some content. Now, I'm gonna make the system have an error right here and it's because I want you to learn this right away because it's important to understand this hierarchy and how you can work with these components. If I were to try to say something like Oops right here in the View tag, and if I were to now call this FeedScreen component. So I'm gonna get rid of this boilerplate View tag stuff here.

I'm just gonna say I want, the App function to return my FeedScreen. Now, if I hit Save, you'll see that we have an error and it says Invariate Violation. Text strings must be rendered within a Text component. So with what I'm doing here, with this view tag, I can't just put content in there. And I wanted to show you that error because when I was teaching myself React Native, this was one of the very first errors I ran into. I created a View component or I added a View tag, I tried to put some content inside of it and it looked like everything blew up so it's important. Any time that you're putting text directly inside of a component, you need to wrap it inside of a Text tag or a Text component. We can fix this by instead of saying Oops, I'm just going to create and call one of these Text components here and I'll say this is on the FeedScreen.

Now, if hit Save, you'll see, and you may have to come over here and hit Refresh, and you can see up here on the top hand side where it says FeedScreen.

So it's kinda hard to see. And so you can always wrap this up inside of a View tag. So I can wrap up our FeedScreen component inside of a View tag.

export default function App() {
    return <View><FeedScreen /></View>
}

Make sure you close it off and so you can treat these views if you're coming from a HTML background or something, you can treat these views or think of them kind of like a div tag or something like that. So I'm gonna wrap that up and I'm gonna call this styles, this is so that we can actually see our FeedScreen. So I'm gonna call our style prop here and I'm gonna pass it in the styles.container. If you're wondering where this is coming from, it's just the StyleSheet function right here, this StyleSheet variable. So now if I hit Save, you'll say it's saying FeedScreen.

So all of that is working properly. Now, you could technically write your entire application all in one file but that's not really the best way to do it. So let's open up the file system and see how we can call this FeedScreen and call it from a different file so that we can start separating and organizing our code. I'm gonna come here in the root of the application. Notice that there's not a SRC file, there's not a source file like in a standard React application so everything here's in the root.

So I'm going to create a new file here and if you're using VS Code, you can create directories on the fly. So I can do something like say screens/ and this is automatically gonna create a feeds folder inside of VS Code and I'm gonna call this FeedScreen.tsx. And now what I can do is I can take all of this code here and I'm gonna also copy these dependencies. I can move these into the FeedScreen. We don't need the StyleSheet and now we have this component here.

Now, there's one more thing we have to do. The FeedScreen component here works but in order to access this from another page, from a another file, then I need to say export default FeedScreen. So that's our variable, that's our function right here. I'm gonna hit Save and now in this App file, we can get rid of the FeedScreen code and instead, we can import this.

So I can say import FeedScreen from and then if you have autocomplete and have an autocomplete extension, you might get some help here but I'm just gonna say dot dot or I should say ./screens and then FeedScreen.

import FeedScreen from "./screens/FeedScreen";

So the way just if this is still a little bit unfamiliar in how you're accessing other files, the dot means we wanna start exactly at the same location that the App file is at so you can see App file here is in the root of the system, it's a root of the file system. Screens is the directory that is in that same location. So I can say ./screens, so we're accessing that directory we just created and then I'm grabbing the FeedScreen component. And now I can hit Save and everything should still work and yes, everything's working.

Now, another cool little thing that I like to do, just because any time that you can streamline your code base, it's usually a good idea. So I'm going to say that I don't actually want to declare this FeedScreen function and then export it this way. I'm gonna get rid of this code. I'm gonna come up here and I can actually get rid of all of this and say export default and have the code just like this. Hit Save, everything's working the same.

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

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

The main reason why I'm showing you this is because when you're going through documentation or tutorials or anything like that, you're gonna see both approaches and I remember when I first started seeing the syntax, it was very confusing 'cause it looked like there was no reference to, in this case, the FeedScreen component anywhere but that's because of how export default here works. Export default means that this function that we are exploring and we're making available from this file, it's the default function or the default library or module that we're sending out. So we don't have to declare it, we don't have to name it. We can simply use what's called an anonymous function which we're doing right here. And then inside of the App file, then we're importing that and the cool thing about that is we can name this anything we want. So as long as we're referencing the FeedScreen, we could technically come here and call this the AsdfScreen right here, hit Save and everything's still working.

Now, that's not really a good idea because it's something that would be very confusing to read that type of code but I wanted to show you that to just understand and to try to kinda pull away some of the magic that's happening just so you can see exactly all of those processes that are occurring when it comes to creating a component, which is just a function, and then being able to import that anywhere else.

The last thing I'm gonna do in this guide, because we're using TypeScript, one of the really nice things about it is that TypeScript is constantly scanning through your entire code base and trying to give you recommendations. That's the reason why we use TypeScript. Because of that, it's saying that hey, we are no longer using any text components here. So it's a good idea to not leave anything like that inside of the code base, so I can remove that and we're all good and it's coming along.

So now with this in place, in the next guide, we're going to create another component and then we're gonna start talking about how we can use routing to start navigating between screens in our app.

Resources

• Source code