Name: Open a Modal from the Tab Bar in React Navigation v5
Uploaded: 2020-03-30T11:12:26-05:00
Description: In this lesson I'll show you how to override the default tab bar functionality in React Navigation v5 to open a screen as a modal rather than switch tabs.

In this lesson I'll show you how to override the default tab bar functionality in React Navigation v5 to open a screen as a modal rather than switch tabs.

https://app.egghead.io/api/v1/lessons/react-native-open-a-modal-from-the-tab-bar-in-react-navigation-v5/subtitles

Open a Modal from the Tab Bar in React Navigation v5

Instructor: [0:00] First, we'll go ahead and find our tab navigator and create a new screen. I'm just going to use a placeholder here, which will be a view that returns a blue background. We need to make sure we actually import View from React Native.

[0:28] Now, we can go ahead and take our screen and register it as a tab, bypassing a name and component. We'll also grab our icon from down below, and render a simple addition sign for the icon. Now, when we go through to our create screen, we see our blue screen.

[0:58] Next, we go ahead and define the modal that we want to actually open when we go to the Create screen. Again, I'll go ahead and create a screen which will be a view that just renders a red background. Then we can go ahead and copy one of our modals and duplicate it. We'll have a name. We'll call it Create New. We're going to render our Create New component we just created.

[1:31] We want to make sure animation enabled set to true because default for this navigator is false. Now we go back up to our Create tab screen and we'll also add a listener's prop to this, which is going to take a function that returns the object.

[1:53] Inside of there, we'll pass the event name we want to target, and this tab press is going to take a function that takes an event as an argument. In here, what we want to do is say event.prevent default. Call that function. Now when we press our Create tab, it's not going to do anything because we're preventing the default action.

[2:14] We can then override that by accessing navigation off of the first argument of our listener's function and then when we press our tab, we want to say navigation.navigate and then we'll pass the Create New modal as the event we want to call when we press this tab.

[2:34] Now when we press Create New, we have our red screen coming up from the bottom, presented as a modal. We can go ahead and close it. Go to actions, contacts, and create once again.

Open a Modal from the Tab Bar in React Navigation v5

Share this video with your friends