splash.jsx

// SplashScreen.js
import React, { useEffect } from "react";
import { View, Text, StyleSheet, Image } from "react-native";

export default function SplashScreen({ navigation }) {
  useEffect(() => {
    const timer = setTimeout(() => {
      navigation.replace("AuthCheck"); // 👈 Your main screen
    }, 3000);

    return () => clearTimeout(timer);
  }, []);

  return (
    <View style={styles.container}>
      <Image
        source={{
          uri: "https://cdn-icons-png.flaticon.com/512/272/272354.png",
        }}
        style={styles.logo}
      />

      <Text style={styles.title}>My App</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "#4c1d95",
    justifyContent: "center",
    alignItems: "center",
  },
  logo: {
    width: 120,
    height: 120,
    marginBottom: 20,
  },
  title: {
    fontSize: 28,
    fontWeight: "bold",
    color: "white",
  },
});









//authcheck.jsx
import React, { useEffect } from "react";
import { View, Text, ActivityIndicator } from "react-native";
import AsyncStorage from "@react-native-async-storage/async-storage";

export default function AuthCheck({ navigation }) {
  
  useEffect(() => {
    const checkLogin = async () => {
      const user = await AsyncStorage.getItem("currentuser");
      if (user) {
        navigation.replace("TabNavigation");  // logged in
      } else {
        navigation.replace("Login");  // not logged in
      }
    };

    checkLogin();
  }, []);

  return (
    <View style={{ flex: 1, justifyContent: "center", alignItems: "center" }}>
      <ActivityIndicator size="large" color="blue" />
      <Text>Checking login...</Text>
    </View>
  );
}









//EditProfile.jsx
import React, { useEffect, useState, useRef } from "react";
import {
  View,
  Text,
  TextInput,
  TouchableOpacity,
  Image,
  StyleSheet,
  Alert,
  PermissionsAndroid,
  Platform,
  Linking,
} from "react-native";

import AsyncStorage from "@react-native-async-storage/async-storage";
import Ionicons from "react-native-vector-icons/Ionicons";
import RBSheet from "react-native-raw-bottom-sheet";
import ImagePicker from "react-native-image-crop-picker";

