added datepicker component

components/datpicker.component.js

+import React, {useState} from 'react';
+import {View, StyleSheet, Platform} from 'react-native';
+import DateTimePicker from '@react-native-community/datetimepicker';
+
+export const AppDatePicker = () => {
+  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);
+  };
+
+  const showDatepicker = () => {
+    showMode('date');
+  };
+
+  const showTimepicker = () => {
+    showMode('time');
+  };
+
+  return (
+    <View style={styles.datepicker}>
+      <DateTimePicker
+        testID="dateTimePicker"
+        value={date}
+        mode={mode}
+        is24Hour={true}
+        display="default"
+        onChange={onChange}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  datepicker:{
+    flex: 1,
+    justifyContent: 'center',
+    marginVertical: 20
+  }
+});

components/text_input.component.js

@@ -4,7 +4,7 @@ import themeColors from '../assets/colors';
 
 export const AppTextInput = (props) => {
   return(
-    <TextInput style={styles.input}/>
+    <TextInput style={styles.input} {...props}/>
   )
 }
 

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "@react-native-community/async-storage": "^1.12.1",
+    "@react-native-community/datetimepicker": "^3.5.2",
     "@react-native-community/masked-view": "0.1.10",
     "@react-navigation/drawer": "^5.12.5",
     "@react-navigation/material-bottom-tabs": "^6.0.5",

screen/User.Auction.Create.Screen.js

 import React from 'react';
 import {View, StyleSheet, Text, ScrollView} from 'react-native';
-import { AppAuctionItem } from '../components/auction_item.component';
 import { AppContainer } from '../container/container';
 import themeColors from '../assets/colors';
 import { AuctionBottomTab } from '../Navigations/AuctionBottomTab';
-import AppCountDownTimer from '../components/countdown_component';
+import { AppTextInput } from '../components/text_input.component';
+import { AppButton } from '../components/button.component';
+import { AppDatePicker } from '../components/datpicker.component';
 
 const  UserAuctionCreateScreen =  (props, {navigation}) => {
   return (
     <View style={styles.container}>
-       <AppCountDownTimer/>
       <AppContainer>
         <View style={styles.header}>
           <Text style={styles.auctionHeading}>Create Auction</Text>
         </View>
         <ScrollView>
           <View>
-            <AppAuctionItem label='Auction Item 2' delete/>
-            <AppAuctionItem label='Auction Item 3' delete/>
-            <AppAuctionItem label='Auction Item 4' delete/>
+            <AppTextInput placeholder='Enter item name'/>
+            <AppTextInput/>
+            <AppDatePicker/>
+            <AppButton/>
           </View>
       </ScrollView>
       </AppContainer>