How to navigate to a shared screen while preserving the currently active bottom tab

by

Summary

The issue at hand is navigating to a shared screen in a React Native app using Expo Router while preserving the currently active bottom tab. The current workaround involves creating “proxy” routes, which results in a large number of empty files and is not ideal. The goal is to find a recommended way to achieve this without duplicating or proxying route files per tab.

Root Cause

The root cause of this issue is the way Expo Router handles navigation between tabs. When navigating to a shared screen, the router highlights the tab that owns the route, breaking the expected UX. This is because the router is designed to focus on the tab that contains the destination route.

Why This Happens in Real Systems

This issue occurs in real systems because of the following reasons:

  • Tab Focus: The router’s default behavior is to focus on the tab that contains the destination route.
  • Route Hierarchy: The route hierarchy in Expo Router is designed to prioritize the tab that owns the route.
  • Shared Screens: Shared screens can be accessed from multiple tabs, making it challenging to preserve the currently active tab.

Real-World Impact

The impact of this issue is:

  • Poor UX: The user’s expected tab focus is not preserved, leading to a poor user experience.
  • Code Duplication: The current workaround involves creating multiple “proxy” routes, resulting in code duplication and maintenance issues.
  • Scalability: As the app grows, the number of “proxy” routes will increase, making it harder to maintain and scale the app.

Example or Code

To demonstrate the issue, consider the following example:

// TabNavigator.js
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import HomeScreen from './HomeScreen';
import WorkoutScreen from './WorkoutScreen';
import ExerciseScreen from './ExerciseScreen';

const Tab = createBottomTabNavigator();

const TabNavigator = () => {
  return (
    
      
      
    
  );
};

export default TabNavigator;
// ExerciseScreen.js
import { TouchableOpacity, Text } from 'react-native';
import { useNavigation } from '@react-navigation/native';

const ExerciseScreen = () => {
  const navigation = useNavigation();

  const handleExercisePress = () => {
    navigation.navigate('Exercise', { exerciseId: 1 });
  };

  return (
    
      Exercise
    
  );
};

export default ExerciseScreen;

In this example, navigating to the Exercise screen from the Home or Workout tab will highlight the tab that owns the Exercise route.

How Senior Engineers Fix It

Senior engineers can fix this issue by using a combination of techniques, including:

  • Custom Navigation: Implementing custom navigation logic to preserve the currently active tab.
  • Route Configuration: Configuring routes to use a shared screen without duplicating route files.
  • Tab Focus Management: Managing tab focus manually to ensure the expected UX.

Why Juniors Miss It

Juniors may miss this issue because:

  • Lack of Experience: Limited experience with Expo Router and React Native navigation.
  • Insufficient Knowledge: Not being aware of the complexities of tab focus and route hierarchy.
  • Overreliance on Defaults: Relying too heavily on the default behavior of Expo Router, without considering the implications for UX. Key Takeaways:
  • Understanding the root cause of the issue is crucial to finding a solution.
  • Custom solutions may be necessary to achieve the desired UX.
  • Code organization and maintainability should be considered when implementing a solution.