Adding custom setting to each route to trigger a dev action

app.tsx

import React, {FunctionComponent} from 'react';
import {DevSettings, Alert} from 'react-native';
import {enableScreens} from 'react-native-screens';
import {NavigationContainer} from '@react-navigation/native';
import {SafeAreaProvider} from 'react-native-safe-area-context';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {useFocusEffect} from '@react-navigation/native';

import {CenteredView} from './components';

enableScreens(false);

const Tab = createBottomTabNavigator();

const ReusableRoute =
  (route: string): FunctionComponent =>
  () => {
    useFocusEffect(() => {
      DevSettings.addMenuItem('Custom Action', () =>
        Alert.alert(
          `${route} Screen`,
          `Triggered custom action on ${route} screen`,
        ),
      );
    });

    return <CenteredView>{route.toUpperCase()} SCREEN</CenteredView>;
  };

const App = () => {
  return (
    <SafeAreaProvider>
      <NavigationContainer>
        <Tab.Navigator>
          <Tab.Screen name="Home" component={ReusableRoute('Home')} />
          <Tab.Screen name="Settings" component={ReusableRoute('Settings')} />
        </Tab.Navigator>
      </NavigationContainer>
    </SafeAreaProvider>
  );
};

export default App;