Edit Task

[thanachotw]

[ghost]

{DateTime} install datetimepicker npm install @react-native-community/datetimepicker --save

import React, { useState } from "react"; import { Button, Text, useDisclose, View} from 'native-base'; import { Platform, StyleSheet } from "react-native"; import Feather from 'react-native-vector-icons/Feather'; import Fontisto from 'react-native-vector-icons/Fontisto'; import DateTimePicker from "@react-native-community/datetimepicker";

function DateTime() { const [date, setDate] = useState(new Date()); const [mode, setMode] = useState('date'); const [show, setShow] = useState(false);

const onChange = (event, selectedDate) => { const currentDate = selectedDate || date; setShow(Platform.OS === 'ios'); setDate(currentDate); }

const showMode = (currentMode) =>{ setShow(true); setMode(currentMode); }

return ( <>

Date showMode('date')} style={style.btnDate}> 18/2/22 {show && ( )}

  <View style={style.containerTime}>

    <View style = {style.boxTime}>
      <Feather name="clock" size={26} color="white" />
    </View>

    <Text style={style.text}>Time</Text>

    <Button title='Timepicker' onPress={()=> showMode('time')} style={style.btnTime}>
      <Text>0 : 00</Text>
    </Button>

    {show && (
      <DateTimePicker
        value={date}
        mode={mode}
        is24Hour={true}
        display='default'
        onChange={onChange}/>
    )}

  </View>
</>

); }

const style = StyleSheet.create({ text: { fontSize: 15, marginRight : 90, marginLeft : 15,

}, btnTime: { backgroundColor: '#FFFFFF', borderRadius: 18, borderWidth: 3, borderColor: '#FD9340', width: 100, marginLeft : 30 },

boxTime: { height : 40, width : 40, backgroundColor : '#FD9340', borderRadius : 18, justifyContent : "center", alignItems : "center",

},

containerTime: { backgroundColor: '#FFFFFF', flexDirection: 'row', height:65, borderRadius: 16, width: '90%', justifyContent: 'center', alignItems : "center", marginTop : 12,

shadowColor: '#000',
shadowOffset: {
  width: 0,
  height: 1,
},
shadowOpacity: 0.22,
shadowRadius: 2.22,

elevation: 3,

},

boxDate: { height : 40, width : 40, backgroundColor : '#634897', borderRadius : 18, justifyContent : "center", alignItems : "center",

},

btnDate: { backgroundColor: '#E4E3FA', borderRadius: 18, borderWidth: 3, borderColor: '#7D6DFF', width: 100, marginLeft : 30 },

containerDate: { backgroundColor: '#E4E3FA', flexDirection: 'row', height:65, borderRadius: 16, width: '90%', justifyContent: 'center', alignItems : "center",

shadowColor: '#000',
shadowOffset: {
  width: 0,
  height: 1,
},
shadowOpacity: 0.22,
shadowRadius: 2.22,

elevation: 3,

} });

export default DateTime;

[ghost]

{EditTask} import React, { Component } from 'react' import { StyleSheet } from 'react-native'; import { Box, Text, Heading, VStack, FormControl, Input, Link, Button, HStack, Center, NativeBaseProvider, View ,Flex} from "native-base"; import { background } from 'native-base/lib/typescript/theme/styled-system'; import { Background } from '@react-navigation/elements'; import MCIcon from 'react-native-vector-icons/MaterialCommunityIcons'; import MIcons from 'react-native-vector-icons/MaterialIcons'; import DateTime from './DateTime'; import Repeat from './Repeat'; import Priority from './Priority';

class Edittask extends Component{ render(){ return ( <Box p="0" py="0" w="100%" maxW={400} paddingBottom={"10"} > <Box mr={"80%"} flexDirection={"row"}> <MCIcon.Button name="less-than" backgroundColor={"#FFF7ED"} color="#000000" size={10}>

Back

        </MCIcon.Button>
    </Box>
    <Center>
        <Heading size="lg" fontWeight="600" paddingBottom={"0"}>
            <Text>Edit Task</Text>
        </Heading>
    </Center>

    <VStack space={8} mt="7" >
        <Center bgColor={"#FFFF"} w="90%" alignSelf={"center"} borderRadius={"25"} padding={"4"}>
        <FormControl>
            <FormControl.Label  mt="2" my="-2" >Title</FormControl.Label>
            <Input mb={4} variant="underlined" defaultValue='TEST'/>
            <FormControl.Label my="-2">Notes</FormControl.Label>
            <Input mb={4} variant="underlined" defaultValue='TEST'/>
        </FormControl>
        </Center>
        <Box alignItems={"center"}>

        <DateTime/>

        <Repeat/>

        <Priority/>

        </Box>
    </VStack>
    <Box alignItems={"center"} paddingTop={"10"}>
    <Button
        w="25%" h="10" rounded={"full"} bgColor={"#FD9340"}>
      <Text color={"#FFFFFF"} fontSize={"15"} bold="true" >submit</Text>
    </Button>
    </Box>
</Box>

)} }

export default () => { return (

);

}