export default function EditProfile({ navigation }) {
  const [user, setUser] = useState(null);
  const sheetRef = useRef();


   const userdata = async () => {
        const data = await AsyncStorage.getItem('currentuser');
        if (data) {
            setUser(JSON.parse(data));
        }
    };

   useEffect(() => {
          userdata();
      }, []);

  if (!user) {
    return (
      <View style={styles.center}>
        <Text>Loading...</Text>
      </View>
    );
  }

  // Camera permission
  const requestCameraPermission = async () => {
    if (Platform.OS === "android") {
      const result = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.CAMERA
      );

      if (result === PermissionsAndroid.RESULTS.GRANTED) return true;
      if (result === PermissionsAndroid.RESULTS.DENIED) {
        Alert.alert("Permission Needed", "Camera Permission Required!");
        return false;
      }
      if (result === PermissionsAndroid.RESULTS.NEVER_ASK_AGAIN) {
        Alert.alert("Blocked", "Enable permission from settings.", [
          { text: "Cancel" },
          { text: "Open Settings", onPress: () => Linking.openSettings() },
        ]);
        return false;
      }
    }
    return true;
  };

  // Gallery permission
  const requestGalleryPermission = async () => {
    if (Platform.OS === "android") {
      const result = await PermissionsAndroid.request(
        PermissionsAndroid.PERMISSIONS.READ_MEDIA_IMAGES
      );

      if (result === PermissionsAndroid.RESULTS.GRANTED) return true;
      if (result === PermissionsAndroid.RESULTS.DENIED) {
        Alert.alert("Permission Needed", "Gallery Permission Required!");
        return false;
      }
      if (result === PermissionsAndroid.RESULTS.NEVER_ASK_AGAIN) {
        Alert.alert("Blocked", "Enable permission from settings.", [
          { text: "Cancel" },
          { text: "Open Settings", onPress: () => Linking.openSettings() },
        ]);
        return false;
      }
    }
    return true;
  };


  // Camera pick
  const pickCamera = async () => {
    const ok = await requestCameraPermission();
    if (!ok) return;

    ImagePicker.openCamera({
      includeBase64: false,
      compressImageQuality: 0.7,
    })
      .then((img) => {
        setUser({ ...user, image: img.path });
        sheetRef.current.close();
      })
      .catch((error) => {
        if (error.message.includes("cancelled")) return;
        console.log("Camera Error:", error);
      });
  };

  // Gallery pick
  const pickGallery = async () => {
    const ok = await requestGalleryPermission();
    if (!ok) return;

    ImagePicker.openPicker({
      includeBase64: false,
      compressImageQuality: 0.7,
    })
      .then((img) => {
        setUser({ ...user, image: img.path });
        sheetRef.current.close();
      })
      .catch((error) => {
        if (error.message.includes("cancelled")) return;
        console.log("Gallery Error:", error);
      });
  };

  // Save profile
  const saveData = async () => {
    const users = JSON.parse(await AsyncStorage.getItem("user")) || [];
    const updatedUsers = users.map((u) => (u.email === user.email ? user : u));
    await AsyncStorage.setItem("user", JSON.stringify(updatedUsers));
    await AsyncStorage.setItem("currentuser", JSON.stringify(user));
    Alert.alert("Success", "Profile Updated!");
    navigation.goBack();
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => sheetRef.current.open()}>
        <Image
          source={
            user.image ? { uri: user.image } : require("../assests/default.png")
          }
          style={styles.profileImg}
        />
      </TouchableOpacity>

      <TextInput
        style={styles.input}
        value={user.name}
        onChangeText={(t) => setUser({ ...user, name: t })}
        placeholder="Enter Name"
      />

      <TextInput
        style={styles.input}
        value={user.mobile}
        onChangeText={(t) => setUser({ ...user, mobile: t })}
        keyboardType="numeric"
        placeholder="Enter Mobile"
      />

      <TextInput
        style={styles.input}
        value={user.email}
        onChangeText={(t) => setUser({ ...user, email: t })}
        placeholder="Enter Email"
      />

      <TouchableOpacity style={styles.saveBtn} onPress={saveData}>
        <Text style={styles.saveText}>Save</Text>
      </TouchableOpacity>

      {/* Bottom Sheet */}
      <RBSheet
        ref={sheetRef}
        height={250}
        openDuration={300}
        closeOnDragDown
        closeOnPressMask
        customStyles={{
          wrapper: { backgroundColor: "rgba(0,0,0,0.5)" },
          draggableIcon: { backgroundColor: "#777" },
          container: { borderTopLeftRadius: 20, borderTopRightRadius: 20 },
        }}
      >
        <View>
          <Text style={styles.sheetTitle}>Select Option</Text>

          <TouchableOpacity style={styles.sheetBtn} onPress={pickCamera}>
            <Ionicons name="camera" size={24} color="white" />
            <Text style={styles.sheetText}>Camera</Text>
          </TouchableOpacity>

          <TouchableOpacity style={styles.sheetBtn} onPress={pickGallery}>
            <Ionicons name="image" size={24} color="white" />
            <Text style={styles.sheetText}>Gallery</Text>
          </TouchableOpacity>

          <TouchableOpacity
            style={[styles.sheetBtn, { backgroundColor: "#ccc" }]}
            onPress={() => sheetRef.current.close()}
          >
            <Ionicons name="close" size={24} color="black" />
            <Text style={[styles.sheetText, { color: "black" }]}>Cancel</Text>
          </TouchableOpacity>
        </View>
      </RBSheet>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, padding: 20, alignItems: "center" },
  center: { flex: 1, justifyContent: "center", alignItems: "center" },

  profileImg: {
    width: 150,
    height: 150,
    borderRadius: 75,
    borderWidth: 2,
    borderColor: "purple",
    marginBottom: 20,
  },

  input: {
    width: "95%",
    backgroundColor: "#fff",
    padding: 12,
    borderRadius: 10,
    borderWidth: 1,
    borderColor: "gray",
    marginVertical: 10,
  },

  saveBtn: {
    backgroundColor: "purple",
    padding: 12,
    width: "95%",
    borderRadius: 10,
    alignItems: "center",
    marginTop: 20,
  },

  saveText: { color: "white", fontSize: 16 },

  sheetTitle: {
    fontSize: 20,
    fontWeight: "700",
    padding: 10,
    textAlign: "center",
  },

  sheetBtn: {
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "purple",
    padding: 12,
    borderRadius: 10,
    marginVertical: 5,
    marginHorizontal: 15,
  },

  sheetText: { color: "white", fontSize: 17, marginLeft: 10 },
});










