Unexpected token '<' Stack.Screen – React native

It`s work with only 1 Stack.Screen, but when im triyng to add another one i have "Unexpected token"
Here is my App.tsx:

import React, {Component, SignIn, useMemo} from 'react';
import {PermissionsAndroid} from 'react-native';
import { View, Text } from 'react-native'
import {Provider} from 'react-redux';
import {Store} from './storage/storage';
import  * as SecureStore from 'expo-secure-store'
import { NavigationContainer } from '@react-navigation/native';
import LoginScreen from './components/login_screen'
import RegisterScreen from './components/register_screen'
import {signIn} from './components/login_screen'
import http from './storage/http'
import {
  createNativeStackNavigator,
  createSwitchNavigator,
  createAppContainer,
  createDrawerNavigator,
} from '@react-navigation/native-stack';
// const AuthContext = React.createContext();

import {AuthContext} from './components/login_screen'

import AppNavigator from './components/navigators/AppNavigator'
import AuthNavigator from './components/navigators/AuthNavigator'
import Dashboard from './components/dashboard/dashboard'
// import RegisterScreen from './components/register_screen'



// import SideMenu from './components/side-menu';
// //
// import {UPDATE_CURRENT_PATH} from './storage/next-action';
// import {GlobalPalette} from './global_styles';


const Stack = createNativeStackNavigator();

export default function App({ navigation }) {
  const [state, dispatch] = React.useReducer(
    (prevState, action) => {
      switch (action.type) {
        case 'RESTORE_TOKEN':
          return {
            ...prevState,
            userToken: action.token,
            isLoading: false,
          };
        case 'SIGN_IN':
          return {
            ...prevState,
            isSignout: false,
            userToken: action.token,
          };
        case 'SIGN_UP':
          return {
            ...prevState,
            isSignout:false,
            userToken:action.token,
          };
        case 'SIGN_OUT':
          return {
            ...prevState,
            isSignout: true,
            userToken: null,
          };
      }
    },
    {
      isLoading: true,
      isSignout: false,
      userToken: null,
    }
  );

  React.useEffect(() => {
    // Fetch the token from storage then navigate to our appropriate place
    const bootstrapAsync = async () => {
      let userToken;

      try {
        userToken = await SecureStore.getItemAsync('userToken');
      } catch (e) {
        // Restoring token failed
      }

      // After restoring token, we may need to validate it in production apps

      // This will switch to the App screen or Auth screen and this loading
      // screen will be unmounted and thrown away.
      dispatch({ type: 'RESTORE_TOKEN', token: userToken });
    };

    bootstrapAsync();
  }, []);

  const authContext = React.useMemo(
    () => ({
      signIn: async ({username, password}) => {

       const response = await http.post ('/users/login', {username, password})
            console.log(response.data.token)

        dispatch({ type: 'SIGN_IN',token: 'token' });
//         console.log(userToken)
      },
      signOut: () => dispatch({ type: 'SIGN_OUT' }),
      signUp: async ({username, password}) => {

        const response = await http.post ('/users/register', {username, password})
        dispatch({ type: 'SIGN_IN', token: 'token' });
      },
    }),
    []
  );

  return (

  <NavigationContainer>
    <AuthContext.Provider value={authContext}>
      <Stack.Navigator
        screenOptions = {{headerShown:false}}
        >
        {state.userToken == null ? (
//         <Stack.Screen name="AuthNavigator" component={AuthNavigator}/>
          <Stack.Screen name="SignIn" component={LoginScreen} />
           <Stack.Screen name="SignUp" component={RegisterScreen} />

        ) : (

          <Stack.Screen name="Dashboard" component={Dashboard} />
//           <Stack.Screen name="PreviewScreen"> component={PreviewScreen} />
        )}
      </Stack.Navigator>
    </AuthContext.Provider>
    </NavigationContainer>
  );

}

Here is my issue:

enter image description here

Here is my package.json:

{
  "name": "adlink",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "rm -rf $TMPDIR/react-* && rm -rf $TMPDIR/metro-* && rm -rf $TMPDIR/haste-* && node node_modules/react-native/local-cli/cli.js start",
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "@react-native-camera-roll/camera-roll": "^5.2.3",
    "@react-native-community/slider": "^4.4.2",
    "@react-navigation/native": "^6.1.4",
    "@react-navigation/native-stack": "^6.9.12",
    "@react-navigation/stack": "^6.3.14",
    "axios": "^1.3.3",
    "expo": "^48.0.0",
    "expo-secure-store": "~12.1.1",
    "gradle": "^1.2.4",
    "immer": "^9.0.19",
    "nodemon": "^2.0.21",
    "react": "^18.2.0",
    "react-native": "^0.71.3",
    "react-native-camera": "^4.2.1",
    "react-native-color-picker": "^0.6.0",
    "react-native-fs": "^2.20.0",
    "react-native-gesture-handler": "^2.9.0",
    "react-native-image-crop-picker": "^0.39.0",
    "react-native-linear-gradient": "^2.6.2",
    "react-native-maps": "^1.4.0",
    "react-native-picker-select": "^8.0.4",
    "react-native-safe-area-context": "^4.5.0",
    "react-native-screens": "^3.20.0",
    "react-native-video": "^5.2.1",
    "react-navigation-stack": "^2.10.4",
    "react-react-native": "^0.0.96",
    "react-redux": "^8.0.5",
    "redux": "^4.2.1",
    "redux-logger": "^3.0.6"
  },
  "devDependencies": {
    "@babel/cli": "^7.21.0",
    "@babel/core": "^7.21.0",
    "@babel/preset-flow": "^7.18.6",
    "@babel/preset-react": "^7.18.6",
    "@babel/runtime": "^7.21.0",
    "@react-native-community/eslint-config": "^3.2.0",
    "babel-jest": "^29.5.0",
    "eslint": "^8.35.0",
    "jest": "^29.5.0",
    "jetifier": "^2.0.0",
    "metro-react-native-babel-preset": "^0.75.1",
    "react-test-renderer": "^18.2.0"
  },
  "jest": {
    "preset": "react-native"
  },
  "expo": {
    "autolinking": {
      "exclude": [
        "expo-file-system"
      ]
    }
  }
}

and here is my babel.config.json:

module.exports = {
  presets: [
  'module:metro-react-native-babel-preset',
    "@babel/preset-react",
    "@babel/preset-flow"
  ],

};

I have tried to upgrade my @babel/core and metro-react-native-babel-preset, also tried to delete lock.json and node modules and install…nothing work

Here is my AuthNavigator and issue:Do you have a screen named ‘RegisterScreen’? If you’re trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator.

import React, {Component, SignIn} from 'react'
import {createNativeStackNavigator} from '@react-navigation/native-stack'
import {View,Text} from 'react-native'
import LoginScreen from 'D:/Test/Awesome/components/login_screen.tsx'
import RegisterScreen from 'D:/Test/Awesome/components/register_screen.tsx'


const Stack = createNativeStackNavigator();
export default class AuthNavigator extends Component {
    render(){
        return(
            <Stack.Navigator >
            <Stack.Screen
                name = 'SignIn'
                component = {LoginScreen}

            />
            <Stack.Screen
                name = 'SignUp'
                component = {RegisterScreen}
            />
            </Stack.Navigator>

        )
    }
}

Here is my register_screen
enter image description here

My register_screen

import React, {Component} from 'react';
import {StyleSheet, Image, View} from 'react-native';
import {GlobalStyles} from '../global_styles';

export default function RegisterScreen () {
  /* jshint ignore:start */

    return (
      <View >
       <Text>Hey</Text>
      </View>
    );

  /* jshint ignore:end */
}