time picker reservas

mobile-ui/components/AreaComun.js

@@ -1,18 +1,17 @@
 import React, {useContext, useEffect, useState} from "react";
-
 import {
     Box, 
     Heading, 
     VStack, 
     FormControl,
-    Input, 
     Button,
     Center, 
-    Select, CheckIcon
+    Select, CheckIcon, ScrollView
   } from "native-base";
 import { UserContext } from "../context/UserContext";
 import { API } from "../environment/api";
-
+import {TimePicker} from 'react-native-simple-time-picker';
+import { View, StyleSheet } from "react-native";
 export default function AreaComun({navigation}){
 
   const { user } = useContext(UserContext)
@@ -20,6 +19,12 @@ export default function AreaComun({navigation}){
   const [areas, setAreas] = useState([])
   const [isRequesting, setIsRequesting] = useState(false);
 
+  const [selectedHours, setSelectedHours] = useState(0);
+  const [selectedMinutes, setSelectedMinutes] = useState(0);
+
+  const [endSelectedHours, setEndSelectedHours] = useState(0);
+  const [endSelectedMinutes, setEndSelectedMinutes] = useState(0);
+
     useEffect(() => {
 
       const onRequestReservasData = async () => {
@@ -68,6 +73,7 @@ export default function AreaComun({navigation}){
       }} fontWeight="medium" size="xs">
          Reserve su área común 
         </Heading>
+        <ScrollView showsVerticalScrollIndicator={false}> 
         <VStack space={3} mt="5">
         <FormControl isRequired>
             <FormControl.Label>Área común</FormControl.Label>
@@ -80,31 +86,34 @@ export default function AreaComun({navigation}){
           <Select.Item label={item.name} value={item.name} />
         ))}
           
-        
-          
         </Select>
           </FormControl>
           <FormControl isRequired>
             <FormControl.Label>Hora de inicio</FormControl.Label>
-            <Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Hora de inicio" _selectedItem={{
+            <View height="80" >
-        bg: "teal.600",
+            <TimePicker 
-        endIcon: <CheckIcon size="5" />
+          selectedHours={selectedHours}
-      }} mt={1} onValueChange={itemValue => setService(itemValue)}>
+          selectedMinutes={selectedMinutes}
-          <Select.Item label="UX Research" value="ux" />
+          onChange={(hours, minutes) => {
-          <Select.Item label="Web Development" value="web" />
+            setSelectedHours(hours);
-          
+            setSelectedMinutes(minutes);
-        </Select>
+          }}/>
+            </View>
           </FormControl>
           <FormControl isRequired>
             <FormControl.Label>Hora de finalización</FormControl.Label>
-            <Select selectedValue={service} minWidth="200" accessibilityLabel="Choose Service" placeholder="Hora de finalización" _selectedItem={{
+            <View height="80" >
-        bg: "teal.600",
+            <TimePicker 
-        endIcon: <CheckIcon size="5" />
+          selectedHours={selectedHours}
-      }} mt={1} onValueChange={itemValue => setService(itemValue)}>
+          //initial Hourse value
-          <Select.Item label="UX Research" value="ux" />
+          selectedMinutes={selectedMinutes}
-          <Select.Item label="Web Development" value="web" />
+          //initial Minutes value
+          onChange={(hours, minutes) => {
+            setEndSelectedHours(hours);
+            setEndSelectedMinutes(minutes);
+          }}/>
+            </View>
            
-        </Select>
           </FormControl>
          
         
@@ -115,8 +124,19 @@ export default function AreaComun({navigation}){
             Cancelar
           </Button>
         </VStack>
+
+        </ScrollView>
       </Box>
         </Center>
        
     )
 }
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 10,
+    justifyContent: 'center',
+    alignItems: 'center',
+    height: 40
+  }
+});

mobile-ui/package.json

@@ -34,6 +34,7 @@
     "react-native-reanimated": "~2.3.1",
     "react-native-safe-area-context": "3.3.2",
     "react-native-screens": "~3.10.1",
+    "react-native-simple-time-picker": "^1.3.11",
     "react-native-svg": "12.1.1",
     "react-native-web": "0.17.1",
     "universal-cookie": "^4.0.4"