• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
    • Questions
    • Teachers
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

137
Views
ReactNative how to build Date component

How can i build component for date using date-fns library so i can take from user (birthday date) and store the data, i have build an dropdown menu component using dummy data , so i want replace the dummy data with real data fro data-fns how can i build component display days/ months /years(current year- 1960)

dropdown menu component :

const days = [
  { num: '1', key: '1' },
  { num: '2', key: '2' },
  { num: '3 ', key: '3' },
  { num: '4', key: '4' },
  { num: '5 ', key: '5' },
  { num: '6', key: '6' },
  { num: '7', key: '7' },
  { num: '8', key: '8' },
  { num: '9', key: '9' },
  { num: '10', key: '10' },
  { num: ' 11', key: '11' },
];

const Dropdown = ({ label, data }) => {
  const [selecteday, setSelecteday] = useState({ item: '' });

  const DropdownButton = useRef();
  const [visible, setVisible] = useState(false);

 

  const toggleFunction = () => {
    visible ? setVisible(false) : openDropdown();
  };

  const openDropdown = () => {
  
    setVisible(true);
  };

  const onItemPress = item => {
    setSelecteday(item);
    console.log(item);
    setVisible(false);
  };

  const renderItem = ({ item }) => (
    <TouchableOpacity style={styles.item} onPress={() => onItemPress(item)}>
      <Text style={styles.buttonText}>{item.num}</Text>
    </TouchableOpacity>
  );
  const renderDropdown = () => {
    return (
      <SafeAreaView style={styles.dropdown}>
        <FlatList
          data={days}
          renderItem={renderItem}
          keyExtractor={(item, index) => index.toString()}
        />
      </SafeAreaView>
    );
  };
  return (
    <>
    <View style={{zIndex: 10}} >
      <TouchableOpacity
        onPress={() => toggleFunction()}
        ref={DropdownButton}
        style={styles.button}
      >
        <Text style={styles.buttonText}>
          {' '}
          {selecteday.item === '' ? label : selecteday.num}
        </Text>
        <MaterialCommunityIcons name="chevron-down" color={'#58abc8'} size={16} />
        {visible == true ? renderDropdown() : null}
      </TouchableOpacity>

    
      </View>
        { visible ? <View 
                 style={styles.modal}>
                <TouchableOpacity
                 style ={styles.overlay}
                 onPress={toggleFunction}
                 ></TouchableOpacity>
      </View>: null}
   </>
  );
};
almost 3 years ago · Juan Pablo Isaza
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error