reservar screen movil

mobile-ui/App.js

@@ -12,6 +12,7 @@ import RecoverPassword from "./components/RecoverPassword";
 import Reservas from "./components/Reservas";
 import Profile from "./components/Profile"; 
 import { MaterialCommunityIcons } from '@expo/vector-icons'; 
+import AreaComun from "./components/AreaComun";
 
 const Stack = createNativeStackNavigator();
 const Tab = createBottomTabNavigator(); 
@@ -47,6 +48,7 @@ export default function App() {
     }}} />
         <Stack.Screen name="Comunicados" component={HomeTab} options={{headerShown: false}} />
         <Stack.Screen name="Password" component={RecoverPassword} />
+        <Stack.Screen name="area" component={AreaComun} />
       </Stack.Navigator>
 
     

mobile-ui/components/AreaComun.js

@@ -0,0 +1,53 @@
+import React from "react";
+
+import {
+    Box, 
+    Heading, 
+    VStack, 
+    FormControl, 
+    Input, 
+    Button,
+    Center
+  } from "native-base";
+
+export default function AreaComun({navigation}){
+
+    return (
+        <Center>
+             <Box safeArea p="2" w="90%" maxW="290" py="8">
+        <Heading size="lg" color="coolGray.800" _dark={{
+        color: "warmGray.50"
+      }} fontWeight="semibold">
+          Katoikia
+        </Heading>
+        <Heading mt="1" color="coolGray.600" _dark={{
+        color: "warmGray.200"
+      }} fontWeight="medium" size="xs">
+         Reserve su área común 
+        </Heading>
+        <VStack space={3} mt="5">
+          <FormControl>
+            <FormControl.Label>Hora de inicio</FormControl.Label>
+            <Input type="text"/>
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>Hora de finalización</FormControl.Label>
+            <Input type="text" />
+          </FormControl>
+          <FormControl>
+            <FormControl.Label>Lugar</FormControl.Label>
+            <Input type="text" />
+          </FormControl>
+        
+          <Button mt="2" backgroundColor="orange.300">
+            Reservar
+          </Button>
+          <Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Comunicados')}>
+            Cancelar
+          </Button>
+        </VStack>
+      </Box>
+        </Center>
+       
+    )
+}

mobile-ui/components/Home.js

@@ -6,8 +6,6 @@ import {
     Box,
 Pressable,
     Spacer, 
-    Flex,
-    Center
   } from "native-base";
   import { MaterialCommunityIcons } from '@expo/vector-icons'; 
 export default function Home(){

mobile-ui/components/Profile.js

@@ -10,7 +10,7 @@ import {
     Center
   } from "native-base";
 
-export default function Profile(){
+export default function Profile({navigation}){
 
     return (
         <Center>
@@ -18,25 +18,25 @@ export default function Profile(){
         <Heading size="lg" color="coolGray.800" _dark={{
         color: "warmGray.50"
       }} fontWeight="semibold">
-          Welcome
+          Katoikia
         </Heading>
         <Heading mt="1" color="coolGray.600" _dark={{
         color: "warmGray.200"
       }} fontWeight="medium" size="xs">
-          Sign up to continue!
+          Modifique sus datos
         </Heading>
         <VStack space={3} mt="5">
           <FormControl>
             <FormControl.Label>Nombre</FormControl.Label>
-            <Input />
+            <Input type="text"/>
           </FormControl>
           <FormControl>
             <FormControl.Label>Correo Electrónico</FormControl.Label>
-            <Input />
+            <Input type="text" />
           </FormControl>
           <FormControl>
             <FormControl.Label>Teléfono</FormControl.Label>
-            <Input type="password" />
+            <Input type="text" />
           </FormControl>
           <FormControl>
             <FormControl.Label>Contraseña actual</FormControl.Label>
@@ -46,7 +46,7 @@ export default function Profile(){
           <Button mt="2" backgroundColor="orange.300">
             Actualizar
           </Button>
-          <Button mt="6" colorScheme="error">
+          <Button mt="6" colorScheme="error" onPress={() => navigation.navigate('Inicio')}>
             Cerrar sesión
           </Button>
         </VStack>

mobile-ui/components/Reservas.js

@@ -133,12 +133,12 @@ export default function Reservas({navigation}) {
       </Box>
     </Box>
 
-    <Box height="200" w="300" shadow="2" rounded="lg" _dark={{
+    <Box height="200" w="300" shadow="2" rounded="lg" m='5' ml='9' _dark={{
       bg: "coolGray.200:alpha.20"
     }} _light={{
       bg: "coolGray.200:alpha.20"
     }}>
-        <Fab renderInPortal={false} shadow={2} size="sm" icon={<Icon color="white" as={AntDesign} name="plus" size="sm" />} />
+        <Fab renderInPortal={false} shadow={2} size="sm" icon={<Icon mb="0.5" as={<MaterialCommunityIcons name={'plus'} />} color="white" size="sm" />} onPress={() => navigation.navigate('area')}/>
       </Box>
     </ScrollView>
   );