//ProductDetailPage.jsx
import {
  View,
  Text,
  StyleSheet,
  Image,
  TouchableOpacity,
  ScrollView,
} from "react-native";
import React from "react";

export default function ProductDetail({ route}) {
  const { item } = route.params;  

  return (
    <View style={{ flex: 1, backgroundColor: "#fff" }}>
      
      <ScrollView showsVerticalScrollIndicator={false}>
        
        
        <Image
          source={{ uri: item.thumbnail }}
          resizeMode="contain"
          style={styles.mainImage}
        />

        
        <View style={styles.contentBox}>
          <Text style={styles.title}>{item.title}</Text>

          <Text style={styles.price}>₹ {item.price}</Text>

          <Text style={styles.descTitle}>Description</Text>

          <Text style={styles.description}>
            {item.description || "No description available."}
          </Text>
          <View style={{flexDirection:"row",gap:10}}>
           <Text style={[styles.title,{marginVertical:15}]}>Category-</Text>
             <Text style={{marginVertical:20,fontSize:18}}>{item.category}</Text>
          </View>
           <Text style={styles.price}>Rating:{"  "} ⭐{item.rating}</Text>
           
        </View>
      </ScrollView>

      <View style={styles.bottomBar}>
        <TouchableOpacity style={styles.cartBtn}>
          <Text style={styles.cartText}>Add to Cart</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  
 
  mainImage: {
    width: "100%",
    height: 280,
    backgroundColor: "#fff",
  },

  contentBox: {
    padding: 20,
  },

  title: {
    fontSize: 24,
    fontWeight: "700",
    marginBottom: 8,
  },

  price: {
    fontSize: 22,
    fontWeight: "600",
    color: "purple",
    marginBottom: 20,
  },

  descTitle: {
    fontSize: 20,
    fontWeight: "600",
    marginBottom: 10,
  },

  description: {
    fontSize: 16,
    color: "#444",
    lineHeight: 22,
  },

  bottomBar: {
    width: "100%",
    padding: 15,
    backgroundColor: "#fff",
    elevation: 15,
  },

  cartBtn: {
    backgroundColor: "purple",
    paddingVertical: 14,
    borderRadius: 10,
  },

  cartText: {
    color: "white",
    textAlign: "center",
    fontSize: 18,
    fontWeight: "700",
  },
});











//Signup

import {
  View,
  Text,
  KeyboardAvoidingView,
  ScrollView,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  Alert,
} from "react-native";
import React, { useState } from "react";
import { SafeAreaView } from "react-native-safe-area-context";
import AsyncStorage from "@react-native-async-storage/async-storage";
import Ionicons from "react-native-vector-icons/Ionicons";

