Basically I have this LoginScreen.js:

import React, { useRef,useState } from 'react';
import { View, Text, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
import axios from 'axios';
import { useNavigation } from '@react-navigation/native';
import { Navigation } from 'react-native-navigation';

const LoginScreen = () => {
  const emailInputRef = useRef(null);
  const navigation = useNavigation();

  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');
  const [isLeftHovered, setIsLeftHovered] = React.useState(false);
  const [isRightHovered, setIsRightHovered] = React.useState(false);
  const handleLogin = async () => {
    try {
      const response = await axios.post('http://localhost:5000/api/users/login', {
        username,
        password,
      });
      if (emailInputRef.current) {
        emailInputRef.current.setCustomValidity('');
      }
      Navigation.setRoot({
        root: {
          stack: {
            children: [
              {
                component: {
                  name: 'Hello',
                },
              },
            ],
          },
        },
      });

     // navigation.replace('Login');
      console.log('Registration successful:', response.data);
    } catch (error) {
      if (error.response) {
        if (error.response.data === 'noAccount'){
          if (emailInputRef.current) {
            emailInputRef.current.setCustomValidity('Email or username doesn't exist.');
            emailInputRef.current.reportValidity(); // Show the custom validity message immediately
          }
        }
        } else {  
        console.error('Error registering:', error);
      }
    }
  };

  return (
    <View style={styles.container}>
      //code of form
    </View>
  );
};

const styles = StyleSheet.create({
//code
});

export default LoginScreen;

I have created this navigation.js:

// navigation.js
import { Navigation } from 'react-native-navigation';
import LoginScreen from './LoginScreen';
import Hello from './Hello';

export const registerScreens = () => {
  Navigation.registerComponent('Login', () => LoginScreen);
  Navigation.registerComponent('Hello', () => Hello);
};

export const startApp = () => {
  Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            component: {
              name: 'Login',
            },
          },
        ],
      },
    },
  });
};

And I have this in the backend using node.js:

router.post('/login', async (req, res) => {
    const { username, password} = req.body;
    try {
      // Check if email already exists
      const existingUser = await User.findByEmail(username);
      if (existingUser) {
        if (existingUser.password === password)
            res.status(201).send('Logged in');
      } else {
        const existingUser1 = await User.findByUserName(username);
        if (existingUser1) {
            if (existingUser1.password === password)
                res.status(201).send('Logged in');
        } else {
            return res.status(400).send('noAccount');
        }
      }
    } catch (error) {
      console.error('Error Logging in', error);
      res.status(500).send('Error Logging in');
    }
});

My problem: now first of all my code is not working at all as whenever I run my code I get this error in console

C:UsersMSIDocumentsenisprojetstagemy-react-native-web-appnode_modulesreact-native-navigationlibdistsrccomponentsModal.js:9
Uncaught TypeError: (0 , react_native_1.requireNativeComponent) is not a function

I have tried to after logging in , I want to redirect to a page named Hello, using stack will not change the URL path, as it says localhost only I want to make it something like localhost/hello,
how to do it guys please?

I have tried using navigation from react-native-navigation but it makes my code crash.

I have expected to have an url like localhost/dashboard , and render the page Hello.js but nothing works