Differentiate between swipe and click navigation in tabs in react-navigation - react-native

Question

To better understand how our users is using our app, we want to fire an event to analytics when a user swipe to the next tab, and a different event if the user clicks to navigate to the next tab.
The tabs are created with createMaterialTopTabNavigator from react-navigation-tabs.
const SwipeableTabs = createMaterialTopTabNavigator(
{
Tab1,
Tab2,
Tab3,
},
{
swipeEnabled: true,
}
);
I've tried listening to the following event, but the payload does not contain any information about how the user navigated (swipe vs click).
this.props.navigation.addListener('didFocus', payload => console.log(payload))
Is there any way to know if the user swiped or clicked, so that I can fire the appropriate event to analytics?

Answer 1

You could try adding a press listener to the tab bar as described here.
The demo code looks like this:
const MyTabs = TabNavigator({
...
}, {
tabBarComponent: TabBarBottom /* or TabBarTop */,
tabBarPosition: 'bottom' /* or 'top' */,
navigationOptions: ({ navigation }) => ({
tabBarOnPress: (scene, jumpToIndex) => {
console.log('onPress:', scene.route);
jumpToIndex(scene.index);
},
}),
});
Now you can simply set a flag in your tabBarOnPress function and check for it in your didFocus listener. If the flag has been set then you know it was via tab bar press, otherwise it must be a swipe. Note that this assumes you don't manually set the tab on your own somewhere. But if you do, you could just set the flag in that press handler as well.
tabBarOnPress docs

Answer 2

There is listeners on screens, you can use swipeStart, swipeEnd or tabPress callbacks to fire your events to the analytics.
<Tab.Screen
name="Chat"
component={Chat}
listeners={({navigation, route}) => ({
tabPress: (e) => {
// call your analytics events
},
swipeStart: (e) => {
// call your analytics events
},
swipeEnd: (e) => {
// call your analytics events
},
})}
/>