Tab bar navigation without component screen render

Question

Is there a way to press on tab bar and not render component screen? i have been passing null function but it still renders blank screen. i want that wherever you press it stays on home screen.

Answer 1

Add a listener to the Screen.

          component={() => null}
          listeners={() => ({
            tabPress: (e) => {
              e.preventDefault(); // Prevents navigation
              // Your code here for when you press the tab
            },
          })}

Answer 2

You can avoid navigation to the screen by creating your custom tabBar component in which you can handle onPress to each tabBarComponent so you can avoid navigation and do some action instead. Take a closer look at the example from react-navigation documentation here:

https://reactnavigation.org/docs/bottom-tab-navigator/#tabbar

This line of code from the example should be helpful for you:

        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate(route.name);
          }
        };