So we're gonna have a couple little changes we're gonna make here in our App component and that is what is going to first, allow us to see our entire routing system and things like the top nav bar and some things like that and then we're gonna see how we can link between the pages or between the screen, so let's get started on that. The reason why we can't see our Feed screen is because we are wrapping our AppContainer up in a View component but we do not need to do that anymore because each of our screens is gonna be its own type of component.

So I'm gonna remove the View here and we can also remove all these styles. We're gonna eventually see how we can implement our styles later on and as you can see, we're no longer using our StyleSheet or our View components anymore so we can remove that.

App.tsx

import React from "react";

import router from "./utils/router";
import { createAppContainer } from "react-navigation";
const AppContainer = createAppContainer(router);

export default function App() {
  return <AppContainer />;
}

So now, if you hit Refresh, you can see we've simplified our App component by quite a bit and on the right-hand side here, you can see, we have something that's starting to actually look like an application. So that's pretty cool.

So this is working. You can see, by default, simply because of what we implemented inside of our router here, that is what is rendering out, things like the top nav bar and things like that. Notice, when we called our system feed, that is by default what gets put up here. Now, I'm gonna show you how we can customize this and we're eventually gonna be able to put an icon up there and you'll see how this is dynamic later on. But for right now, just notice how that works. So that is all working nicely.

Now we have our Feed screen here. I wanna have a little link that allows me to click on it and then navigate to the Search screen. So let's see what we need to do in order to accomplish that. The very first thing is we need to have a button. Now, React Native has all kinds of different button options and button components and I definitely recommend for you to look through the documentation to see how they work and the different ones that they offer; I'm gonna use one that is called TouchableOpacity.

So I'm gonna say TouchableOpacity and even though this may not sound like a button, it actually works great as a button because it's very easy to style. I probably use TouchableOpacity for about 95% of the buttons that I use, so it's a very good component to be aware of. So now with that in place, I'm going to come up here and I'm going to create a spot for the button to live.

So I'm gonna say TouchableOpacity and this is a component that takes in children. So we do not want to just have it be a self-closing tag, we wanna treat it like the View component or like the Text component. And I'm just gonna say Search, hit Save and oh, and this is a good point. Right here I did the exact thing I told you in one of the first videos that you're probably gonna run into and it's an error you'll see and that is TouchableOpacity functions like a View component which means you can't put text inside of it directly. So we need to wrap this up inside of its own Text component, so I'm going to create that.

FeedScreen.tsx

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

export default props => {
  return (
    <View>
      <Text>Feed screen</Text>

      <TouchableOpacity>
        <Text>Search</Text>
      </TouchableOpacity>
    </View>
  );
};

Now hit Save and you'll see that we have our little Search link here.

Now, it doesn't look like a link and that's because TouchableOpacity is very flexible with the styling and by default, it doesn't look like anything but let's come over here and what we can do is we can add a few little things like an onPress handler. So the way this is gonna work is instead of, if you're used to React and just regular React, you're probably used to writing onClick handlers and things like that.

Well, because this is a mobile device, that means that it works like a phone which means you don't get clicks, you get presses. So for TouchableOpacity, I'm gonna say onPress and then for right now, I just wanna log this out, I just wanna make sure that this is working. So I'm going to pass in an anonymous function here and say console.log and say Pressed search and that's all I'm gonna put here. And so now if you open up your terminal, whatever you have running here, you can see I have that error, but let's come to the simulator and let's press Search and you can see there on the bottom left-hand side that that is working and Search is getting pressed. So everything there is working perfectly.

Now what we need to do is we actually need to call some props. So because we're working inside of this AppContainer, it means each one of the components that we call inside of the StackNavigator and the AppContainer and the SwitchNavigator, they have access to some properties and some functions and some things like that and we're gonna be working along with that quite a bit as we build out this application but for the very first one that I want to use is what's called the Navigate function. So in order to make this work, we're going to come down here and I'm going to get rid of this console.log statement and also, we need to actually tell our application that we're gonna be working with props. So I'm going to pass in properties to our FeedScreen component here and now let's actually call these.

So I'm gonna say props dot and then you can see all of this in the documentation so don't worry, I'm not just making this up. If you look through even the Hello, World examples in the React navigation docs, they'll show how this works. So I'm gonna grab my props and then I have an object called navigation available to me and then that has a function called navigate. So navigate takes in a string and the string it's looking for is the name of a route inside of our system.

So if you remember, we created these routes, we just have two so far. Feed and Search and these are the names that we're gonna use for our router. So here, I can just say Search and then make sure that you have everything. It looks like have an extra parenthese so make sure that that is all working. Hit Save and now you can see, if I press Search, look at that, we have a full navigation element and we even have the cool little back link that'll take us right back to where we were.

So this might also give you a hint on exactly how this works in the background. So we are not simply creating a link that has no knowledge about the application or the route system, because when we click on Search, the system realizes that there is now a stack. What we've done is we've added to the navigation stack and the reason I wanted to point that out is it can be kind of confusing when you see these names with the navigation system like createStackNavigator and createSwitchNavigator.

The stack right here, what this is doing, you can think of this just like any type of real-world stack. When we created these routes and any time we navigate to a different screen on the application, the application actually keeps track of that and it adds to the stack. That's how it's able to know that we need a back button up here and that when we click back, it takes us to the original screen.

So that's really neat because it's doing a lot of work behind the scenes. It keeps track of all of the screens that were visited so that the user can continually navigate between them. And if you feel like doing anything else, then I definitely recommend for you to kind play around with these so look through the documentation, see some of the other functions you have available and kind of get used to how it works but for right now, I'm really happy with that. We now have the ability to switch between screens in the application and in the next guide, we're gonna talk a little bit about how we can leverage TypeScript to start getting some better recommendations for the code that we're writing and to also wrap our code and wrap our components up in a way that they're more intuitive to use.

Resources

• Source code