Course Overview: React Native Navigation for Mobile Applications

Setup a StackNavigator as a Modal in React Navigation

Use the React Native Modal Component with React Navigation

Create an Authentication Flow with React Navigation

Open a Modal from Tab Bar in React Navigation

Override Default Transitions in React Native with StackNavigator's transitionConfig Object

Build Fine-grained Screen Transitions with a Custom React Navigation Interpolator

Replace a Screen with React Navigation

React Navigation for Native Mobile Applications

In this lesson you will learn how to use the navigation option of `tabBarOnPress` to override the functionality of a tab press in a React Navigation TabNavigator.


Instructor: [00:00] We're starting off with an application that's using a tab navigator to render two screens -- one being Favorite, one being Recents.

[00:07] On our Favorite screen, we can go ahead and open a Modal which again is a very basic component. This time it's being rendered via a StackNavigator of a mode of Modal which is allowing it to come up from the bottom of the screen.

[00:19] Now what we want to do is replace this button which is allowing us to open the Modal and be able to open it via the tab, or something similar to when you're adding a new picture to Instagram. To do this, what we're going to do is first go up to our Imports from React Native and import a View.

[00:35] We're then going to go to our tab navigator. We want this to show up between our Favorites and our Recents, so we'll go between those and add it in here. We want to specify a key for this screen which is going to be New. We're going to specify it a screen that should be rendered, and we're just going to render a basic view because you're not actually going to see the screen at any point.

[00:55] We're then going to specify some navigation options. Using our navigation options, we can actually specify a function and from this function we want to return an object.

[01:04] We'll specify our title that should be used in the navigation bar which we'll set to New. We're also going to specify a tab bar icon and this tab bar icon's coming from the Material Community Icons which is via Expo vector icons.

[01:18] Now what's really interesting is our tab bar OnPress which allows us to actually override what happens when this tab bar item is pressed. When this happens, what we're going to do is actually -- from our navigation options -- our first argument, we can go ahead and destructure it and access navigation just like we would on a normal screen.

[01:39] Now from within our tab bar OnPress, we can say navigation.navigate and we can specify the screen while it opened which is going to be Modal. Again, we've got access to our parent screens that are registered in parent navigators.

[01:53] Now when we save this, the application's going to re-render, and you can see that we've got this new item down here. We go to Favorites, it goes to Favorites. If we go to Recents, it goes to Recents. If we press New, it'll go ahead and open up that Modal from the bottom like we would expect it to, like it did when we had the button on our Favorites screen.

Course

React Navigation for Native Mobile Applications

Open a Modal from Tab Bar in React Navigation

Share this video with your friends