Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

214
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}
   </>
  );
};
about 4 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 Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!