export default function Signup({ navigation }) {
  const [data, setData] = useState({
    name: "",
    mobile: "",
    email: "",
    password: "",
    confirmpassword: "",
    image: null,
  });

  const [error, setError] = useState({});

  const [showPass, setShowPass] = useState(false);
  const [showConfirmPass, setShowConfirmPass] = useState(false);

 

  
  function validate(name, value) {
    let err = "";

   
  const emailRegex = /^[A-Za-z0-9._%+-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/;


 const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,15}$/;


    if (name === "name" && value.trim() === "") {
      err = "Name is required";
    }
    else if (name === "name" && value.startsWith(" ")){
       err = "Can not Start with space";
    }

    if (name === "mobile") {
      if (value.trim() === "") err = "Mobile is required";
      else if (value.length !== 10) err = "Mobile must be 10 digits";
    }


    if (name === "email") {
      if (value.trim() === "") err = "Email is required";
      else if (!emailRegex.test(value.trim())) err = "Invalid email format";
    }


    if (name === "password") {
      if (value.trim() === "") err = "Password is required";
      else if (!passwordRegex.test(value.trim()))
        err = "Password must have 6+ chars, 1 uppercase, 1 lowercase, 1 number & 1 special char.";
    
    }

    if (name === "confirmpassword") {
      if (value.trim() === "") err = "Confirm Password is required";
      else if (value !== data.password) err = "Passwords do not match";
    }

    return err;
  }

  
  function handleChange(name, value) {

    setData((prev) => ({ ...prev, [name]: value }));

    setError((prev) => ({ ...prev, [name]: validate(name,value) }));
  }

 
  const handleSubmit = async () => {
    let newerror = {};

    Object.keys(data).forEach((field) => {
      let err = validate(field, data[field]);
      if (err) newerror[field] = err;
    });

    if (Object.keys(newerror).length > 0) {
      setError(newerror);
      return;
    }

    let stored = JSON.parse(await AsyncStorage.getItem("user") || "[]");

    const Exist = stored.some(
      (u) => u.email.trim().toLowerCase() === data.email.trim().toLowerCase()
    );

    if (Exist) return Alert.alert("Error", "User already exists!");

    const newUser = [...stored, data];
    await AsyncStorage.setItem("user", JSON.stringify(newUser));

    Alert.alert("Success", "Signup completed!");
    navigation.navigate("Login");
  };

  
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <KeyboardAvoidingView style={{ flex: 1 }} keyboardVerticalOffset={50}>
        <ScrollView contentContainerStyle={styles.container}>
          <Text style={styles.header}>Signup</Text>

         
          <TextInput
            placeholder="Enter name"
            value={data.name}
            style={[styles.input, error.name && styles.errorInput]}
            onChangeText={(value) => handleChange("name", value)}
          />
          {error.name && <Text style={styles.errorText}>{error.name}</Text>}

         
          <TextInput
            placeholder="Enter mobile"
            keyboardType="numeric"
            value={data.mobile}
            style={[styles.input, error.mobile && styles.errorInput]}
            onChangeText={(value) => handleChange("mobile", value)}
          />
          {error.mobile && <Text style={styles.errorText}>{error.mobile}</Text>}

          
          <TextInput
            placeholder="Enter email"
            value={data.email}
            style={[styles.input, error.email && styles.errorInput]}
            onChangeText={(value) => handleChange("email", value)}
          />
          {error.email && <Text style={styles.errorText}>{error.email}</Text>}

       
          <View style={[styles.inputContainer, error.password && styles.errorInput]}>
            <TextInput
              placeholder="Enter password"
              value={data.password}
              secureTextEntry={!showPass}
              style={styles.inputBox}
              onChangeText={(value) => handleChange("password", value)}
            />
            <TouchableOpacity onPress={() => setShowPass(!showPass)}>
              <Ionicons
                name={showPass ? "eye" : "eye-off"}
                size={24}
                color="gray"
              />
            </TouchableOpacity>
          </View>
          {error.password && (
            <Text style={styles.errorText}>{error.password}</Text>
          )}

          
          <View
            style={[
              styles.inputContainer,
              error.confirmpassword && styles.errorInput,
            ]}
          >
            <TextInput
              placeholder="Confirm password"
              secureTextEntry={!showConfirmPass}
              value={data.confirmpassword}
              style={styles.inputBox}
              onChangeText={(value) => handleChange("confirmpassword", value)}
            />
            <TouchableOpacity
              onPress={() => setShowConfirmPass(!showConfirmPass)}
            >
              <Ionicons
                name={showConfirmPass ? "eye" : "eye-off"}
                size={24}
                color="gray"
              />
            </TouchableOpacity>
          </View>
          {error.confirmpassword && (
            <Text style={styles.errorText}>{error.confirmpassword}</Text>
          )}

          {/* SIGNUP BUTTON */}
          <TouchableOpacity style={styles.btn} onPress={handleSubmit}>
            <Text style={styles.btnText}>Signup</Text>
          </TouchableOpacity>

          <TouchableOpacity onPress={() => navigation.navigate("Login")}>
            <Text style={styles.loginText}>
              Already have an account? Login
            </Text>
          </TouchableOpacity>
        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}

