Я создаю нативное приложение Expo React с аутентификацией Firebase и продолжаю получать эту ошибку при запуске: < /p>
Я также попробовал это решение:
React Native Expo + Firebase Auth: «Компонентная аут. Запуск < /p>
ERROR Error: Component auth has not been registered yet, js engine: hermes WARN Route
"./(auth)/register.tsx" is missing the required default export. Ensure a React
component is exported as default.
ERROR Error: Component auth has not been registered yet, js engine: hermes
WARN Route "./_layout.tsx" is missing the required default export. Ensure a React
component is exported as default.
WARN [Layout children]: Too many screens defined. Route "register" is extraneous.
package.json
{
"name": "expense-tracker-app",
"main": "expo-router/entry",
"version": "1.0.0",
"scripts": {
"start": "expo start",
"reset-project": "node ./scripts/reset-project.js",
"android": "expo run:android",
"ios": "expo run:ios",
"web": "expo start --web",
"lint": "expo lint"
},
"dependencies": {
"@expo/vector-icons": "^14.1.0",
"@react-native-async-storage/async-storage": "^1.24.0",
"@react-navigation/bottom-tabs": "^7.3.10",
"@react-navigation/elements": "^2.3.8",
"@react-navigation/native": "^7.1.6",
"expo": "~53.0.9",
"expo-blur": "~14.1.4",
"expo-constants": "~17.1.6",
"expo-font": "~13.3.1",
"expo-haptics": "~14.1.4",
"expo-image": "~2.1.7",
"expo-linking": "~7.1.5",
"expo-router": "~5.0.6",
"expo-splash-screen": "~0.30.8",
"expo-status-bar": "~2.2.3",
"expo-symbols": "~0.4.4",
"expo-system-ui": "~5.0.7",
"expo-web-browser": "~14.1.6",
"firebase": "^11.7.3",
"phosphor-react-native": "^2.3.1",
"react": "19.0.0",
"react-dom": "19.0.0",
"react-native": "0.79.2",
"react-native-gesture-handler": "~2.24.0",
"react-native-reanimated": "~3.17.4",
"react-native-safe-area-context": "5.4.0",
"react-native-screens": "~4.10.0",
"react-native-web": "~0.20.0",
"react-native-webview": "13.13.5"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@types/react": "~19.0.10",
"eslint": "^9.25.0",
"eslint-config-expo": "~9.2.0",
"typescript": "~5.8.3"
},
"private": true
}
App/_layout.tsx:
import { AuthProvider } from "@/contexts/authContext";
import { Stack } from "expo-router";
import React from "react";
import { StyleSheet } from "react-native";
const StackLayout = () => {
return (
);
};
export default function RootLayout() {
return (
);
}
const styles = StyleSheet.create({});
App/(Auth)/_layout.tsx:
// app/(auth)/_layout.tsx
import { Stack } from "expo-router";
import React from "react";
export default function AuthLayout() {
return (
);
}
authcontext.tsx
import { auth, firestore } from "@/config/firebase";
import { AuthContextType, UserType } from "@/types";
import {
createUserWithEmailAndPassword,
onAuthStateChanged,
signInWithEmailAndPassword,
} from "firebase/auth";
import { doc, getDoc, setDoc } from "firebase/firestore";
import { createContext, useContext, useEffect, useState } from "react";
const AuthContext = createContext(null);
export const AuthProvider: React.FC = ({
children,
}) => {
const [user, setUser] = useState(null);
const login = async (email: string, password: string) => {
try {
await signInWithEmailAndPassword(auth, email, password);
return { success: true };
} catch (error: any) {
let msg = error.message;
return { success: false, msg };
}
};
const register = async (name: string, email: string, password: string) => {
try {
let response = await createUserWithEmailAndPassword(
auth,
email,
password
);
await setDoc(doc(firestore, "users", response?.user?.uid), {
email,
name,
uid: response?.user?.uid,
});
return { success: true };
} catch (error: any) {
let msg = error.message;
return { success: false, msg };
}
};
const updateUserData = async (uid: string) => {
try {
const docRef = doc(firestore, "users", uid);
const docSnap = await getDoc(docRef);
if (docSnap.exists()) {
const data = docSnap.data();
const userData: UserType = {
uid: data?.uid,
name: data.name || null,
email: data.email || null,
image: data.image || null,
};
setUser({ ...userData });
}
} catch (error: any) {
let msg = error.message;
// return { success: false, msg };
console.log("error", error);
}
};
useEffect(() => {
const unsubscribe = onAuthStateChanged(auth, async (user) => {
if (user) {
await updateUserData(user.uid);
} else {
setUser(null);
}
});
return () => unsubscribe();
}, []);
const contextValue: AuthContextType = {
user,
setUser,
login,
register,
updateUserData,
};
return (
{children}
);
};
export const useAuth = (): AuthContextType => {
const context = useContext(AuthContext);
if (!context) {
throw new Error("useAuth must be wrapped inside AuthProvider");
}
return context;
};
firebase.ts
import AsyncStorage from "@react-native-async-storage/async-storage";
import { getReactNativePersistence, initializeAuth } from "firebase/auth";
import { getFirestore } from "firebase/firestore";
// Your web app's Firebase configuration
const firebaseConfig = {
};
// Initialize Firebase
const app = initializeApp(firebaseConfig);
// auth
export const auth = initializeAuth(app, {
persistence: getReactNativePersistence(AsyncStorage),
});
// config/firebase.ts
console.log("Auth initialized:", auth);
// db
export const firestore = getFirestore(app);
[1]: https://stackoverflow.com/questions/796 ... 1#79603601
[2]: https://i.sstatic.net/o6SBipA4.jpg
Подробнее здесь: https://stackoverflow.com/questions/796 ... ered-yet-j
React Native Expo + Firebase Auth: Component Auth еще не зарегистрирована, JS Engine: Hermes ⇐ Android
-
- Похожие темы
- Ответы
- Просмотры
- Последнее сообщение