How to change routes with Bottom Navigation and React Navigation?

Question

What is the correct and professional way with best practices to use the centralized routes as it is in App.tsx in the BottomNavigation component?

Currently I have a "route" faker inside the BottomNavigation component, however I would like to use the routes that are in the root (App.tsx) in this component. How can I proceed with this?

App.tsx

import "react-native-gesture-handler";
import React from "react";
import { DefaultTheme, Provider as PaperProvider } from "react-native-paper";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

// SCREEN'S
import HistoryScreen from "./components/screens/HistoryScreen";
import InvestmentScreen from "./components/screens/InvestmentScreen";
import PositionScreen from "./components/screens/PositionScreen";
import QuotationScreen from "./components/screens/QuotationScreen";
import UtilScreen from "./components/screens/UtilScreen";

// GLOBAL COMPONENT'S
import NavigationBottom from "./components/globals/NavigationBottom";
import AppbarHeader from "./components/globals/AppbarHeader";

const Stack = createStackNavigator();

export default function App() {
  return (
    <PaperProvider theme={theme}>
      <NavigationContainer>
        <Stack.Navigator
          initialRouteName="Quotation"
          screenOptions={{ header: (props) => <AppbarHeader {...props}/> }}
        >
          <Stack.Screen options={{ headerTitle: "Cotações" }} name="Quotation" component={QuotationScreen} />
          <Stack.Screen options={{ headerTitle: "Histórico" }} name="History" component={HistoryScreen} />
          <Stack.Screen options={{ headerTitle: "Investimentos" }} name="Investments" component={InvestmentScreen} />
          <Stack.Screen options={{ headerTitle: "Posição" }} name="Position" component={PositionScreen} />
          <Stack.Screen options={{ headerTitle: "Utilidades" }} name="Utilities" component={UtilScreen} />
        </Stack.Navigator>

        <NavigationBottom />
      </NavigationContainer>
    </PaperProvider>
  );
}

NavigationBottom.tsx

import * as React from 'react';
import { BottomNavigation, Text, useTheme } from 'react-native-paper';

const NavigationBottom = () => {
  const theme = useTheme();
  const [index, setIndex] = React.useState(0);
  const [routes] = React.useState([
    { key: 'quotation', title: 'Cotações', icon: 'finance' },
    { key: 'history', title: 'Histórico', icon: 'history' },
    { key: 'investments', title: 'Investimentos', icon: 'chart-pie' },
    { key: 'position', title: 'Posição', icon: 'wallet' },
    { key: 'utilities', title: 'Utilitários', icon: 'tools' },
  ]);

  const renderScene = BottomNavigation.SceneMap({
    quotation: () => <Text>Cotação Route</Text>,
    history: () => <Text>Histórico Route</Text>,
    investments: () => <Text>Histórico Route</Text>,
    position: () => <Text>Investimentos Route</Text>,
    utilities: () => <Text>Utilitario Route</Text>,
  });

  return (
    <BottomNavigation
      activeColor={theme.colors.accent}
      navigationState={{ index, routes }}
      onIndexChange={setIndex}
      renderScene={renderScene}
    />
  );
};

export default NavigationBottom;

Answer 1

You can use RouteProp from @react-navigation/native :

App.tsx

export type RouteStackParamList = {
  Start: undefined;
  Login: { param: string };
  Admin: undefined;
};


const App: FunctionComponent = () => {
  return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Start">
          <Stack.Screen name="Start" component={ClickToStartPage} />
          <Stack.Screen name="Login" component={LoginPage} />
          <Stack.Screen name="Admin" component={AdminPage} />
        </Stack.Navigator>
      </NavigationContainer>
  );
};

Login.tsx

export type MyRouteProp = RouteProp<RouteStackParamList, 'Login'>; // from app.tsx
interface LoginProps {
  route: RouteProp;
}

const Login: FunctionComponent<LoginProps> = (props) => {
  const { route } = props;

  route.params.param; // if you need a param
  route.name; // "Login"
 ...
}

For more "clean code" architecture, you could have an interface between App.tsx & Login.tsx

App.tsx

export enum Routes {
  START = 'Start',
  LOGIN = 'Login',
  ADMIN = 'Admin',
}

{...}

<Stack.Screen name=Routes.START component={ClickToStartPage} />
<Stack.Screen name=Routes.LOGIN component={LoginPage} />
<Stack.Screen name=Routes.ADMIN component={AdminPage} />

Login.tsx

export type MyRouteProp = RouteProp<RootStackParamList, Routes.LOGIN>;