// -------------------- STYLES ---------------------
const styles = StyleSheet.create({
  container: {
    padding: 20,
    paddingBottom: 200,
    alignItems: "center",
  },
  header: {
    fontSize: 32,
    fontWeight: "600",
    marginBottom: 20,
  },
  input: {
    width: "95%",
    height: 50,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: "gray",
    paddingHorizontal: 12,
    marginTop: 10,
  },
  inputContainer: {
    width: "95%",
    height: 50,
    borderRadius: 12,
    borderWidth: 2,
    borderColor: "gray",
    paddingHorizontal: 12,
    marginTop: 10,
    flexDirection: "row",
    alignItems: "center",
  },
  inputBox: {
    flex: 1,
  },
  errorText: {
    width: "95%",
    color: "red",
    fontSize: 15,
    marginTop: 3,
  },
  errorInput: {
    borderColor: "red",
  },
  btn: {
    width: "95%",
    height: 50,
    backgroundColor: "purple",
    justifyContent: "center",
    borderRadius: 12,
    marginTop: 20,
  },
  btnText: {
    fontSize: 20,
    textAlign: "center",
    color: "white",
  },
  loginText: {
    marginTop: 15,
    textAlign: "center",
    fontSize: 16,
  },
});













//Login
import {
  View,
  Text,
  KeyboardAvoidingView,
  ScrollView,
  StyleSheet,
  TextInput,
  TouchableOpacity,
  Alert,
} from 'react-native';
import React, { useState } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Ionicons from "react-native-vector-icons/Ionicons";

