separar vistas del guarda e inquilino

mobile-ui/App.js

@@ -44,6 +44,28 @@ function HomeTab({ route }) {
 
   )
 }
+
+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>
+
+  )
+}
 export default function App() {
   return (
     <NativeBaseProvider>
@@ -56,6 +78,7 @@ export default function App() {
               }
             }} />
             <Stack.Screen name="Comunicados" component={HomeTab} options={{ headerShown: false }} />
+            <Stack.Screen name="ComunicadosGuarda" component={HomeTabGuarda} options={{ headerShown: false }} />
             <Stack.Screen name="Password" component={RecoverPassword} />
             <Stack.Screen name="area" component={AreaComun} options={{
               headerStyle: {

mobile-ui/components/AreaComun.js

@@ -24,8 +24,8 @@ export default function AreaComun({navigation}){
   const [selectedMinutes, setSelectedMinutes] = useState(0);
   const [endSelectedHours, setEndSelectedHours] = useState(0);
   const [endSelectedMinutes, setEndSelectedMinutes] = useState(0);
-  const [time, setTime] = useState(new Date(1598051730000))
+  const [time, setTime] = useState(new Date())
-  const [endTime, setEndTime] = useState(new Date(1598051730000))
+  const [endTime, setEndTime] = useState(new Date())
   const date = new Date(); 
 
     useEffect(() => {
@@ -144,13 +144,13 @@ export default function AreaComun({navigation}){
           <FormControl isRequired>
             <FormControl.Label>Hora de inicio</FormControl.Label>
             <View  >
-            <DateTimePicker mode="time" is24Hour={true} value={time} onChangeStart={onChange}/>
+            <DateTimePicker mode="time" is24Hour={true} value={time} onChangeStart={onChangeStart}/>
             </View>
           </FormControl>
           <FormControl isRequired>
             <FormControl.Label>Hora de finalización</FormControl.Label>
             <View  >
-            <DateTimePicker mode="time" is24Hour={true} value={time} onChangeEnd={onChange}/>
+            <DateTimePicker mode="time" is24Hour={true} value={endTime} onChangeEnd={onChangeEnd}/>
             </View>
            
           </FormControl>

mobile-ui/components/Reservas.js

@@ -70,6 +70,7 @@ export default function Reservas({navigation}) {
               startTime={item.start_time}
               endTime={item.finish_time}
               status={item.status}
+              name={item.common_area_name}
             />
           ))
         }

mobile-ui/components/ReservasCard/index.js

@@ -11,7 +11,7 @@ import PropTypes from 'prop-types';
 
 import React from 'react';
 
-export const ReservasCard = ({ date, startTime, endTime, status}) => {
+export const ReservasCard = ({ date, startTime, endTime, status, name}) => {
     const dateFormated = format(new Date(date), "dd LL yyyy")
   
 
@@ -44,7 +44,7 @@ export const ReservasCard = ({ date, startTime, endTime, status}) => {
                         <Text bold={true} color='danger.50'> {status == 1 ? 'LIBRE' : 'RESERVADO'}</Text>
                     </Badge>
             <Heading size="md" ml="-1">
-              Reserva #1
+             {name}
             </Heading>
             <Text fontSize="xs" _light={{
             color: "violet.500"