React Native text input, datepicker and dropdown values

[mynixmail.fever]

Just started to learn React Native with expo (small steps at a time). I have a screen setup (as per the screenshot) whereby I want to display the values of each textInput, selected date and dropdown with an alert popup.

At the moment when I select a date it does nothing. And my code is complete spaghetti.

import { Alert, Pressable, ScrollView, StyleSheet, Text, TextInput, View  } from 'react-native';
import React, { useState } from 'react';
import { Link } from 'expo-router';
import { useSafeAreaInsets } from 'react-native-safe-area-context';
import { Dropdown } from 'react-native-element-dropdown';
import DatePicker from 'react-native-ui-datepicker';
import globalStyles from '../styles/globalStyles';
import dayjs from 'dayjs';

export default function TabTwoScreen() {
    ////////////////////For text imput////////////////////
    const [formData, setFormData] = useState({ description: '', serialNumber: '', });
    const handleInputChange = (key, value) => {
        setFormData((prevData) => ({
        ...prevData,
        [key]: value, // Dynamically updates the specific key
        }));
    };
    const handleSubmit = () => {
        if (!dateText) {
            Alert.alert("Validation Error", "Please select a date before submitting.");
            return;
        }
        Alert.alert('Submitted Data', JSON.stringify(formData));
    };
    ////////////////////For date////////////////////
    const [date, setDate] = useState(new Date());
    const [open, setOpen] = useState(false);
    const [dateText, setDateText] = useState('');
    const formatDate = (rawDate) => {
        let d = new Date(rawDate);
        let day = String(d.getDate()).padStart(2, '0');
        let month = String(d.getMonth() + 1).padStart(2, '0'); // Months are 0-indexed
        let year = d.getFullYear();
        return `${year}-${month}-${day}`; // Format: YYYY-MM-DD
    };
   ////////////////////For dropdown list////////////////////
    const [value, setValue] = useState<string | null>(null);
    const stations = [
        { label: 'City 1', value: '1' },
        { label: 'City 2', value: '2' },
        { label: 'City 3', value: '3' },
        { label: 'City 4', value: '4' },
        ];

  return (
    <ScrollView style={styles.scrollView}>

        <View style={styles.textInputContainer}>
        
            <TextInput
                style={globalStyles.input}
                placeholder="Description"
                value={formData.description}
                onChangeText={(text) => handleInputChange('description', text)}
            />
            
            <TextInput
                style={globalStyles.input}
                placeholder="Serial Number"
                value={formData.serialNumber}
                onChangeText={(text) => handleInputChange('serialNumber', text)}
            />

            <Text style={globalStyles.textInputDescription}>EXPIRY DATE:</Text>

            <DatePicker
                modal
                open={open}
                date={date}
                mode="single"
//                minDate={dayjs().subtract(7, 'days')}
//                maxDate={dayjs().add(1, 'year')}
                onConfirm={(selectedDate) => {
          setOpen(false); //
          setDate(selectedDate); //
          setDateText(formatDate(selectedDate)); // Update text input display
        }}
        onCancel={() => {
          setOpen(false); //
        }}
            />
        
            <Dropdown
                style={styles.dropdownList}
                data={stations}
                labelField="label"
                valueField="value"
                placeholder="Select Station"
                value={value}
                onChange={item => { setValue(item.value);
                }}
            />
        
            <Link href="/screens/addTool" style={{ marginHorizontal: 'auto' }}
                asChild>
                <Pressable onPress={handleSubmit} style={globalStyles.pressable}>
                <Text style={globalStyles.pressableText}>Add a Tool</Text>
                </Pressable>
            </Link>

        </View>

    </ScrollView>
  );
}

const styles = StyleSheet.create({
  scrollView: {
    marginTop:20,
    flex: 1,
  },
  textInputContainer: {
    justifyContent: 'center',
    alignItems: 'center',
    gap: 6,
  },
  dropdownList: {height: 50,
    borderColor: 'gray',
    borderWidth: 0.5,
    borderRadius: 8,
    paddingHorizontal: 8,
    width: '90%',
  }
});

Also, in the below screenshots I have some red underlined keywords.

Here are my styles

import { View, Pressable, Text, StyleSheet, ImageBackground } from 'react-native';

const globalStyles = StyleSheet.create({
  indexPageSelectionContainer: {
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: "#ffffff",
    gap: 16,
  },
  bgImage: {
    width: '100%',
    height: '100%',
    flex: 1,
    resizeMode: 'cover',
    justifyContent: 'center',
  },
  link: {
    color: 'white',
    fontSize: 42,
    fontWeight: 'bold',
    textAlign: 'center',
    backgroundColor: 'rgba(0,0,0,2)',
    textDecorationLine: 'underline',
    backgroundColor: 'rgba(0,0,0,5)',
    padding: 4,
  },
  title: {
    color: 'white',
    fontSize: 42,
    fontWeight: 'bold',
    textAlign: 'center',
    backgroundColor: 'rgba(0,0,0,0.5)',
    marginBottom: 120,
  },
  pressable: {
    height: 40,
    borderRadius: 10,
    justifyContent: 'center',
    backgroundColor: 'rgba(0,0,0,0.25)',
    padding: 2,
    width: '90%',
    borderWidth: 0,
    borderColor: 'red',
  },
  pressableText: {
    color: '#000000',
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'left',
    padding: 4,
  },
  input: {
    color: 'black',
    height:48,
    borderWidth: 1,
    borderColor: '#c0c0c0',
    borderRadius: 8,
    paddingHorizontal: 12,
    backgroundColor: '#ffffff',
    fontSize: 12,
    width: '90%',
  },
  textInputDescription: {
    fontWeight: 'bold',
    textAlign: 'left',
  },
  pressed: {
    opacity: 0.7,
  }
})

export default globalStyles