export default function Signup({navigation}) {

  const [email,setemail] = useState("");
  const [password,setpassword] = useState("");
  const [showPass, setShowPass] = useState(false);

  const [error, seterror] = useState({});

  function validate(name,value){
    let error = '';
  
    if (name === 'email' && value.trim() === '') {
      error = 'email is required';
    }
    if (name === 'password' && value.trim() === '') {
      error = 'password is required';
    }
   
    return error;
  }

  function handlechange(name, value) {

     if(name === "email"){
      setemail(value)
     }
      if(name === "password"){
      setpassword(value)
     }
     seterror((prev)=>({...prev,[name]:validate(name,value)}));

  }

  const handlesubmit = async()=>{

    let newerror = {};

    if(!email){
      newerror.email ="email is requires"
    }

    if(!password){
      newerror.password ="password is requires"
    }

    if(Object.keys(newerror).length>0){
       seterror(newerror);
       return;
    }

    let user = JSON.parse(await AsyncStorage.getItem("user"));
    let currentuser = user.find((u)=> (u.email === email && u.password === password))

    if(currentuser){
         await AsyncStorage.setItem("currentuser",JSON.stringify(currentuser))
         Alert.alert("Login Successfully")
         navigation.replace("TabNavigation")
    }
    else{
      seterror({email:"",password:"Invalid email or password"})
    }

  }

  return (
    <SafeAreaView style={{ flex: 1 }}>
      <KeyboardAvoidingView style={{ flex: 1 }} keyboardVerticalOffset={50}>
        <ScrollView contentContainerStyle={styles.container}>
          
          <Text style={styles.header}>Login</Text>

         
          <TextInput
            placeholder="Enter the email"
            style={[
              styles.input,
              error.email && { borderColor: "red" }
            ]}
            value={email}
            onChangeText={(value) => handlechange("email", value)}
          />
          {error.email && (
            <Text style={styles.errorText}>{error.email}</Text>
          )}

        
          <View
            style={[
              styles.inputContainer,
              error.password && { borderColor: "red" }
            ]}
          >
            <TextInput
              placeholder="Enter password"
              secureTextEntry={!showPass}
              value={password}
              onChangeText={(value) => handlechange("password", value)}
              style={styles.passwordInput}
            />

            <TouchableOpacity onPress={() => setShowPass(!showPass)}>
              <Ionicons
                name={showPass ? "eye" : "eye-off"}
                size={24}
                color="gray"
              />
            </TouchableOpacity>
          </View>

          {error.password && (
            <Text style={styles.errorText}>{error.password}</Text>
          )}

        
          <TouchableOpacity style={styles.SignupBtn} onPress={handlesubmit}>
            <Text style={{fontSize:20,textAlign:"center",color:"white"}}>
                Signup
            </Text>
          </TouchableOpacity>

          <TouchableOpacity onPress={()=>navigation.navigate("Signup")}>
            <Text style={styles.bottomLink}>
                Do not have account? Go to Signup
            </Text>
          </TouchableOpacity>

        </ScrollView>
      </KeyboardAvoidingView>
    </SafeAreaView>
  );
}


const styles = StyleSheet.create({
  container: {
    padding: 10,
    paddingBottom: 20,
    alignItems: 'center',
    marginTop:120
  },
  header: {
    fontSize: 34,
    textAlign: 'center',
    fontWeight: '500',
  },


  input: {
    width: '95%',
    height: 50,
    borderRadius: 14,
    borderWidth: 2,
    borderColor: 'gray',
    marginVertical: 10,
    paddingHorizontal: 12,
  },


  inputContainer: {
    width: "95%",
    height: 50,
    borderWidth: 2,
    borderRadius: 14,
    borderColor: "gray",
    marginVertical: 10,
    paddingHorizontal: 12,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-between",
  },

  passwordInput: {
    flex: 1,
    height: "100%",
  },

  SignupBtn:{
    width: '95%',
    height: 50,
    borderRadius: 14,
    marginVertical: 10,
    backgroundColor:"purple",
    justifyContent:"center"
  },

  bottomLink:{
    fontSize:16,
    textAlign:"center",
    color:"black",
    marginVertical:20
  },

  errorText:{
    color:"red",
    width:"95%",
    textAlign:"left"
  }
});












//DrawerNavigation
import { View, Text } from 'react-native'
import React from 'react'
import { createDrawerNavigator } from '@react-navigation/drawer';
import StackNavigation from "./StackNavigation"
import EventScreen from "../screens/EventScreen"



export default function DrawerNavigation() {
    const Drawer = createDrawerNavigator();
  return (
    <Drawer.Navigator screenOptions={{
        headerShown:false,
          drawerStyle: {
            backgroundColor: '#c6cbef',
            width: 240,
          },
          drawerPosition: 'right',
        }}>
      <Drawer.Screen name='StackNavigation' component={StackNavigation} />

       <Drawer.Screen
          name="EventScreen"
          component={EventScreen}
         
        />
    </Drawer.Navigator>
  )
}









