datepickerIOS not coming on the screen - reactjs

Question

I have a row where date is getting displayed on click of that view, I want a datepicker to pop up and display.
class EditProfilePicture extends React.Component {
state = {
currentDate: new Date()
};
setCurrentDateForIOS = currentDate => {
this.setState({ currentDate });
};
pickDate = () => (
<View>
{Platform.OS === "ios" ? (
<DatePickerForIOS
setCurrentDateForIOS={this.setCurrentDateForIOS}
/>
) : (
DatePickerForAndroid().then(currentDate =>
this.props.changeBirthDate({ currentDate })
)
)}
</View>
);
render() {
return (
<View>
<View style={styles.Container}>
<Text style={styles.heading}>Your birthday</Text>
<TouchableWithoutFeedback onPress={this.pickDate}>
<View style={styles.dropdown}>
<Text style={styles.textStyle}>
{DateFormatter(this.state.currentDate)}
</Text>
<Icon name="chevron-down" color={MED_GREY} />
</View>
</TouchableWithoutFeedback>
</View>
</View>
);
}
}
And in DatePickerForIOS I have this---
import React from "react";
import PropTypes from "prop-types";
import { DatePickerIOS } from "react-native";
const DatePickerForIOS = props => {
return (
<DatePickerIOS
date={new Date()}
mode="date"
onDateChange={() => props.setCurrentDateForIOS}
/>
);
};
DatePickerIOS.propTypes = {
setCurrentDateForIOS: PropTypes.func.isRequired
};
export default DatePickerForIOS;
While the code works fine for android, in IOS the screen contains NAN/NAN/NAN as text initially and the datepicker doesn't open up when clicked on the view.

Answer 1

DatePickerIOS needs to be part of the render function of EditProfilePicture
Currently you create the component fromonPress from TouchableWithoutFeedback.
You would need to do something like the docs say
render() {
return (
<View style={styles.container}>
<DatePickerIOS
date={this.state.chosenDate}
onDateChange={this.setDate}
/>
</View>
)
}
You would need to hide/show this a state boolean value to toggle on off.
Without knowing your Android code, I suspect that is acting like a popup modal.
Another solution would be to use a package like react-native-modal-datetime-picker which has the same interface between iOS and Android