Managed the authentication flow and worked on the overall UI design.

This commit is contained in:
mansi-dev
2026-02-17 22:52:20 +05:30
parent 4b633fd8ff
commit d143d38a55
2 changed files with 104 additions and 0 deletions

94
src/Route.tsx Normal file
View File

@@ -0,0 +1,94 @@
import { createContext, useContext, useEffect, useState } from 'react';
import { View, ActivityIndicator } from 'react-native';
/* ---------- AUTH SCREENS ---------- */
import { Login } from './auth/Login';
/* ---------- APP SCREENS ---------- */
import Home from './Screen/Home';
const AuthStack = createNativeStackNavigator();
const MainStack = createNativeStackNavigator();
type AuthContextType = {
isLoggedIn: boolean;
setIsLoggedIn: (value: boolean) => void;
};
const AuthContext = createContext<AuthContextType | undefined>(undefined);
export const useAuth = () => {
const context = useContext(AuthContext);
if (!context) {
throw new Error('useAuth must be used within AuthProvider');
}
return context;
};
function AuthStackNavigator() {
return (
<AuthStack.Navigator id="AuthStack" screenOptions={{ headerShown: false }}>
<AuthStack.Screen name="Login" component={Login} />
<AuthStack.Screen name="Register" component={Register} />
<AuthStack.Screen name="PoliceRegister" component={PoliceRegister} />
</AuthStack.Navigator>
);
}
function MainStackNavigator() {
return (
<MainStack.Navigator id="MainStack" screenOptions={{ headerShown: false }}>
<MainStack.Screen name="Home" component={Home} />
</MainStack.Navigator>
);
}
function RootNavigator() {
const { isLoggedIn } = useAuth();
return isLoggedIn ? <MainStackNavigator /> : <AuthStackNavigator />;
}
const Route: React.FC = () => {
const [isLoggedIn, setIsLoggedIn] = useState(false);
const [loading, setLoading] = useState(true);
useEffect(() => {
bootstrap();
}, []);
const bootstrap = async () => {
try {
const keys = await AsyncStorage.getAllKeys();
const stores = await AsyncStorage.multiGet(keys);
stores.forEach(([key, value]) => {
if (value !== null) {
User[key] = value;
}
});
if (User.id) {
setIsLoggedIn(true);
}
} catch (e) {
console.log('Bootstrap error', e);
} finally {
setLoading(false);
}
};
if (loading) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<ActivityIndicator size="large" />
</View>
);
}
return (
<AuthContext.Provider value={{ isLoggedIn, setIsLoggedIn }}>
<NavigationContainer>
<RootNavigator />
</NavigationContainer>
</AuthContext.Provider>
);
};
export default Route;

10
src/auth/Login.tsx Normal file
View File

@@ -0,0 +1,10 @@
import React from "react";
import { View } from "react-native";
export const Login: React.FC = () => {
return (
<View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
{/* Implement your login form here */}
</View>
);
};