katoikia-app/mobile-ui/App.js

99 lines
4.7 KiB
JavaScript
Raw Normal View History

2022-08-22 20:22:27 +00:00
import React, { useContext, useState } from "react";
2022-08-04 07:22:41 +00:00
import {
2022-08-22 20:22:27 +00:00
NativeBaseProvider,
2022-08-17 21:08:38 +00:00
Icon
2022-08-04 07:22:41 +00:00
} from "native-base";
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
2022-08-22 20:22:27 +00:00
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import LogIn from "./components/LogIn";
import Home from "./components/Home";
import RecoverPassword from "./components/RecoverPassword";
2022-08-17 16:36:33 +00:00
import Reservas from "./components/Reservas";
2022-08-22 20:22:27 +00:00
import Profile from "./components/Profile";
import { MaterialCommunityIcons } from '@expo/vector-icons';
2022-08-17 22:47:48 +00:00
import AreaComun from "./components/AreaComun";
2022-08-22 20:22:27 +00:00
import { UserContext, UserContextProvider } from "./context/UserContext";
2022-08-23 01:31:42 +00:00
import AgregarInvitados from "./components/AgregarInvitados";
2022-08-23 05:27:12 +00:00
import Invitados from "./components/Invitados"
2022-08-06 05:16:04 +00:00
const Stack = createNativeStackNavigator();
2022-08-22 20:22:27 +00:00
const Tab = createBottomTabNavigator();
2022-07-18 20:54:08 +00:00
2022-08-22 20:22:27 +00:00
function HomeTab({ route }) {
const { user } = useContext(UserContext);
const [selected, setSelected] = useState(0);
2022-08-17 21:08:38 +00:00
2022-08-17 16:36:33 +00:00
return (
2022-08-22 23:51:55 +00:00
2022-08-22 20:09:33 +00:00
<Tab.Navigator initialParams={user} initialRouteName="Comunicados" >
2022-08-22 06:51:05 +00:00
<Tab.Screen name="Comunicados" component={Home} initialParams={user} options={{headerStyle: {
2022-08-17 16:36:33 +00:00
backgroundColor: "#D7A86E"
2022-08-22 06:09:51 +00:00
}, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(0)}
/>
2022-08-22 06:51:05 +00:00
<Tab.Screen name="Reservas" component={Reservas } initialParams={user} options={{headerStyle: {
2022-08-17 16:36:33 +00:00
backgroundColor: "#D7A86E"
2022-08-17 21:08:38 +00:00
}, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'tree' : 'tree-outline'} />} color="#D7A86E" size="md" />)} } onclick={() => setSelected(1)} />
2022-08-23 05:27:12 +00:00
<Tab.Screen name="Invitados" component={Invitados} initialParams={user} options={{headerStyle: {
2022-08-23 01:31:42 +00:00
backgroundColor: "#D7A86E"
}, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'contacts' : 'contacts-outline'} />} color="#D7A86E" size="md" />)} } onclick={() => setSelected(1)} />
2022-08-22 06:51:05 +00:00
<Tab.Screen name="Perfil" component={Profile} initialParams={user} options={{headerStyle: {
2022-08-17 16:36:33 +00:00
backgroundColor: "#D7A86E"
2022-08-17 21:08:38 +00:00
}, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 2 ? 'account' : 'account-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(2)} />
2022-08-17 16:36:33 +00:00
</Tab.Navigator>
2022-08-22 23:51:55 +00:00
2022-08-17 16:36:33 +00:00
)
}
2022-08-24 17:15:27 +00:00
function HomeTabGuarda({ route }) {
const { user } = useContext(UserContext);
const [selected, setSelected] = useState(0);
return (
<Tab.Navigator initialParams={user} initialRouteName="Comunicados" >
<Tab.Screen name="Comunicados" component={Home} initialParams={user} options={{headerStyle: {
backgroundColor: "#D7A86E"
}, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 0 ? 'home' : 'home-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(0)}
/>
<Tab.Screen name="Invitados" component={Invitados} initialParams={user} options={{headerStyle: {
backgroundColor: "#D7A86E"
}, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 1 ? 'contacts' : 'contacts-outline'} />} color="#D7A86E" size="md" />)} } onclick={() => setSelected(1)} />
<Tab.Screen name="Perfil" component={Profile} initialParams={user} options={{headerStyle: {
backgroundColor: "#D7A86E"
}, tabBarIcon: () => (<Icon mb="2" as={<MaterialCommunityIcons name={selected === 2 ? 'account' : 'account-outline'} />} color="#D7A86E" size="md" />)}} onclick={() => setSelected(2)} />
</Tab.Navigator>
)
}
2022-08-04 07:22:41 +00:00
export default function App() {
return (
<NativeBaseProvider>
2022-08-22 20:22:27 +00:00
<UserContextProvider>
<NavigationContainer>
<Stack.Navigator initialRouteName="LogIn">
2022-09-01 04:11:13 +00:00
<Stack.Screen name="Inicio" component={Reservas} options={{
2022-08-22 20:22:27 +00:00
headerStyle: {
backgroundColor: "#D7A86E"
}
}} />
<Stack.Screen name="Comunicados" component={HomeTab} options={{ headerShown: false }} />
2022-08-24 17:15:27 +00:00
<Stack.Screen name="ComunicadosGuarda" component={HomeTabGuarda} options={{ headerShown: false }} />
2022-08-22 20:22:27 +00:00
<Stack.Screen name="Password" component={RecoverPassword} />
<Stack.Screen name="area" component={AreaComun} options={{
headerStyle: {
backgroundColor: "#D7A86E"
}
}} />
2022-08-23 05:27:12 +00:00
<Stack.Screen name="invitado" component={AgregarInvitados} options={{
headerStyle: {
backgroundColor: "#D7A86E"
}
}} />
2022-08-22 20:22:27 +00:00
</Stack.Navigator>
</NavigationContainer>
</UserContextProvider>
2022-08-04 07:22:41 +00:00
</NativeBaseProvider>
);
2022-08-22 20:22:27 +00:00
}