Learn

With the tab or drawer navigator, you get a customizable menu that users can use to navigate between screens. The stack navigator only adds a menu with the screen title and a back button once you navigate within the stack. To navigate to different screens within the stack, we have to implement our code to move users from one screen to another.

Luckily, react-navigation allows us to interact with the navigators programmatically. With this API, we can move users to different screens when we need to. This can be a simple button press or after a successful login.

Every screen receives a navigation property. This property is an object with a lot of useful methods, like .navigate('ScreenName') or .goBack().

// Using properties, only available in screen components const FeedScreen = (props) => { const nav = props.navigation; return ( <Button title="Go to home" onPress={() => nav.navigate('Home')} /> ); };

You can also access this navigation object using the useNavigation hook. We are going to use the useNavigation hook in our exercises.

// Using the hook, available in all components const HomeButton = () => { const nav = useNavigation(); return ( <Button title="Go to home" onPress={() => nav.navigate('Home')} /> ); };

Instructions

1.

Let’s use the code from our previous exercise. We don’t have to use the stack navigator to interact with the navigation API - it works with all navigators. Navigating within a stack requires manual transitions because we don’t get a menu with the stack navigator.

Add the useNavigation hook to our FeedScreen. You can import the hook from @react-navigation/native.

2.

Great! Now that we have the API available let’s connect it to a button.

Add a button that takes the user to the CatalogScreen. You can tell react-navigation to navigate to other screens with the .navigate('ScreenName') method on the object returned from the useNavigation hook.

3.

Awesome! If you press the button, it should take you to the other screen. You can use this to navigate to any of the screens, just by referencing their unique name.

Press run to continue to the next exercise.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?