Unable to resolve "./src/screens/authScreens/SignInScreen" from "App.js"

App.js:

import { StyleSheet, Text, View, StatusBar } from "react-native";
import { colors, parameters } from "./src/global/styles";

import SignInScreen from "./src/screens/authScreens/SignInScreen";

export default function App() {
  return (
    <View>
      <StatusBar barStyle="light-content" backgroundColor={colors.statusbar} />
      <SignInScreen />
    </View>
  );
}

const styles = StyleSheet.create({});

I want to import SignInScreen component from SignInScreen but it shows error
"" Unable to resolve "/src/screens/authScreens/SignInScreen" from "App.js"""

SignInScreen:

import React from "react";
import { View, Text, StyleSheet, Dimensions } from "react-native";
import { colors, parameters } from "../../global/styles";
import Icon from "react-native-vector-icons/Ionicons";
import Header from "../../components/Header";

export function SignInScreen() {
return (
    <View style={styles.container}>
    <Header title={"MY ACCOUNT"} type={"caret-back"} />
    <Text>hello to world</Text>
    </View>
);
}
const styles = StyleSheet.create({
container: {
    flex: 1,
},
});

if you use export default function, use below import

export default function SignInScreen() {

//use below import 
import SignInScreen from "./src/screens/authScreens/SignInScreen";

if you're not use export default, use below import with {}

export function SignInScreen() {

//use below import with {}
import {SignInScreen} from "./src/screens/authScreens/SignInScreen";    

import like this

import {SignInScreen} from "./src/screens/authScreens/SignInScreen";