Untitled

import * as React from 'react';
import { Text, View ,Button,Statusbar, TouchableOpacity, SafeAreaView, ScrollView, FlatList} from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Input } from 'react-native-elements';
import { TextInput } from 'react-native';
import { StatusBar } from 'expo-status-bar';
import { Home, Menu, MessageSquare, MoreVertical, Phone, Search, UserSquare } from 'lucide-react-native';
import ModalWithList from './picker';
import Drawer from 'react-native-drawer';
import Drawerr from './drawer';


const Tab = createBottomTabNavigator();
const Stack = createNativeStackNavigator();

function HomeScreen() {
  return (
   <SafeAreaView style={{ flex: 1 }}>
    
      <Navbar/>
      <Tab.Navigator screenOptions={{headerShown:false}}>
      <Tab.Screen name="Home" component={HomeScreen1} 
      options={{
        tabBarIcon: () => (
          <Home strokeWidth={3} color='blue'  />
        ),
        
      }}/>
      <Tab.Screen name="Settings" component={CallScreen} 
      options={{
        tabBarIcon: () => (
         
          <Phone strokeWidth={3}  color='blue' />
        ),
     
      }}
      />
      
      <Tab.Screen name="Messages" component={MessagesScreen} 
      options={{
        tabBarIcon: () => (
          <MessageSquare strokeWidth={4} color='blue'  />
        ),
         
      }}/>
      <Tab.Screen name="Contact" component={ContactScreen} 
      options={{
        tabBarIcon: () => (
          <UserSquare strokeWidth={3}  color='blue' />
        ),
        
      }}/>
      </Tab.Navigator>
      </SafeAreaView>
   
  );
}

function Navbar() {
  const [searchvisble,setsearchvisble]=React.useState("hidden")
  return (
    <SafeAreaView className="w-full flex flex-row justify-between items-center  h-[50px] px-5 shadow-md ">
      <Text><Menu strokeWidth={4} color='black'  />
      
      </Text>
      <Drawerr/>
      <View className="flex flex-row justify-end items-center w-[50%]  ">
        
        <TextInput
          placeholder="Search"
          className={`w-[80%] p-2 ${searchvisble}`}
        />
        <TouchableOpacity className="mx-2" onPress={()=>{searchvisble=="flex"?setsearchvisble("hidden"):setsearchvisble("flex")}} >
        <Search strokeWidth={3} color='black'/>
        </TouchableOpacity>
        <TouchableOpacity  >
        <MoreVertical strokeWidth={3} color='black' />
        </TouchableOpacity>
      </View>
     
    </SafeAreaView>
  );
}

function CallScreen() {
  return (
    <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }} >
     
     <Text>Call logs</Text>
    
    </SafeAreaView>
  );
}
function HomeScreen1() {
  return (
    <View className="bg-slate-400 flex justify-center items-center px-1">
     
    <FlatList
    className="w-full px-5"
    data={[1,2,3,4,5,6,7,8,9,0,6,7,5,4,34,4]}
    renderItem={(item)=>{
 return(
  <View className=" flex flex-row justify-between items-center bg-slate-200 my-2 p-3 ">
    <View >
    <Text>Nikhil Lende</Text>
    <Text>1223456789</Text>
    <Text>nagpur</Text>
    </View>
    
  </View>
 )
    }}
    />
    </View>
  );
}

function MessagesScreen() {
  return (
    <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Messages</Text>
    </SafeAreaView>
  );
}

function ContactScreen() {
  return (
    <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text>Contact</Text>
    </SafeAreaView>
  );
}

function LoginScreen({navigation}) {
  return (
    <SafeAreaView style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text className="text-lg font-extrabold text-black ">LoginScreen</Text>
        <View className=" w-full p-10 flex justify-center items-center ">
        <TextInput className="w-full outline-1 border border-gray-600 p-2 px-4 rounded-xl my-3"  placeholder='Username'/>
        <TextInput className="w-full outline-1 border border-gray-600 p-2 px-4 rounded-xl my-3 mb-10" secureTextEntry={true} placeholder='Password'/>
        <TouchableOpacity className="rounded-full bg-blue-500 py-2 px-4 flex justify-center items-center w-[50%]" onPress={() => navigation.navigate('Home')}>
        <Text className="text-lg font-extrabold text-white ">Login</Text>
        </TouchableOpacity>
     </View>
      
    </SafeAreaView>
  );
}

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName='LoginScreen'>
        <Stack.Screen name="Home" component={HomeScreen} options={{headerShown:false}} />
        <Stack.Screen name="LoginScreen" component={LoginScreen} options={{headerShown:false}}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
}