how can i create modal page in function?

Question

Calendar/index.js

constructor(props) {
this.state = {
  CalendarModalVisible: false
};
}
toggleCalendarModal = () => {
this.setState({ CalendarModalVisible: !this.state.CalendarModalVisible });  
 }
setModalPage = () => {
return(
 <Modal isVisible={this.state.CalendarModalVisible} onBackdropPress={() => 
{ this.toggleCalendarModal() }} >
 <View style={this.style.modal_container} >
 </View>
 </Modal>
);
}
renderDay(day, id) {
....
  return (
      <TouchableOpacity onPress={() => { this.setModalPage(); 
this.toggleCalendarModal() }}>
        <View style={[this.style.home_day, { height: days_len }]} key={day} 
>
          <View style={{ flex: 1, alignItems: 'center' }} key={id}>
            <DayComp
              ...
            >
              {date}
            </DayComp>
          </View>
        </View>
      </TouchableOpacity>
  );
renderWeek(days, id) {
const week = [];
days.forEach((day, id2) => {
  week.push(this.renderDay(day, id2));
}, this);
  return (<View style={[this.style.home_week} key= 
{id}>{week}
  </View>);
 render() { ...}
 return( <View 
        ...calendar component
       </View>
 );

I am modifying the calendar/index.js in the react-native-calendar module. I made the calendar page like iphone calendar. and I want the modal page show if i click the view home_day in renderday function..... the setModalPage function is working well, but the modal page is not showing. how can I resolve the problem..?

Edit

I resolve the problem myself. I added {this.forceUpdate()} in toggleCalendarModal function.