CODEWITHSUNDEEP
react-nativereact-navigation
Joe Lu
Joe Lu

Reputation: 2370

React Navigation Material Top Tabs Navigator Swipe event or callback method?

Hi I'm using React Navigation with its Material Top Tabs Navigator component Everything works fine except when I enable the swipe option, I can't get a callback method to do more logic. With Material Top Tabs Navigator, users can navigate to different screens from a tabPress or swipe the focusing screen. I need to do more logic by catching that behavior (say changing background color whenever the screen is changed)

With tabPress event (listed from its official doc), it is easy to achieve, but I can't find any event related to the swipe action. I also tried to addListener, no logging while swiping.

componentDidMount() {
  this._test= navigation.addListener("focus", () => {
    console.log("swiped");
  });
}

Any ideas? tks

Upvotes: 1

Views: 3591

Answers (2)

Claude
Claude

Reputation: 117

Just add an onStateChange listener on the NavigationContainer where your Tabs are instantiated. The state return on the call back includes all the info you need.

It works for both swipes and Tab press.

Upvotes: 0

Hassan Raza
Hassan Raza

Reputation: 82

Try using the Navigation State to detect which tab is currently active.

Upvotes: 0

Related Questions