basic app

src/navigation/AuthNavigator.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { createStackNavigator } from '@react-navigation/stack';
+import { useAuth } from '../contexts/AuthContext';
+
+import LoginScreen from '../screens/Auth/LoginScreen';
+import RegisterScreen from '../screens/Auth/RegisterScreen';
+import VerificationScreen from '../screens/Auth/VerificationScreen';
+
+const Stack = createStackNavigator();
+
+const AuthNavigator = () => {
+  const { pendingVerification } = useAuth();
+
+  return (
+    <Stack.Navigator
+      screenOptions={{
+        headerShown: false,
+        cardStyleInterpolator: ({ current, layouts }) => {
+          return {
+            cardStyle: {
+              transform: [
+                {
+                  translateX: current.progress.interpolate({
+                    inputRange: [0, 1],
+                    outputRange: [layouts.screen.width, 0],
+                  }),
+                },
+              ],
+            },
+          };
+        },
+      }}
+      initialRouteName={pendingVerification ? 'Verification' : 'Login'}
+    >
+      <Stack.Screen name="Login" component={LoginScreen} />
+      <Stack.Screen name="Register" component={RegisterScreen} />
+      <Stack.Screen name="Verification" component={VerificationScreen} />
+    </Stack.Navigator>
+  );
+};
+
+export default AuthNavigator; 

src/navigation/MainNavigator.js

@@ -0,0 +1,75 @@
+import React from 'react';
+import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
+import { Ionicons } from '@expo/vector-icons';
+import { COLORS } from '../constants/colors';
+
+import HomeScreen from '../screens/Main/HomeScreen';
+import MenuScreen from '../screens/Main/MenuScreen';
+import ProfileScreen from '../screens/Main/ProfileScreen';
+
+const Tab = createBottomTabNavigator();
+
+const MainNavigator = () => {
+  return (
+    <Tab.Navigator
+      screenOptions={({ route }) => ({
+        headerShown: false,
+        tabBarIcon: ({ focused, color, size }) => {
+          let iconName;
+
+          if (route.name === 'Home') {
+            iconName = focused ? 'home' : 'home-outline';
+          } else if (route.name === 'Menu') {
+            iconName = focused ? 'grid' : 'grid-outline';
+          } else if (route.name === 'Profile') {
+            iconName = focused ? 'person' : 'person-outline';
+          }
+
+          return <Ionicons name={iconName} size={size} color={color} />;
+        },
+        tabBarActiveTintColor: COLORS.primary,
+        tabBarInactiveTintColor: COLORS.gray[500],
+        tabBarStyle: {
+          backgroundColor: COLORS.white,
+          borderTopWidth: 1,
+          borderTopColor: COLORS.gray[200],
+          paddingBottom: 8,
+          paddingTop: 8,
+          height: 88,
+        },
+        tabBarLabelStyle: {
+          fontSize: 12,
+          fontWeight: '600',
+          marginTop: 4,
+        },
+        tabBarItemStyle: {
+          paddingVertical: 4,
+        },
+      })}
+    >
+      <Tab.Screen 
+        name="Home" 
+        component={HomeScreen}
+        options={{
+          tabBarLabel: 'Baş sahypa',
+        }}
+      />
+      <Tab.Screen 
+        name="Menu" 
+        component={MenuScreen}
+        options={{
+          tabBarLabel: 'Hyzmatlar',
+        }}
+      />
+      <Tab.Screen 
+        name="Profile" 
+        component={ProfileScreen}
+        options={{
+          tabBarLabel: 'Profil',
+        }}
+      />
+    </Tab.Navigator>
+  );
+};
+
+export default MainNavigator; 

src/navigation/RootNavigator.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { View, ActivityIndicator } from 'react-native';
+import { NavigationContainer } from '@react-navigation/native';
+import { useAuth } from '../contexts/AuthContext';
+import { COLORS } from '../constants/colors';
+
+import AuthNavigator from './AuthNavigator';
+import MainNavigator from './MainNavigator';
+
+const LoadingScreen = () => (
+  <View style={{
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    backgroundColor: COLORS.background,
+  }}>
+    <ActivityIndicator size="large" color={COLORS.primary} />
+  </View>
+);
+
+const RootNavigator = () => {
+  const { isAuthenticated, isLoading, pendingVerification } = useAuth();
+
+  if (isLoading) {
+    return <LoadingScreen />;
+  }
+
+  return (
+    <NavigationContainer>
+      {isAuthenticated && !pendingVerification ? (
+        <MainNavigator />
+      ) : (
+        <AuthNavigator />
+      )}
+    </NavigationContainer>
+  );
+};
+
+export default RootNavigator;