//StackNavigation
import { View, Text, SafeAreaView } from 'react-native';
import React from 'react';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Signup from '../screens/Signup';
import Login from '../screens/Login';
import EditProfile from '../screens/EditProfile';
import ProductDetail from '../screens/ProductDetail';
import AuthCheck from '../screens/AuthCheck';
import SplashScreen from '../screens/SplashScreen';
import TabNavigation from './TabNavigation';


export default function StackNavigation() {
  const Stack = createNativeStackNavigator();
  return (
    <Stack.Navigator screenOptions={{ headerShown: false }}>
      <Stack.Screen name="SplashScreen" component={SplashScreen} />
      <Stack.Screen name="AuthCheck" component={AuthCheck} />
      <Stack.Screen name="Signup" component={Signup} />
      <Stack.Screen name="Login" component={Login} />
      <Stack.Screen
        options={{
          headerShown: true,
          headerStyle: {
            backgroundColor: 'purple',
          },
          headerTintColor: '#fafafa',
        }}
        name="ProductDetail"
        component={ProductDetail}
      />
      <Stack.Screen name="TabNavigation"  component={TabNavigation} />
      <Stack.Screen
        options={{ headerShown: true }}
        name="EditProfile"
        component={EditProfile}
      />
    </Stack.Navigator>
  );
}











//tabnavigation
import { View, Text, TouchableOpacity, Alert } from 'react-native';
import React from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Ionicons from 'react-native-vector-icons/Ionicons';
import Home from '../screens/Home';
import Profile from '../screens/Profile';
import AsyncStorage from '@react-native-async-storage/async-storage';
import Logout from '../screens/Logout';

export default function TabNavigation({ navigation }) {
  const Tab = createBottomTabNavigator();

  const handleLogout = async () => {
    Alert.alert('Logout', 'Are you sure you want to logout?', [
      { text: 'Cancel', style: 'cancel' },
      {
        text: 'OK',
        onPress: async () => {
          await AsyncStorage.removeItem('currentuser');
          navigation.replace('Login');
        },
      },
    ]);
  };

  return (
    <Tab.Navigator
      screenOptions={({ route}) => ({
        tabBarIcon: ({ focused, color, size }) => {
          let iconName;

          if (route.name === 'Home') {
            iconName = focused ? 'home' : 'home-outline';
          } else if (route.name === 'Profile') {
            iconName = focused ? 'person' : 'person-outline';

          } 
          else if (route.name === 'Logout') {
            iconName = focused ? 'cart-sharp' : 'cart-sharp';
          }
          
          
          else if (route.name === 'More') {
            iconName = focused ? 'ellipsis-horizontal' : 'ellipsis-horizontal-outline';
          }
          return <Ionicons name={iconName} size={size} color={color} />;
        },
        tabBarActiveTintColor: 'tomato',
        tabBarInactiveTintColor: 'gray',
      })}
    >
      <Tab.Screen
        options={{
          headerShown: true,
          headerBackVisible: false,
          headerStyle: {
            backgroundColor: 'purple',
          },
          headerTintColor: 'white',
          headerRight: () => (
            <TouchableOpacity
              onPress={handleLogout}
              style={{ marginRight: 10 }}
            >
              <Ionicons name="exit-outline" size={30} color="white" />
            </TouchableOpacity>
          ),
        }}
        name="Home"
        component={Home}
      />
      <Tab.Screen
        options={{
          headerShown: true,
          headerBackVisible: false,
          headerStyle: {
            backgroundColor: 'purple',
          },
          headerTintColor: '#fafafa',
        }}
        name="Profile"
        component={Profile}
      />
      <Tab.Screen name="Logout" component={Logout} />
      <Tab.Screen
        name="More"
        component={() => null}
        listeners={{
          tabPress: (e) => {
            e.preventDefault();
            navigation.openDrawer();
          },
        }}
      />
    </Tab.Navigator>
  );
}

About the Author

john

Administrator

Visit Website View All Posts