appear button in ios

All is working fine in Android but in ios have an extra button showing current date and I need to press on that instead of pressing Show Picker.
In my code I am using TouchableOpacity instead of Button. Any advise?

Below are my code. `export const AppDateTimePicker = () => { const [date, setDate] = useState(new Date()); const [mode, setMode] = useState(‘date’); const [show, setShow] = useState(false); const [chosenDate, setChosenDate] = useState(‘dd/mm/yyyy’);

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

let tempDate = new Date(currentDate);
let showDate = [tempDate.getDate(), (tempDate.getMonth() + 1), tempDate.getFullYear()].join('/');
setChosenDate(showDate);

};

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

const showDatepicker = () => { showMode(‘date’); };

return ( <View style={styles.container}> <View style={styles.dateContent}> <TouchableOpacity onPress={(showDatepicker)} > <Text style={styles.textStyle}>{chosenDate}</Text> <MaterialCommunityIcons name="calendar" size={24} style={styles.icon}/> </TouchableOpacity> {/* <Button onPress={showDatepicker} title="Show date picker!" /> */} </View>

  {show && (
    <DateTimePicker
      testID="dateTimePicker"
      value={date}
      mode={mode}
      display="default"
      onChange={onChange}
    />
  )}
</View>

); };

const styles = StyleSheet.create({ container: { borderBottomWidth: 1, borderBottomColor: colors.grey, width: ‘100%’, paddingTop: 8, paddingBottom: 8, marginBottom: 30, marginTop: -10 }, icon: { position: ‘absolute’, right: 0, // top: 12 }, dateContent: { width: ‘100%’, padding: 8, color: colors.primary }, textStyle: { color: colors.primary } }); `

[SymntxHomendra51]

Save your time and use this package instead https://github.com/mmazzarolo/react-native-modal-datetime-picker

[M-Monn]

Solved. Need to wrapped inside Modal and display as ‘spinner’ for ios. You can check below code. I found the solution from the link below: https://www.youtube.com/watch?v=lpIEpggB6o4 Thanks to A3 Programming.

import React, {useState} from 'react';
import {View, Platform, Text, StyleSheet, Modal, TouchableOpacity} from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
import { MaterialCommunityIcons } from '@expo/vector-icons';
import colors from '../config/colors';

function AppDateTimePicker (props) {
  const [date, setDate] = useState(new Date());
  const [mode, setMode] = useState('date');
  const [show, setShow] = useState(false);
  const [chosenDate, setChosenDate] = useState('dd/mm/yyyy');

  const onChange = (event, selectedDate) => {
    const currentDate = selectedDate || date;
    setShow(Platform.OS === 'ios');
    setDate(currentDate);
    let tempDate = new Date(currentDate);
    let showDate = [tempDate.getDate(), (tempDate.getMonth() + 1), tempDate.getFullYear()].join('/');
    setChosenDate(showDate);
  };

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

  const showDatepicker = () => {
    showMode('date');
  };

  const hideDatepicker = () => {
    setShow(false);
  };

  const onCancelPress = () => {
    setDate(date);
    setShow(false);
  }

  const onDonePress = () => {
    props.onDateChange(date);
    setShow(false);
  }

  const renderDatePicker = () => {
    return(
      <DateTimePicker
        testID="dateTimePicker"
        value={new Date(date)}
        mode={mode}
        display={Platform.OS === 'ios' ? 'spinner' : 'default'}
        onChange={onChange}/>
    );
  }

  return (
    <View style={styles.container}>
      <View style={styles.dateContent}>
        <TouchableOpacity onPress={showDatepicker} >
          <Text style={styles.textStyle}>{chosenDate}</Text>
          <MaterialCommunityIcons name="calendar" size={24} style={styles.icon}/>
        </TouchableOpacity>
      </View>
      {Platform.OS != 'ios' && show && renderDatePicker()}
      {Platform.OS === 'ios' && show && (
        <Modal
          transparent={true}
          animationType='slide'
          visible={show}
          supporDirections={['portrait']}
          onRequestClose={hideDatepicker}>
          <View style={styles.modalContentView}>
            <TouchableOpacity
              style={{ flex: 1, backgroundColor: colors.lightGrey, }}
              onPress={onCancelPress}>
              <Text style={styles.modalBtnText}>Cancel</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={{backgroundColor: colors.lightGrey}}
              onPress={onDonePress}>
              <Text style={styles.modalBtnText}>Done</Text>
            </TouchableOpacity>
          </View>
          <View style={{backgroundColor: colors.lightGrey}}>
            {renderDatePicker()}
          </View>
        </Modal>
      )}
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    borderBottomWidth: 1,
    borderBottomColor: colors.grey,
    width: '100%',
    paddingTop: 8,
    paddingBottom: 0,
    marginTop: -10
  },
  icon: {
    position: 'absolute',
    right: 0,
    bottom: 0
  },
  dateContent: {
    width: '100%',
    padding: 8,
    color: colors.primary
  },
  textStyle: {
    color: colors.primary,
  },
  modalContentView:{
    flex: 1, 
      alignItems: 'flex-end',
      flexDirection: 'row', 
      justifyContent: 'center',
  },
  modalBtnText: {
    color: colors.primary,
    fontWeight: 'bold',
    padding: 20
  }
});

export default AppDateTimePicker;