app.routes.tsx

import React, { useCallback } from 'react';
import { TouchableOpacity, Alert } from 'react-native';
import {
  createStackNavigator,
  StackHeaderLeftButtonProps,
} from '@react-navigation/stack';
import Icon from 'react-native-vector-icons/Feather';

import { useNavigation } from '@react-navigation/native';

import Dashboard from '../pages/Dashboard';

const App = createStackNavigator();

const AppRoutes: React.FC = () => {
  const navigation = useNavigation();

  return (
    <App.Navigator
      screenOptions={{
        headerTintColor: '#444',
        headerTitleAlign: 'center',
        headerLeftContainerStyle: {
          marginLeft: 16,
        },
        headerRightContainerStyle: {
          marginRight: 16,
        },
      }}
    >
      <App.Screen
        name="Dashboard"
        component={Dashboard}
        options={{
          title: 'DASHBOARD',
          headerLeft: ({ tintColor }: StackHeaderLeftButtonProps) => (
            <TouchableOpacity onPress={navigation.navigate('Profile')}>
              <Icon name="power" size={25} color={tintColor} />
            </TouchableOpacity>
          ),
          headerRight: ({ tintColor }: StackHeaderLeftButtonProps) => (
            <TouchableOpacity onPress={() => navigation.navigate('Settings')}>
              <Icon name="settings" size={25} color={tintColor} />
            </TouchableOpacity>
          ),
        }}
      />
    </App.Navigator>
  );
};
export default AppRoutes;

App.tsx

import 'react-native-gesture-handler';
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';

import Routes from './routes';

const App: React.FC = () => {
  return (
    <NavigationContainer>
      <Routes />
    </NavigationContainer>
  );
};

export default App;

index.tsx

import React from 'react';
import { createStackNavigator } from '@react-navigation/stack';

import AppRoutes from './app.routes';

const Stack = createStackNavigator();

const Routes: React.FC = () => (
  <Stack.Navigator>
    <Stack.Screen
      name="AppRoutes"
      component={AppRoutes}
      options={{
        headerShown: false,
      }}
    />
  </Stack.Navigator>
);

export default Routes;